MCP-UI E-commerce Playground

Ce qu'il fait

MCP-UI E-commerce Playground est une démo full-stack qui montre comment les ressources MCP UI (schéma ui://) peuvent rendre des widgets e-commerce riches et interactifs directement à l'intérieur d'une interface de chat IA. Il associe un hôte de chat Next.js à un serveur MCP Express qui fournit 12 widgets HTML pré-construits et basés sur des jetons de design — des listes de produits à la confirmation de paiement — vous permettant d'explorer le shopping conversationnel propulsé par l'IA.

Fonctionnalités clés

• 12 widgets interactifs servis comme ressources MCP UI (ui://ecommerce/*.html) : grille de produits, détail produit, vue panier, formulaire de paiement, confirmation de commande, et plus
• Parité avec le système de design Figma — les jetons de design sont extraits directement des variables Figma et compilés en CSS ; un pipeline de webhook CI/CD (LIBRARY_PUBLISH → GitHub Actions → Vercel) maintient la production synchronisée dans les ~2 minutes suivant une publication Figma
• Pont IA OpenRouter — l'interface de chat Next.js se connecte à n'importe quel LLM via OpenRouter, permettant la découverte de produits et les flux de paiement conversationnels
• Tests de parité visuelle — une suite de diffs visuels basée sur Playwright valide l'apparence des widgets par rapport aux captures d'écran de référence Figma
• Gouvernance des jetons — source canonique des jetons dans mcp-server/tokens/, synchronisée avec web-client/tokens/ via un script

Installation

Clonez le dépôt et installez toutes les dépendances :

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

Définissez votre clé API OpenRouter :

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

Démarrez les deux services :

npm run dev:clean

• Pont MCP/HTTP : http://localhost:8787
• Interface de chat Next.js : http://localhost:3000

Pour utiliser avec Claude Desktop, ajoutez le serveur MCP à claude_desktop_config.json :

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

Hôtes supportés

Aucun client MCP spécifique n'est confirmé dans le README. Conçu pour fonctionner avec tout client compatible MCP supportant le rendu des ressources ui://.