关键词

UI组件生成UI组件库React组件代码生成智能UI

使用说明

项目简介

SupaUI MCP Server 是一个基于 Model Context Protocol (MCP) 构建的后端服务，旨在为 AI 智能体提供 UI 组件的生成、获取和管理能力。通过自然语言交互，AI 智能体可以利用此服务轻松创建和检索用户界面组件，加速 UI 开发流程。

主要功能点

  • UI 组件生成: 根据自然语言描述，生成 React UI 组件代码。
  • UI 组件获取: 从 buouui.com 平台搜索并获取现有的 UI 组件。
  • UI 组件列表: 浏览可用的 UI 组件，并查看详细预览。
  • 工具集成: 通过 MCP 协议将 UI 组件生成和管理功能集成到 LLM 应用中，使 LLM 具备调用工具的能力。

安装步骤

  1. 确保已安装 Node.js (最新 LTS 版本) 和 pnpm 包管理器。
  2. 克隆仓库到本地。
  3. 在项目根目录下运行 'pnpm install' 安装依赖。
  4. 运行 'pnpm build' 构建项目。

服务器配置

MCP 客户端需要配置以下 JSON 信息以连接 SupaUI MCP Server：

{
  "serverName": "supaui-mcp",  // MCP 服务器名称，必须与服务器代码中定义的名称 "supaui-mcp" 一致
  "command": "pnpm",         // 启动服务器的命令，这里使用 pnpm 包管理器
  "args": ["start"]          // 启动命令的参数， "start" 对应 package.json 中的启动脚本
}

基本使用方法

  1. 配置 API 密钥: 从 buouui.com 获取 'BUOU_API_KEY'，并将其设置为环境变量 'BUOU_API_KEY'。例如，在终端中执行 'export BUOU_API_KEY=your_api_key_here'。
  2. 启动服务器: 在项目根目录下运行 'pnpm start' 命令启动 SupaUI MCP Server。
  3. 客户端交互: 在 MCP 客户端中，可以使用以下命令与服务器交互，让 AI 智能体调用相关工具：
    • '/ui create a basic button'： 请求服务器生成一个基础按钮组件。
    • '/ui fetch modern login form'： 请求服务器从 buouui.com 获取一个现代登录表单组件。
    • '/buou list cards'： 请求服务器列出卡片组件。

信息

分类

开发者工具

访问项目