Generative UI MCP

这是一个供 AI Agent 使用的 MCP（Model Context Protocol）工具，用于实现生成式 UI (Generative UI)。 该 MCP 提供了一套风格统一、基于 Tailwind CSS 的 UI 组件库，Agent 可以调用这些组件以 JSON 格式自由组合出动态的页面，并将其渲染为高质量的 HTML 界面返回给用户。

🌟 特性

• 组件丰富：提供了 Page、Container、Card、Flex、Grid、Text、Button、Input、Image、Badge、Divider 等核心组件。
• 现代化设计：默认内置 Light/Dark 模式支持，自带响应式布局、平滑阴影和微交互效果。
• 动态组装：通过易于理解的 JSON DSL 结构，让大语言模型（LLM）更容易输出稳定和结构化的用户界面。
• 多语言支持 (i18n) 友好：Agent 只要将包含多语言（中英双语 zh-cn, en-us 等）对应文案的内容传递给 children 即可生成对应语言层面的 UI UI。

🛠️ 提供的 Tools (工具)

MCP Server 对外暴露了如下工具供 Agent 调度：

1. get_component_library:
   • 返回当前系统支持的所有 UI 组件及其可接受的结构与属性配置 (Props)。Agent 在不知如何构建界面时，可先调用此工具获取文档。
2. render_ui:
   • 接收一段 JSON 格式的 UI 描述树 (DSL)，将其编译转化成带有完整样式和外联依赖的 HTML 字符串代码。Agent 可直接将此 HTML 展示给用户。

🚀 如何运行

确保已安装 Node.js (v18+)

# 1. 安装依赖
npm install

# 2. 编译 TypeScript 代码
npm run build

# 3. 启动 MCP Server (通过 stdio 协议)
npm start

📝 Agent 使用示例

当用户问道：“帮我生成一个包含登录表单的卡片”，Agent 可以组合出以下的 JSON 并传入 render_ui 工具：

{
  "ui": {
    "type": "Page",
    "children": [
      {
        "type": "Container",
        "props": { "size": "sm", "className": "pt-20" },
        "children": [
          {
            "type": "Card",
            "props": { "padding": "lg" },
            "children": [
              { "type": "Text", "props": { "variant": "h2", "align": "center", "className": "mb-4" }, "children": ["登录系统"] },
              { "type": "Flex", "props": { "direction": "column", "gap": "md" }, "children": [
                { "type": "Input", "props": { "placeholder": "账号 (Email)", "type": "email" } },
                { "type": "Input", "props": { "placeholder": "密码 (Password)", "type": "password" } },
                { "type": "Button", "props": { "variant": "primary", "size": "lg" }, "children": ["立即登录"] }
              ]}
            ]
          }
        ]
      }
    ]
  }
}

由于配置了 Tailwind CSS 依赖库该 HTML 代码可以在任意 Sandbox 或是 Webview 环境中直接预览。