V2 Architecture•Agent-Native

SIX V2

The next evolution of generative commerce: shared state between frontend and AI agent, conversational refinement, and real-time inventory awareness.

What's New in V2

V2 fundamentally changes how the frontend and AI agent interact. Instead of one-shot API calls, they now share a synchronized state object, enabling conversational refinement and real-time updates.

V1: Manual API

Request → Response

• Direct fetch() calls to API
• One-shot generation
• No refinement capability
• Static inventory snapshots

V2: Agent-Native

Shared State Loop

• Bidirectional state sync
• Conversational refinement
• "Spotify Loop" pattern
• Real-time inventory physics

Key Concepts

Shared State

Frontend and agent share the same state object. Changes propagate viaSTATE_SNAPSHOT (full sync) andSTATE_DELTA (incremental JSON Patch).

Learn more

Spotify Loop

Conversational refinement pattern. Say "too expensive" or "more casual" and the agent refines the layout while preserving your preferences.

Learn more

Inventory Physics

Real-time stock awareness. When products go out of stock, the agent automatically finds replacements and updates the layout.

Learn more

Technology Stack

Component	Technology	Role
State Management	`CopilotKit`	useCoAgent hook for shared state
Agent Orchestration	`LangGraph`	StateGraph for agent workflow
Protocol	`AG-UI`	STATE_SNAPSHOT & STATE_DELTA events
AI Model	`GPT-4o`	Layout generation and refinement
Framework	`Next.js 15`	App Router, Server Components

Architecture Overview

┌─────────────────────────────────────────────────────────────┐
│                      Frontend (Next.js)                      │
│  ┌─────────────────────────────────────────────────────────┐ │
│  │  MerchandiserProvider (React Context)                    │ │
│  │    ├── SharedState                                       │ │
│  │    ├── generateLayout()                                  │ │
│  │    └── refineLayout(critique)                            │ │
│  └─────────────────────────────────────────────────────────┘ │
│                              ↕                               │
│                     /api/copilotkit                          │
└─────────────────────────────────────────────────────────────┘
                              ↕
┌─────────────────────────────────────────────────────────────┐
│                  Merchandiser Agent (LangGraph)              │
│  ┌─────────────────────────────────────────────────────────┐ │
│  │  StateGraph                                              │ │
│  │    ├── loadInventoryNode                                 │ │
│  │    ├── generateLayoutNode                                │ │
│  │    ├── refineLayoutNode                                  │ │
│  │    └── handleStockUpdateNode                             │ │
│  └─────────────────────────────────────────────────────────┘ │
│                              ↓                               │
│                         GPT-4o                               │
└─────────────────────────────────────────────────────────────┘

Get Started

Try V2 Demo

Experience Agent-Native shopping

Architecture Deep Dive

Explore the technical design

Looking for V1 Documentation?

The original Manual API architecture is preserved at /docs/v1

V1 Docs →