SupaUI MCP Server
2025.03.29
3
TypeScriptUI 组件生成UI 组件管理开发效率
SupaUI MCP Server 是一个基于模型上下文协议（MCP）的服务，专为 SupaUI 设计，允许 AI 代理通过自然语言交互生成、获取和管理 UI 组件。该服务支持生成 React 组件、从 buouui.com 搜索和检索组件、浏览可用组件并提供详细预览，同时内置 TypeScript 支持以提供更好的类型安全和开发者体验。
View on GitHub
Overview
基本能力
产品定位
SupaUI MCP Server 是一个用于生成和管理 UI 组件的服务，通过自然语言交互实现 UI 组件的快速创建和检索。
核心功能
- 生成 UI 组件：根据自然语言描述生成 React 组件。
- 获取 UI 组件：从 buouui.com 搜索和检索现有组件。
- 浏览 UI 组件：列出可用组件并提供详细预览。
- TypeScript 支持：内置 TypeScript 支持，提升类型安全和开发者体验。
适用场景
- 快速生成 UI 组件，提升开发效率。
- 从现有组件库中检索和复用组件。
- 浏览和预览 UI 组件库中的可用组件。
工具列表
- CreateUiTool：根据自然语言描述生成新 UI 组件，端点
/api/create。 - FetchUiTool：从 buouui.com 检索现有组件，端点
/api/fetch。 - ListUiTool：列出可用组件并提供预览，端点
/api/list。
常见问题解答
- 如何获取 API 密钥？：从 buouui.com 获取 BUOU_API_KEY。
- 如何配置环境变量？：通过
export BUOU_API_KEY=your_api_key_here或在配置文件中设置。
使用教程
使用依赖
- Node.js（最新 LTS 版本）
- BUOU_API_KEY：从 buouui.com 获取
安装教程
# 安装依赖
pnpm install
# 构建项目
pnpm build
配置
- 设置环境变量：
export BUOU_API_KEY=your_api_key_here
- 或根据 smithery.yaml 要求创建配置文件。
启动服务器
pnpm start
可用命令
- 创建 UI 组件：
/ui create a basic button
- 获取 UI 组件：
/ui fetch modern login form
- 列出 UI 组件：
/buou list cards
调试方式
# 监视模式构建
tsc -w
# 运行测试
pnpm test