快速接入

先看主来源和安装命令，再打开仓库或文档；下面只保留这个条目的关键接入事实。

命令预览

npx playwright test tests/visual-diff.spec.ts

详细介绍

MCP-UI电子商务游乐场

基于MCP的交互式电子商务演示，带有Next.js聊天主机和Express MCP服务器，可呈现12个标记化的HTML小部件。

建筑

web-client/：Next.js应用路由器用户界面(next dev --turbopack -p 3000).
mcp-server/：端口上的Express API+MCP桥接 8787.
mcp-server/widgets/：小部件源HTML。
mcp-server/src/widgets/：小部件TS逻辑+共享CSS。
mcp-server/dist/widgets/：构建单文件小部件工件。
mcp-server/tokens/：规范的Figma令牌CSS。
shared/catalog.mjs：产品目录数据。

技术栈

前端：Next.js 15，React 19，Tailwind v4， @mcp-ui/client.
服务器：Express 4， @modelcontextprotocol/sdk.
小部件构建：Vite+ vite-plugin-singlefile.
AI网桥：OpenRouter通过 web-client/app/api/chat (OPENROUTER_API_KEY).

快速开始

先决条件

Node.js 18+（建议使用Node 20+）
npm

安装

npm run install:all

运行（推荐）

npm run dev:clean

这将开始：

MCP/HTTP网桥位于 http://localhost:8787
Next.js web客户端位于 http://localhost:3000

在第二个终端中，验证这两种服务：

npm run dev:health

单独运行

1号航站楼：

cd mcp-server
npm run dev

2号航站楼：

cd web-client
npm run dev

构建

构建小部件+服务器工件：

npm --prefix mcp-server run build

构建前端：

npm --prefix web-client run build

环境

集 web-client/.env.local 从 web-client/.env.example:

OPENROUTER_API_KEY=sk-or-v1-your-key-here

对于MCP服务器，设置 mcp-server/.env 从 mcp-server/.env.example:

API_PORT=8787

可选（仅限传统路线： POST /api/openai/chat 在 mcp-server/src/openaiProxy.js):

OPENAI_API_KEY=your-openai-key
OPENAI_MODEL=gpt-4o-mini

没有 OPENROUTER_API_KEY, web-client 模特列表和聊天(/api/models, /api/chat)失败。

UI资源URI

小部件通过以下方式作为MCP UI资源提供 ui://ecommerce/*.html，包括：

ui://ecommerce/product-grid.html
ui://ecommerce/product-detail.html
ui://ecommerce/cart-view.html
ui://ecommerce/checkout-form.html
ui://ecommerce/order-confirmation.html

代币治理

规范令牌源是 mcp-server/tokens. Web客户端令牌文件位于 web-client/tokens 并且应该与规范源保持一致。

Figma→ 生产管道（CI/CD）

Figma中的设计令牌更改会自动同步到生产中。无需手动操作。

运作原理

Figma Publish → LIBRARY_PUBLISH webhook → Vercel endpoint → GitHub Actions → Production

设计师更改Figma中的变量（例如品牌颜色）
设计师点击发布 Figma图书馆管理员
Figma发送了一个 LIBRARY_PUBLISH webhook到Vercel端点
端点重复数据消除（30秒窗口）并分派到GitHub操作
工作流运行：拉取变量→ 规范化→ 生成CSS→ 同步令牌→ 重建小部件→ 提交和推送
Vercel自动从推送端部署

生产时间： 距离Figma Publish约2分钟路程。

关键文件

文件	目的
`web-client/app/api/figma-webhook/route.ts`	带去噪功能的Webhook接收器
`.github/workflows/figma-webhook-sync.yml`	完全同步工作流程
`scripts/figma-pull-variables.mjs`	从Figma API中提取变量
`scripts/figma-normalize-variables.mjs`	规范可变有效载荷
`scripts/figma-generate-tokens.mjs`	生成CSS令牌文件
`scripts/sync-tokens.mjs`	将令牌复制到web客户端
`mcp-server/tokens/figma-tokens-light.css`	生成的灯光主题代币

必需的秘密（GitHub操作）

FIGMA_ACCESS_TOKEN -Figma API个人访问令牌
FIGMA_FILE_KEY --Figma文件密钥（例如。 dbPjFeLfAFp8Sz9YGPs0CZ)
GH_PAT_TOKEN --GitHub PAT repo 范围（需要从按下触发Vercel）
VERCEL_DEPLOY_HOOK --Vercel部署挂钩URL

必需的环境变量（Vercel）

GITHUB_DISPATCH_TOKEN --GitHub PAT用于调度
GITHUB_REPO --例如。 Kari-Basavaraj/MCP-UI-DEMO-ECOMV2
FIGMA_FILE_KEY --与上述相同
FIGMA_WEBHOOK_SECRET --设置为空字符串（跳过密码检查）

测试

服务器测试套件：

npm --prefix mcp-server test

视觉奇偶校验套件：

npx playwright test tests/visual-diff.spec.ts

文档

目录标签

开发工具HTML浏览器自动化本地部署电商平台UI组件Next.jsExpressMCP协议前端开发

接入字段

传输方式（transport，传输协议）

stdio

鉴权方式（authType，认证方式）

none

运行时（runtime，运行环境）

Node.js

来源包（packageName，安装包名）

playwright

工具数量（toolCount，工具数）

0

资源数量（resourceCount，资源数）

0

提示词数量（promptCount，提示词数）

0

权限和风险

stdionone部署方式未说明

接入前请确认传输方式、认证方式和部署位置，并根据实际工具能力限制访问范围。

安装前确认

不要直接授予不必要的文件、网络或账号权限；先核对安装命令和配置内容。

来源信息

MCP World

mcpworld.com

/detail/19f663bc2d9bf01c8c516eb073099a51

基于MCP协议的交互式电商演示系统，提供Next.js聊天主机和Express MCP服务器，支持12种代币化HTML小部件渲染。

继续浏览同类 MCP

更多浏览器工具 MCP（2,803）返回 MCP 目录

上一个 MCP

MCP Twitter 2019f087

Twitter MCP Server是一个帮助用户通过编程方式管理Twitter账户的服务，提供时间线获取、用户推文搜索、私信管理等功能。

下一个 MCP

MCP Ui LLM Poc

一个基于AI驱动的端到端购物体验系统，使用MCP UI、OpenAI和Remote DOM渲染管道动态生成UI布局和产品结果，并在React应用中安全渲染。

MCP Ui Demo Ecomv2