Interactive Demo

Shop Agent — Demo Test Guide

Apr 10, 2026 AI Infrastructure / MLOps

This guide walks you through every feature of the ShopAgent demo. No technical knowledge is required. Just follow the steps and check that each one matches the "Expected" result. The demo runs in mock mode — no real payments are processed. All AI protocol calls are live against real agent services running on the demo server.

Demo
Access code ShopAgent2026
Session 45 min

What This Demo Shows

ShopAgent is an AI-powered e-commerce assistant that demonstrates all six AI agent communication protocols working together in a single real shopping flow.

Protocol Role in this demo
MCP — Model Context Protocol AI searches the product catalogue
A2A — Agent-to-Agent Recommender and inventory agents score and check stock
UCP — Universal Commerce Protocol Checkout session is created with line items and tax
AP2 — Agent Payment Protocol Payment mandate is signed and authorised
A2UI — Agent-to-UI Agent renders the product grid as a structured UI payload
AG-UI — Agent-Generated UI State streams live from the Python backend to the React frontend

 

Every protocol step is visible in the Protocol Activity panel on the left — you can click any row to inspect the raw JSON payload.

Login

Authenticate with the demo access code

  1. Open https://shop-agent.agilecreativeminds.nl in your browser.
  2. You are redirected to the login page automatically.
  3. Enter ShopAgent2026 in the Demo access code field.
  4. Click Enter demo.
Expected Result
  • You are taken to the main ShopAgent interface.
  • The header shows the ShopAgent logo, the protocol badge strip (MCP · A2A · UCP · AP2 · A2UI · AG-UI), a Sign out link, and a purple ⚡ DEMO badge.
  • The left panel shows an empty Cart.
  • The right panel shows the Chat sidebar with the prompt: "Show me running shoes under $100".
  • The centre column is empty — it fills once you search.
Wrong access code
  • The form shows "Incorrect access code. Please try again." in red.
  • Request a new code via the contact form — mention ShopAgent demo in your message.

The Interface — Three Panels

Understand the layout before you start

The main page has three columns:

  • Left — Cart + Protocol Activity: Shows cart items, subtotal, and (in Demo mode) a live trace of every AI protocol call.
  • Centre — Product Display: Renders product cards, the checkout form, or comparison tables — all driven by the AI agent.
  • Right — Chat: Your conversation with the shopping assistant.
Demo Mode vs Customer View

Click the ⚡ DEMO badge in the top-right corner (or press Ctrl+Shift+D on Windows/Linux, Cmd+Shift+D on Mac) to toggle between two views:

  • ⚡ DEMO — shows the Protocol Activity panel and protocol-level step labels. Intended for technical audiences.
  • 🛍️ CUSTOMER VIEW — hides the Protocol Activity panel and shows only shopper-friendly copy. This is how the app would look in a real deployment.

Toggle back to DEMO mode to follow the rest of this guide.

Add to Cart

Add a product via the UI or the chat

Via the product card

  1. Click Add to Cart on the Nike Air Zoom Pegasus 41 card.
Expected Result
  • The Cart panel on the left updates immediately:
    • Thumbnail, name, price, and a quantity control (− 1 +) appear.
    • Subtotal shows $89.99.
  • The chat confirms the item was added.

Via the chat

  1. Type in the chat:

    Add the Saucony Kinvara to my cart

  2. Press Enter.
Expected Result
  • The Saucony Kinvara 14 ($99.99) appears in the cart.
  • Subtotal updates to $189.98.
  • The chat confirms the addition.

Adjust quantity

  1. Click the + button next to any cart item to increase the quantity.
  2. Click − to decrease. Clicking − on quantity 1 removes the item.

Checkout — UCP + AP2

Complete the purchase through the AI agent

  1. With at least one item in your cart, type in the chat:

    I'm ready to checkout

  2. Press Enter.
Expected Result — Centre column

A Complete Your Order form appears showing:

  • Order line items with quantities
  • Subtotal, Tax (0.00 in demo mode), and Total
  • A Shipping Address form with fields for Full Name, Street, City, State, and ZIP
  • Fill in any address, for example:
    • Full Name: Jane Smith
    • Street: 123 Main St
    • City: Amsterdam
    • State: NH
    • ZIP: 1234AB
  • Click Review My Order.
