Architecture Evolution

V1V2V3V4

See how SIX evolved from traditional API calls to a real-world connected commerce platform.

Explore four generations of architecture, each building on the previous to deliver increasingly sophisticated experiences.

Compare Features Common Questions

V1: One-shot generation, direct fetch V2: Conversational refinement, shared state V3: Real-time progressive rendering V4: Real-world connected commerce platform(Current)

The Evolution Journey

V1

Manual API

One-shot generation, direct fetch

Key Innovation

One-shot generation

V2

Agent-Native

Conversational refinement, shared state

Key Innovation

Shared state + refinement

V3

Edge Streaming

Real-time progressive rendering

Key Innovation

Edge streaming + caching

V4

Current

Real-World Intelligence

Real-world connected commerce platform

Key Innovation

Real-world intelligence

Quick Summary

V1 (Manual API) uses traditional request-response patterns: the frontend calls an API endpoint, receives a JSON response, and displays it. No refinement—each request is independent.

V2 (Agent-Native) introduces shared state andconversational refinement. The agent and UI stay synchronized, enabling iterative improvements through natural language.

V3 (Edge-Native) moves computation to the edge with streaming responses and intelligent caching. Achieves sub-100ms cached responses and progressive rendering. Optional client-side AI enables offline-capable experiences.

V4 (Real-World Intelligence) integrates live web intelligence via Tavily to enrich layouts with real-world trends and expert context. Transforms the platform from a demo into a production-ready commerce system connected to the real world.

Which Version Should I Use?

Answer a few quick questions to find the right version for your needs

Need conversational refinement?

✓ Yes→ V2, V3, or V4

✗ No→ V1 (simple prototyping)

Is latency critical?

✓ Yes→ V3 or V4

✗ No→ V2 (shared state)

Need real-world trends?

✓ Yes→ V4 (production-ready)

✗ No→ V3 (edge performance)

Simple use case?

✓ Yes→ V1 (one-shot generation)

→See other cards

Quick Recommendations

For Learning

Start with V1 to understand basics, then progress through V2-V4

For Performance

Use V3 for edge speed, or V4 for performance + intelligence

For Production

Choose V4 for production-ready commerce with real-world data

Key Innovation Highlights

Each version introduces breakthrough innovations that build upon previous generations, creating an increasingly sophisticated commerce experience.

V1: Simple API

Traditional request-response pattern for straightforward, one-shot generation

V2: Spotify Loop

Conversational refinement—say "more casual" and watch the layout adapt iteratively

V3: Edge Speed

Sub-100ms cached responses with progressive rendering for instant experiences

V4: Real-World Intel

Live trend enrichment via Tavily for production-ready commerce intelligence

Shared State (V2+)

Frontend and agent share state via STATE_DELTA patches

Inventory Physics (V2+)

Real-time stock updates flow through shared state, enabling automatic layout adjustments

Client AI (V3+)

Optional WebLLM integration for offline-capable, privacy-preserving local inference

Version Overview

V1

Manual API

Key Features

One-shot generation
Direct API calls
Simple & fast

Try V1 Demo

V2

Agent-Native

Key Features

Shared state
Conversational refinement
Real-time sync

Try V2 Demo

V3

Edge Streaming

Key Features

Edge streaming
Sub-100ms cached
Optional client AI

Try V3 Demo

V4

Current

Real-World Intelligence

Key Features

Real-world trends
Tavily integration
Production-ready

Try V4 Demo

Detailed Version Deep-Dive

V1: Manual API

Traditional

One-shot generation with direct API calls

Architecture Pattern

User

Frontend

API

Response

Single request-response cycle

Characteristics

Direct fetch() to API endpoints
State managed locally with useState
One-shot generation (no refinement)
Static inventory snapshots

Limitations

Cannot refine results conversationally
No real-time inventory awareness
Frontend/agent state can drift
Limited context window utilization

When to Use

Choose V1 for simple, one-off generations where you don't need iterative refinement. Best for prototyping or when conversational features aren't required.

