Experimental A2UI POC for Shopware Frontends

This repository is an experimental proof of concept that connects a LangGraph agent to a Nuxt 3 app using Shopware Frontends and the A2UI v0.8 protocol. It enables the storefront flow from product discovery to checkout. The agent produces A2UI JSONL layouts for product pages, the browser renders them live, and the backend can optionally compile them into Vue SFCs.

Demo

What this POC demonstrates

• A2UI JSONL streaming from an agent to a browser chat UI.
• Live preview rendering of A2UI layouts in Nuxt.
• Optional codegen into Vue SFCs for Shopware Frontends storefront usage.
• A small component catalog for commerce surfaces.

Project structure

• packages/a2ui-core: A2UI schema validation, JSONL protocol helpers, AST parsing, renderer helpers, and codegen.
• apps/nuxt-poc: Nuxt 3 app with chat UI, live preview, and server routes.
• docs/protocol-commerce-example.md: Canonical commerce JSONL example used by prompts and tests.

How it works (high level)

1. The user sends a prompt in the Nuxt UI.
2. The server runs the LangGraph agent and streams A2UI JSONL events to the client.
3. The client assembles a layout, validates it, and renders a live preview.
4. (Optional) The user triggers codegen and the server writes a Vue SFC to apps/nuxt-poc/generated-layouts/.

Quick start

1. Install dependencies:

pnpm install

2. Configure Shopware Admin credentials (or set PRODUCT_ID for offline testing):

export SHOPWARE_ADMIN_ENDPOINT="https://my-shopware.example/api"
export SHOPWARE_ADMIN_CLIENT_ID="administration"
export SHOPWARE_ADMIN_CLIENT_SECRET="administration"
export PRODUCT_ID="example-product-id"

3. Configure the Shopware Storefront endpoint and access token (required for client-side storefront calls):

export NUXT_PUBLIC_SHOPWARE_ENDPOINT="https://my-shopware.example/store-api"
export NUXT_PUBLIC_SHOPWARE_ACCESS_TOKEN="your-storefront-access-token"

4. Run the Nuxt POC:

cd apps/nuxt-poc
pnpm dev

4. Open the UI, send a prompt to generate a PDP layout, and watch the preview update.

Model configuration

The agent uses OpenAI-compatible chat APIs via the following environment variables:

• MODEL_PROVIDER: ollama, openai, or openrouter (defaults to ollama)
• MODEL_NAME: model identifier (for example, gpt-4o-mini or google/gemini-3-flash-preview)
• MODEL_BASE_URL: optional base URL for the OpenAI-compatible API (for example, http://localhost:11434/v1)
• MODEL_API_KEY: API key if the endpoint requires auth

Examples:

# Local Ollama (OpenAI-compatible endpoint)
export MODEL_PROVIDER=ollama
export MODEL_NAME=ministral-3:8b
export MODEL_BASE_URL=http://localhost:11434/v1

# OpenRouter
export MODEL_PROVIDER=openrouter
export MODEL_NAME=google/gemini-3-flash-preview
export MODEL_BASE_URL=https://openrouter.ai/api/v1
export MODEL_API_KEY=...

# Hosted OpenAI-compatible provider
export MODEL_PROVIDER=openai
export MODEL_NAME=gpt-4o-mini
export MODEL_BASE_URL=https://your-openai-compatible-host/v1
export MODEL_API_KEY=...

Shopware data usage

• The agent pipeline fetches product and category IDs from the Shopware Admin API.
• The agent is constrained to emit only allowed component names and props.
• The core applyProductId helper ensures required productId props are present on PDP components before rendering or codegen.

A2UI notes

• A2UI is a JSONL-based protocol for streaming UI descriptions from an agent to a client.
• This POC uses surfaceUpdate, dataModelUpdate, beginRendering, and deleteSurface messages.
• Layouts are assembled from adjacency-list components and validated before render or codegen.