MCP-UI E-commerce Playground

What it does

MCP-UI E-commerce Playground is a full-stack demo that shows how MCP UI resources (ui:// scheme) can render rich, interactive e-commerce widgets directly inside an AI chat interface. It pairs a Next.js chat host with an Express MCP server that serves 12 pre-built, design-token-driven HTML widgets — from product listings to checkout confirmation — letting you explore conversational shopping powered by AI.

Key features

• 12 interactive widgets served as MCP UI resources (ui://ecommerce/*.html): product grid, product detail, cart view, checkout form, order confirmation, and more
• Figma design system parity — design tokens are pulled directly from Figma variables and compiled into CSS; a CI/CD webhook pipeline (LIBRARY_PUBLISH → GitHub Actions → Vercel) keeps production in sync within ~2 minutes of a Figma publish
• OpenRouter AI bridge — the Next.js chat UI connects to any LLM via OpenRouter, enabling conversational product discovery and checkout flows
• Visual parity testing — Playwright-based visual diff suite validates widget appearance against Figma reference screenshots
• Token governance — canonical token source in mcp-server/tokens/, synced to web-client/tokens/ via script

Installation

Clone the repo and install all dependencies:

git clone https://github.com/Kari-Basavaraj/MCP-UI-DEMO-ECOMV2.git
cd MCP-UI-DEMO-ECOMV2
npm run install:all

Set your OpenRouter API key:

echo 'OPENROUTER_API_KEY=sk-or-v1-your-key-here' > web-client/.env.local

Start both services:

npm run dev:clean

• MCP/HTTP bridge: http://localhost:8787
• Next.js chat UI: http://localhost:3000

To use with Claude Desktop, add the MCP server to claude_desktop_config.json:

{
  "mcpServers": {
    "ecommerce": {
      "command": "node",
      "args": ["/path/to/MCP-UI-DEMO-ECOMV2/mcp-server/dist/index.js"]
    }
  }
}

Supported hosts

No specific MCP client is confirmed in the README. Designed to work with any MCP-capable client that supports ui:// resource rendering.