使用说明
一个完整的MCP UI客户端（React）+MCP UI服务器（Node.js）远程DOM渲染的工作示例。
该项目演示了使用MCP UI v5+构建的完整UI流程，其中服务器使用Remote DOM脚本动态生成UI，客户端使用自定义组件库在React中呈现它们。
它包括：
✨ 动态远程DOM渲染
🧱 自定义React组件库（按钮、输入、图表、表单等）
🧰 脚本配置器（创建、编辑和预览远程DOM脚本）
🛒 购物演示（产品→ cart → 结账→ 支付→ 成功→ 反馈→ 评论图表）
📊 PostgreSQL支持的动作日志
📡 完整客户端↔ 服务器工具调用流
cd客户端 npm 安装 npm 运行开发
CD服务器 npm 安装 npm 运行开发
| URL | 目的 |
|---|---|
| http://localhost:5173/ | 主UI资源渲染器 |
| http://localhost:5173/configurator | 远程DOM脚本编辑器+预览 |
| http://localhost:5173/actions | UI操作日志（来自数据库） |
🗄️ PostgreSQL设置
该项目存储：
✔ 远程DOM脚本
✔ UI操作
创建数据库mcp；
服务器/db/db.ts
导出const池=新池({ 用户：'postgres'， 主机：'localhost'， 数据库：'mcp_ui_demo'， 密码：'yourpassword'， 端口：5432， });
🎨 特性 ⭐ 1.远程DOM渲染
服务器发送基于JS的远程DOM脚本：
const按钮=document.createElement（'ui-button'）； button.setAttribute（标签、购买）；
客户端使用React自定义库动态呈现它们。
⭐ 2.自定义React组件库
位于客户端/src/radix.tsx
包括：
ui按钮
ui文本
ui文本小
ui数字输入（带小数、格式化、卡片分组）
ui复选框
ui图像
ui图表
ui反馈表
ui检查表
ui表单消息
⭐ 3.脚本配置器
地点：
👉 http://localhost:5173/configurator
你可以：
加载已保存的远程DOM脚本
实时编辑它们
预览用户界面
将更新的脚本保存到PostgreSQL
⭐ 4.完整的电子商务演示流程
产品预览
加入购物车→ 父渲染器更新
外壳中显示的购物车UI
结账→ 付款方式
付款成功屏幕
反馈表
评论如图表所示
每个屏幕=单独的远程DOM脚本。
⭐ 5.UI操作记录
所有通过工具调用触发的用户交互都存储在PostgreSQL中，并在以下位置查看：
👉 http://localhost:5173/actions
🔌 客户端↔ 服务器流 [UI呈现器]<--呈现--UI资源（远程DOM） | +--工具调用-->[服务器] | +--返回下一个UI资源
远程DOM从服务器端逻辑驱动整个UI。
🧪 开发流程 修改组件库
编辑：
客户端/src/radix.tsx
如果需要，重新启动客户端。
修改远程DOM脚本
使用配置器UI或手动更新数据库。
🔧 环境变量（可选）
在服务器中创建.env：
数据库url=postgres://postgres:password@localhost:5432/MCP用户界面演示 端口=8081
