🚀 无边界组件 MCP 服务器

连接 AI 代码助手与 UI 组件生态系统的通用桥梁

English | 中文

✨ 为什么选择无边界组件？

厌倦了你的 AI 助手生成通用的 HTML，或者花费时间解释需要安装哪些 UI 组件？无边界组件通过提供一个集中的智能 UI 组件注册表来革新 AI 驱动的 Web 开发，这些组件可以被 AI 助手即时发现并使用。

当你让 AI 创建一个带有图表和表单的仪表盘时，它现在知道确切地从你喜欢的 UI 库中使用哪些组件——无论是 Ant Design、Material-UI、shadcn/ui 还是其他框架。

🎯 我们解决的问题

在无边界组件之前：

用户："创建一个带有数据表格和表单的管理员仪表盘"
AI：*生成通用的 HTML 和 CSS*
用户："你能使用 Material-UI 组件吗？"
AI：*需要手动解释可用的组件*
用户："现在切换到 Ant Design"
AI：*需要另一个上下文切换和组件解释*

在无边界组件之后：

用户："创建一个带有 Material-UI 组件的管理员仪表盘"
AI：*立即发现并使用完美的 Material-UI 组件*
用户："很好！现在用 shadcn/ui 重新创建这个"
AI：*无缝切换到最佳的 shadcn/ui 组件*

🌟 核心特性

🔍 智能组件发现

• 智能搜索：跨组件名称、描述和元数据进行模糊匹配
• 跨框架支持：支持 React、Vue、Angular 和纯 JS 组件
• 多注册表：同时搜索多个 UI 库
• 使用示例：每个组件都内置代码示例

🛠 面向开发者的设计理念

• MCP 协议：原生集成 Model Context Protocol，实现无缝的 AI 通信
• RESTful API：完整的 HTTP API 供传统应用使用
• PostgreSQL：使用 TypeORM 的强大数据库，确保可靠的数据存储
• TypeScript：全类型安全和优秀的开发者体验

📦 可扩展的注册表系统

• 多种框架：React、Vue、Angular、Svelte 等
• 流行库：预配置支持 Ant Design、Material-UI、shadcn/ui、Element Plus 等
• 自定义组件：轻松添加自己的组件库
• 版本管理：跟踪组件版本和弃用状态

🚀 生产就绪

• 性能优化：高效的查询，带分页和缓存
• 可扩展架构：设计用于高流量应用
• 健康监控：内置健康检查和监控端点
• 易于部署：Docker 友好，有清晰的设置说明

🏗 架构概述

┌─────────────────┐    MCP 协议      ┌─────────────────┐
│   AI 助手       │ ◄─────────────► │  无边界组件     │
│  (Claude/GPT-4) │                 │    服务器       │
│                 │                 │                 │
└─────────────────┘                 │                 │
         │                           │                 │
         │ HTTP API                  │                 │
         │                           │                 │
┌─────────────────┐                 │                 │
│   Web/App UI    │ ◄──────────────►│                 │
│    仪表板        │    RESTful API  │                 │
└─────────────────┘                 └─────────────────┘
                                            │
                                            ▼
                                  ┌─────────────────┐
                                  │   PostgreSQL    │
                                  │     数据库       │
                                  │                 │
                                  │ • 注册表         │
                                  │ • 组件           │
                                  │ • 示例          │
                                  └─────────────────┘

🚀 快速开始

安装

npm install borderless-components-mcp

基本设置

1. 克隆并设置

git clone https://github.com/your-org/borderless-components-mcp.git
cd borderless-components-mcp
npm install

2. 配置数据库

# 复制环境模板
cp .env.example .env

# 编辑你的数据库配置
# 默认：postgresql://localhost:5432/borderless_components

3. 初始化数据库

npm run build
npm run seed:api  # 填充示例注册表和组件

4. 启动服务器

npm run dev  # 开发模式
# 或
npm start    # 生产模式

5. 添加到你的代码代理

就这样！你的服务器现在运行在：

• HTTP API：http://localhost:3000
• MCP 端点：http://localhost:3000/mcp

🔌 集成示例

AI 助手集成 (MCP)

// 配置你的 AI 助手以使用无边界组件
const mcpConfig = {
  name: "borderless-components",
  endpoint: "http://localhost:3000/mcp",
  tools: [
    "get_available_registries",
    "get_available_ui_components_from_registries",
    "search_items_in_registries",
    "get_item_examples_from_registries"
  ]
};

Web 应用集成

// 在所有注册表中搜索组件
const response = await fetch('http://localhost:3000/api/components?query=button&limit=10');
const components = await response.json();

// 在特定注册表中搜索
const antdButtons = await fetch('http://localhost:3[...]