Try V1 Demo

V2: Agent-Native

CopilotKit + LangGraph

Shared state with conversational refinement

Architecture Pattern

User

SharedState

Agent

Bidirectional state synchronization

Characteristics

Shared state via useCoAgent
LangGraph StateGraph orchestration
"Spotify Loop" conversational refinement
Real-time inventory physics

Benefits

"Too expensive" → Agent responds in context
Stock changes propagate via STATE_DELTA
Single source of truth for UI and agent
Refinement history preserved

When to Use

Choose V2 for interactive, conversational experiences where users need to refine results iteratively. Best for production applications requiring real-time state synchronization and natural language refinement.

Try V2 Demo

V3: Edge-Native

Edge + Streaming

Sub-100ms cached responses with progressive rendering

Architecture Pattern

Edge Runtime

Redis Cache

Streaming

<100ms cached | Progressive render

Key Innovations

Edge streaming via Vercel Edge Functions
Redis caching with persona-aware TTL
Progressive component rendering
Optional client-side AI (WebLLM)

Benefits

Sub-100ms cached response times
See layout building live (progressive render)
Global edge distribution for low latency
Privacy-preserving local inference option

When to Use

Choose V3 for performance-critical applications requiring sub-100ms response times and global edge distribution. Best for production-scale commerce where latency directly impacts conversion.

Try V3 Demo

V4: Real-World Intelligence

Current

Live web intelligence + all V3 features

Architecture Pattern

Edge

Tavily

Trends

Real-world context enrichment

Key Innovations

All V3 features (edge streaming, caching)
Tavily trend enrichment for real-world context
Expert review integration for social proof
Trend-aware layout generation

Benefits

Layouts informed by real-world trends
Products show expert validation & social proof
Production-ready commerce platform
Demonstrates enterprise-grade agentic patterns

When to Use

Choose V4 for production commerce applications requiring real-world intelligence and trend awareness. Best for enterprise deployments where competitive intelligence and social proof drive conversion.

Try V4 Demo (Current)

Comprehensive Feature Comparison

Architecture
Feature	V1: Manual API	V2: Agent-Native	V3: Edge-Native	V4: Real-World Intel
State Management	Local (useState)	Shared State	Shared State	Shared State
Conversational Refinement
Streaming Responses
Edge Runtime
Caching Layer			Redis	Redis
Typical Latency	2-4s	3-6s	<100ms (cached)	<100ms (cached)
Real-Time Inventory	Static snapshots	Real-time physics	Real-time physics	Real-time physics
API Pattern	Request-Response	Bidirectional sync	Edge Streaming	Edge Streaming
Performance
Typical Latency	2-4s	3-6s	<100ms (cached)	<100ms (cached)
Caching Layer			Redis	Redis
Features
Real-World Intelligence
Trend Enrichment				Tavily Integration
Client-Side AI			Optional (WebLLM)	Optional (WebLLM)
Complexity	Low	Medium-High	High	Very High

Data Flow Comparison

V1:Request-Response

User clicks "Generate"

fetch('/api/generate-layout')

API calls OpenAI

Return JSON response

setState(response)

End - no refinement

V2:Shared State Loop

SharedState initialized

Agent generates layout

STATE_DELTA → UI updates

User: "too expensive"

Agent refines → STATE_DELTA

Loop continues...

Technology Stack

Shared Technologies

Next.js 15React 19TypeScriptTailwind CSSZod

V2 Only

CopilotKitLangGraphAG-UI ProtocolSharedState

Technical Details

Frequently Asked Questions

Choose V1 for simple prototyping without conversational features. V2 adds shared state and conversational refinement. V3 provides sub-100ms cached responses and edge streaming. V4 includes all previous features plus real-world intelligence via Tavily integration.

General

Explore Detailed Documentation

Dive deeper into each version's architecture, features, and implementation details

V1 Docs V2 Docs V3 Docs V4 Docs (Current)