🚀 无边界组件MCP服务器
AI代码助手和UI组件生态系统之间的通用桥梁
 
✨ 为什么是无边界组件？
厌倦了你的AI助手生成通用HTML或花时间解释要安装哪些UI组件？ 无边界组件 通过提供一个集中的、智能的UI组件注册表，人工智能助手可以立即发现和使用，从而彻底改变了人工智能驱动的web开发。
当你要求你的人工智能“创建一个带有图表和表单的仪表板”，而不是通用的HTML时，它现在确切地知道要使用你最喜欢的UI库中的哪些组件——无论是Ant Design、Material UI、shadcn/UI还是任何其他框架。
🎯 我们解决的问题
在无边界组件之前：
User: "Create a admin dashboard with a data table and form"
AI: *Generates generic HTML and CSS*
User: "Can you use Material-UI components instead?"
AI: *Requires manual explanation of available components*
User: "Now switch to Ant Design"
AI: *Needs another context switch and component explanations*无边界组件之后：
User: "Create a admin dashboard with Material-UI components"
AI: *Instantly discovers and uses perfect Material-UI components*
User: "Great! Now recreate this with shadcn/ui"
AI: *Seamlessly switches to the best shadcn/ui components*🌟 主要特点
🔍 智能组件发现
- 智能搜索：组件名称、描述和元数据之间的模糊匹配
- 跨框架：支持React、Vue、Angular和vanilla JS组件
- 多注册表：同时搜索多个UI库
- 使用示例：每个组件的内置代码示例
🛠 开发者优先设计
- MCP协议：用于无缝AI通信的本地模型上下文协议集成
- RESTful API：用于传统应用程序的完整HTTP API
- PostgreSQL：具有TypeORM的强大数据库，可实现可靠的数据存储
- TypeScript：全类型安全和出色的开发人员体验
📦 可扩展注册系统
- 多个框架：React、Vue、Angular、Svelte等
- 热门图书馆：对Ant Design、Material UI、shadcn/UI、Element Plus等的预配置支持
- 自定义组件：轻松添加自己的组件库
- 版本管理：跟踪组件版本和弃用状态
🚀 生产就绪
- 性能优化：具有分页和缓存的高效查询
- 可扩展架构：专为高流量应用而设计
- 健康监测：内置健康检查和监控端点
- 轻松部署：Docker友好，设置说明清晰
🏗 架构概述
┌─────────────────┐ MCP 协议 ┌─────────────────┐
│ AI 助手 │ ◄─────────────► │ Borderless │
│ (Claude/GPT-4) │ │ Components │
│ │ │ 服务器 │
└─────────────────┘ │ │
│ │ │
│ HTTP API │ │
│ │ │
┌─────────────────┐ │ │
│ Web/App UI │ ◄──────────────►│ │
│ 仪表板 │ RESTful API │ │
└─────────────────┘ └─────────────────┘
│
▼
┌─────────────────┐
│ PostgreSQL │
│ 数据库 │
│ │
│ • 注册表 │
│ • 组件 │
│ • 示例 │
└─────────────────┘🚀 快速开始
安装
npm install borderless-components-mcp基本设置
- 克隆和设置
git clone https://github.com/your-org/borderless-components-mcp.git
cd borderless-components-mcp
npm install- 配置数据库
# Copy environment template
cp .env.example .env
# Edit your database configuration
# Default: postgresql://localhost:5432/borderless_components- 初始化数据库
npm run build
npm run seed:api # 填充示例注册表和组件- 启动服务器
npm run dev # Development mode
# or
npm start # Production mode- 添加到您的代码代理
就是这样！您的服务器现在运行在：
- HTTP API:
http://localhost:3000 - MCP端点:
http://localhost:3000/mcp
🔌 集成示例
人工智能辅助集成（MCP）
// Configure your AI assistant to use Borderless Components
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应用集成
// Search for components across all registries
const response = await fetch('http://localhost:3000/api/components?query=button&limit=10');
const components = await response.json();
// Search in specific registries
const antdButtons = await fetch('http://localhost:3000/api/components?registrySlug=antd&query=button');
const shadcnButtons = await fetch('http://localhost:3000/api/components?registrySlug=shadcn&query=button');📚 可用工具
🔎 发现工具
get_available_registries-列出所有可用的UI库get_available_ui_components_from_registries-从特定注册表获取组件search_items_in_registries-跨组件和注册表的智能搜索get_item_examples_from_registries-获取组件的使用示例
🌐 REST API端点
- 获取
/api/registries-浏览所有注册表 - 获取
/api/components-搜索和筛选组件 - 获取
/api/components/:id/examples-获取组件示例 - 发布
/api/registries-添加新注册表 - 发布
/api/components-添加新组件
🎨 用例
🤖 人工智能驱动开发
快速原型制作AI助手可以立即发现和使用适当的组件，将开发时间从数小时缩短到几分钟。
框架切换：在保持功能的同时轻松切换UI框架，非常适合设计系统探索。
代码生成：生成具有适当组件使用的生产就绪代码，包括依赖关系和安装命令。
👥 团队协作
组件治理：集中式注册表确保团队在各个项目中使用经过批准的一致组件。
知识共享：内置示例和文档加速了入职培训和知识转移。
版本管理：跟踪整个组织的组件版本、弃用和迁移路径。
🏢 企业集成
设计系统：与内部组件库和设计系统集成，以实现最大的一致性。
多项目管理：从单个界面管理多个项目和团队的组件使用情况。
分析与洞察：跟踪组件使用模式，为设计系统改进和培训需求提供信息。
🔧 配置
环境变量
# Server Configuration
HTTP_PORT=3000 # HTTP API port
MCP_PORT=3001 # MCP server port (optional)
# Database
DATABASE_URL="postgresql://user:password@localhost:5432/borderless_components"
# Development
NODE_ENV=development添加自定义注册表
// Add your custom component library
const customRegistry = {
name: "My Design System",
slug: "my-design-system",
framework: "react",
npmPackage: "@mycompany/design-system",
installCommand: "npm install @mycompany/design-system",
description: "Our company's design system components"
};
// POST to /api/registries
await fetch('http://localhost:3000/api/registries', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(customRegistry)
});🛣 路线图
🎯 即将推出的功能
- \[ \] 可视化组件资源管理器 -基于Web的组件浏览器
- \[ \] 组件依赖性分析 -自动依赖解析
- \[ \] 使用分析仪表板 -跟踪组件使用模式
- \[ \] GitHub集成 -与组件存储库自动同步
- \[ \] 组件测试套件 -自动组件验证
- \[ \] 主题支持 -每个组件有多个主题变体
- \[ \] 性能指标 -组件束大小和性能数据
🌟 未来愿景
- 基于人工智能的推荐：基于项目背景的智能组件建议
- 跨框架翻译：在React、Vue和Angular之间转换组件
- 社区注册：开源库公共组件注册表
- 设计系统生成器：根据组件使用情况自动生成设计系统
🤝 贡献
我们正在构建人工智能驱动开发的未来！我们欢迎各种形式的捐款：
- 🐛 错误报告 -帮助我们解决问题
- 💡 功能请求 -建议新功能
- 📖 文档 -改进指南和示例
- 🔧 代码贡献 -提交拉取请求
- 🎨 UI/UX -设计更好的界面
- 🧪 测试 -提高测试覆盖率
开发设置
# Fork and clone
git clone https://github.com/your-username/borderless-components-mcp.git
cd borderless-components-mcp
# Install dependencies
npm install
# Start development server
npm run dev
# Run tests
npm test
# Build for production
npm run build贡献指南
- 代码风格：遵循TypeScript和Prettier配置
- 测试：添加新功能和错误修复的测试
- 文档：更新README和API文档以了解更改
- 承诺：使用常规提交消息
- 公共关系：包括清晰的描述和测试说明
📄 许可证
此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。
🙏 致谢
- 模型上下文协议（MCP） -实现无缝的人工智能集成
- 类型ORM -优秀的TypeScript数据库ORM
- Express.js -为我们的API提供强大的web框架
- PostgreSQL -强大的关系数据库
- 所有贡献者 -令人惊叹的开发人员正在构建人工智能驱动开发的未来
📞 联系我们
- GitHub问题: 报告错误和请求功能
- 讨论: 加入我们的社区讨论
- 电子邮件: 联系我们的团队
- 微信群QRCode: wechat QR Code
______________________________________________________________________
⭐ 标记此回购 如果无边界组件可以帮助您使用AI更快地构建！
🚀 准备好彻底改变你的人工智能开发了吗？
由以下材料制成❤️ 来自Borderless团队的LHKong7