Expected Result
  • The form collapses and a confirmation summary appears.
  • A Confirm Order button appears.
Expected Result — Order confirmation
  • Click Confirm Order.
  • The centre column shows a large ✅ with:
    • Order Confirmed
    • Order ID (e.g. ORD-abc123)
    • Total amount and currency
  • The cart empties and shows a compact order summary: items ordered, total paid.
  • A new UCP and AP2 row appears in the Protocol Activity panel:
    • UCP · Checkout session · Session created with line items
    • AP2 · Payment mandate · Mandate signed and authorised

Click the AP2 row to inspect the signed payment mandate JSON — this shows the intent→cart→payment chain that AP2 enforces.

Product Comparison — A2UI

Ask the agent to compare products side-by-side

  1. Start a new search. Type:

    Show me trail running shoes

  2. Once the cards appear, type:

    Compare these products

Expected Result
  • The product card grid is replaced by a comparison table.
  • Rows show: Price, Rating, In Stock, Delivery, and Why Recommended.
  • Columns are the products.
  • This demonstrates the A2UI protocol returning a comparison_table component type instead of a product grid — the frontend switches rendering mode automatically based on the payload type.

Protocol Activity — Payload Inspector

Inspect every AI protocol call

The Protocol Activity panel is the developer-facing window into what the agent is doing.

  1. After any search or action, look at the Protocol Activity panel on the left.
  2. Click any row — for example A2A · Inventory.
Expected Result
  • The row expands to show a formatted JSON block.
  • For Inventory you will see fields like checked, all_in_stock, and per-product delivery estimates.
  • For MCP you will see products_fetched, category, and query.
  • For UCP you will see session_id and total.

This payload inspector makes it easy to demonstrate to a technical audience exactly what data flows between each agent layer.

Customer View Mode

Show the demo as a shopper would see it

  1. Click the ⚡ DEMO badge (or press Ctrl+Shift+D) to switch to 🛍️ CUSTOMER VIEW.
Expected Result
  • The Protocol Activity panel disappears entirely.
  • Step labels in the loading indicator change to friendly copy:
    • "Finding products for you…" instead of "Searching catalog via MCP…"
    • "Preparing your checkout…" instead of "Creating checkout session via UCP…"
  • The protocol badge strip in the header is hidden.
  • The shopping flow works identically — only the developer-facing UI elements are hidden.

Toggle back to ⚡ DEMO at any time.

Sign Out

  1. Click Sign out in the top-right corner.
Expected Result
  • You are redirected to the login page immediately.
  • The session cookie is cleared — refreshing the page keeps you on /login.

Session Expiry

Sessions last 45 minutes from login. If your session expires mid-demo, you will be redirected to the login page automatically. Enter the access code again to continue — your conversation does not persist across sessions (each session starts a fresh agent thread by design).

Quick Reference — What Each Protocol Does

MCP
MCP — Model Context Protocol

The orchestrator calls the MCP catalogue server to search and filter products by keyword, category, and price. Returns raw product records.

A2A — Agent-to-Agent (Recommender)

A separate recommender agent scores each product against the user's stated preferences (price, use case, brand hints) and returns a ranked list with recommendation reasons.

A2A — Agent-to-Agent (Inventory)

A second inventory agent checks real-time stock levels and calls a shipping estimator to return a per-product delivery window.

UCP — Universal Commerce Protocol

Creates a structured checkout session: validates the cart, applies tax rules, and returns a session ID and order summary for the customer to review and confirm.

AP2 — Agent Payment Protocol

Issues a signed payment mandate that links the user intent → cart items → payment authorisation in a verifiable chain. Prevents the agent from charging for items the user never agreed to.

A2UI — Agent-to-UI

The orchestrator builds a structured UI payload (product_grid or comparison_table) and streams it to the frontend. The frontend renders the appropriate component based on the type field — no hardcoded UI logic needed.

AG-UI — Agent-Generated UI

All agent state (cart, products, checkout session, errors) is streamed in real time from the Python/LangGraph backend to the React frontend via Server-Sent Events. The UI updates live as the agent runs — no polling, no page reloads.

Impressed by what six protocols can do together?

Let's Build Your AI-Powered Commerce Experience

Custom AI agents, protocol-layer orchestration, and production-grade e-commerce flows — built the right way from day one.