爱的统一MCP服务器

托管在Railway上的集中式模型上下文协议（MCP）服务器，将多个MCP提供商组合在一个地方。包含 魔术UI, Shadcn用户界面, 醋酸UI, 8比特币, 品牌体系（设计API）, AI路由器，以及 自定义组件 -易于扩展以添加更多！

🎯 目的

这是一个 统一MCP服务器 它托管多个MCP提供者，为您提供一个端点来访问所有组件库、设计令牌和AI工具。非常适合您希望持续访问以下内容的可爱开发：

零部件库：魔术UI（68），Shadcn UI（59），Aceternity UI（96），8bitcn（55）- 278个组件
设计系统API：完整的品牌系统，包括设计标志、主题和验证
人工智能操作：通过n8n webhooks解耦AI路由器
自定义组件：您自己的组件库

为什么统一？

单个连接：连接一次Lovable，访问您的所有MCP服务器
易于管理：所有MCP服务器都在一个代码库中
可扩展：通过模块化架构轻松添加新的MCP提供商
始终可用：铁路全天候运行

🚀 快速开始

本地开发

安装依赖项：

npm install

启动服务器：

npm start

服务器将在上运行 http://localhost:4001 （或中指定的端口 PORT 环境变量）。

部署到铁路

将您的GitHub存储库连接到Railway：

- 首选 Railway.app - 点击“新建项目” - 选择“从GitHub仓库部署” - 选择此存储库

铁路将自动：

- 检测Node.js项目 - 安装依赖项 - 使用启动服务器 npm start - 分配公共URL

获取您的服务器URL:

- 铁路将提供公共URL（例如。， https://your-app.railway.app) - 复制此URL以连接到Lovable

🔌 连接到可爱

逐步配置

获取您的铁路服务器URL

- 您的网址： https://design-api-mcp-production.up.railway.app

在Lovable中，转到MCP/外部服务：

- 导航到您的可爱项目 - 首选设置 → MCP服务器 或 外部服务 - 点击 添加MCP服务器 或 添加外部服务

填写连接详细信息：

基本设置：

- 服务器名称: Design API MCP Server （或您喜欢的任何名称） - 服务器URL: https://design-api-mcp-production.up.railway.app - 连接类型：选择 HTTP 或 MCP

MCP端点 （如果单独提示）：

- 初始化: /mcp/initialize - 列出工具: /mcp/tools/list - 呼叫工具: /mcp/tools/call - 列出资源: /mcp/resources/list - 读取资源: /mcp/resources/read

OAuth2设置 （如果需要）：

- OAuth客户端ID: lovable-client （或任何值-我们的服务器接受任何值） - OAuth客户端密码: lovable-secret （或任何值-我们的服务器接受任何值） - 授权URL: https://design-api-mcp-production.up.railway.app/oauth2/authorize - 令牌URL: https://design-api-mcp-production.up.railway.app/oauth2/token - 范围: mcp:read mcp:write （或留空）

保存和测试：

- 点击保存或连接 - Lovable现在应该连接到您的MCP服务器 - 您应该看到所有35个可用工具

快速测试

手动测试连接：

# Health check
curl https://design-api-mcp-production.up.railway.app/health

# Should return: {"status":"ok","service":"mcp-server"}

故障排除

如果您仍然收到OAuth错误：

等待2-3分钟 铁路重新部署后
检查铁路日志 确保服务器正在运行
尝试发现端点: https://design-api-mcp-production.up.railway.app/.well-known/oauth-authorization-server
验证端点 可访问（无404错误）

📡 API终点

MCP协议端点

POST /mcp/initialize -初始化MCP连接
POST /mcp/tools/list -列出可用工具
POST /mcp/tools/call -执行工具
POST /mcp/resources/list -列出可用资源
POST /mcp/resources/read -阅读特定资源

公用设施端点

GET /health -健康检查端点
GET / -服务器信息

🛠️ 可用工具

组件库工具

魔术UI（68个组件）

magicui_get_component -按名称获取组件
magicui_list_components -列出所有组件（按类别筛选）
magicui_search_components -按关键字搜索组件
magicui_get_component_context -获取详细的上下文、用例和示例

Shadcn用户界面（59个组件）

shadcn_get_component -按名称获取组件
shadcn_list_components -列出所有组件（按类别筛选）
shadcn_search_components -按关键字搜索组件
shadcn_get_component_code -获取完整源代码
shadcn_get_installation_command -获取CLI安装命令
shadcn_get_component_context -获取详细的上下文、用例和示例

醋酸UI（96种成分）

aceternity_get_component -按名称获取组件
aceternity_list_components -列出所有组件
aceternity_search_components -按关键字搜索组件
aceternity_get_component_context -获取详细的上下文、用例和示例

8位（55个组件）

eightbit_get_component -按名称获取组件
eightbit_list_components -列出所有组件
eightbit_search_components -按关键字搜索组件
eightbit_get_component_context -获取详细的上下文、用例和示例

品牌体系（设计API）工具

品牌系统提供了一个完整的设计系统API 嵌套属性访问, 验证，以及 有用的错误消息.

颜色工具

brand_get_color -获取颜色值（支持嵌套： "primary.500" 或简单： "success")

- 参数: colorName （字符串）， theme （可选，默认：“默认”） - 示例: "primary.500", "secondary.600", "success" - 特性：嵌套访问、验证、错误建议

brand_list_colors -列出主题的所有可用颜色

- 参数: theme （可选）

间距工具

brand_get_spacing -获取间距值（支持 scale.4 或 semantic.md)

- 参数: size （字符串）， theme （可选） - 特性：检查规模、语义和直接访问

brand_list_spacing -列出所有间距值

排版工具

brand_get_typography -获取排版值（支持嵌套： "fontSizes.base")

- 参数: property （字符串）， theme （可选） - 示例: "fontSizes.base", "fontFamilies.sans", "fontWeights.bold" - 特性：嵌套访问、验证

brand_list_typography -列出所有排版值

其他设计代币

brand_get_radius -获取边界半径值
brand_get_shadow -获取阴影值
brand_get_theme -获取完整的主题配置
brand_list_tokens -列出主题的所有设计标记

品牌体系特点：

✅ 嵌套属性访问(primary.500, fontSizes.base)
✅ 令牌验证（颜色格式、CSS值）
✅ 带有建议的有用错误消息
✅ 多主题支持(default, rpg_8bit)
✅ 自动令牌发现

AI路由器工具

所有AI操作都通过n8n webhooks（解耦架构）路由：

ai_call -通过n8n进行通用AI操作
ai_summarize -通过n8n总结内容
ai_extract -通过n8n提取数据
ai_generate -通过n8n生成内容

备注：这些工具POST到n8n webhooks-AI逻辑在下游处理，而不是直接在Lovable中处理。

自定义组件工具

get_component -检索自定义组件
list_components -列出所有自定义组件
create_component -创建新的自定义组件

📦 可用资源

组件库资源

所有组件库都以以下格式提供资源：

magicui:// -Magic UI组件（68个可用）
shadcn:// -Shadcn UI组件（59个可用）
aceternity:// -Aceternity UI组件（96个可用）
8bit:// -8位组件（55个可用）
component:// -自定义组件

品牌体系资源（设计API）

brand://colors -完整的调色板（支持嵌套访问）
brand://spacing -间距比例（比例+语义值）
brand://typography -排版系统（字体、大小、粗细、线条高度）
brand://radii -边界半径值
brand://shadows -阴影值
brand://themes -完成主题配置

示例用法：

// Get nested color
brand_get_color({ colorName: "primary.500", theme: "default" })
// Returns: { color: "#0ea5e9", valid: true }

// Get typography
brand_get_typography({ property: "fontSizes.base", theme: "default" })
// Returns: { value: "1rem", valid: true }

🔧 定制

添加新的MCP提供程序

服务器使用模块化架构，可以轻松添加新的MCP提供商：

创建新的提供程序文件 在 mcp-providers/:

   // mcp-providers/my-provider.mjs
   export const myProviderTools = [/* tool definitions */];
   export const myProviderResources = [/* resource definitions */];
   export async function handleMyProviderTool(name, args) { /* ... */ }
   export async function handleMyProviderResource(uri) { /* ... */ }

导入并注册 server.mjs:

   import { myProviderTools, ... } from "./mcp-providers/my-provider.mjs";

合并到统一的端点:

- 将工具添加到 allTools 数组in /mcp/tools/list - 向添加资源 allResources 数组in /mcp/resources/list - 路由工具调用 /mcp/tools/call - 路由资源读入 /mcp/resources/read

自定义现有提供程序

组件库提供者

魔术UI: mcp-providers/magic-ui.mjs -68个具有完整上下文元数据的组件
Shadcn用户界面: mcp-providers/shadcn.mjs -59个具有完整上下文元数据的组件
醋酸UI: mcp-providers/aceternity-ui.mjs -96个具有完整上下文元数据的组件
8比特币: mcp-providers/eightbit.mjs -55个具有完整上下文元数据的组件

所有组件提供商包括：

组件上下文元数据（用例、模式、示例）
跨元数据搜索功能
get_component_context 详细信息工具

品牌体系提供商

文件: mcp-providers/brand-system.mjs
令牌文件: design-tokens/*.json
特性：嵌套属性访问、验证、错误处理
主题: default, rpg_8bit
状态: ✅ 已实现所有功能

AI路由器提供商

文件: mcp-providers/ai-router.mjs
目的：将AI操作路由到n8n webhooks
配置：设置 N8N_WEBHOOK_URL 环境变量
状态: ⏳ 脚手架已完成，需要n8n webhook URL配置

自定义组件提供程序

文件: mcp-providers/custom-components.mjs
状态: ⏳ 占位符-实现实际存储（数据库、文件系统等）

环境变量

PORT -服务器端口（默认值：4001，Railway会自动设置此端口）

🏗️ 项目结构

railway-mcp-test/
├── server.mjs                    # Main unified MCP server
├── mcp-providers/                # Modular MCP provider modules
│   ├── magic-ui.mjs             # Magic UI provider (68 components)
│   ├── shadcn.mjs               # Shadcn UI provider (59 components)
│   ├── aceternity-ui.mjs        # Aceternity UI provider (96 components)
│   ├── eightbit.mjs             # 8bitcn provider (55 components)
│   ├── brand-system.mjs         # Brand System/Design API provider
│   ├── ai-router.mjs            # AI Router provider (n8n webhooks)
│   └── custom-components.mjs    # Custom components provider
├── design-tokens/                # Design token JSON files
│   ├── colors.json              # Color palettes (default, rpg_8bit)
│   ├── spacing.json             # Spacing scales
│   ├── typography.json          # Typography systems
│   ├── radii.json               # Border radii
│   ├── shadows.json             # Shadow values
│   └── themes.json              # Theme configurations
├── package.json                 # Dependencies and scripts
├── railway.json                 # Railway deployment configuration
├── .gitignore                   # Git ignore rules
└── README.md                    # This file

建筑

服务器使用 模块化提供者架构 随着 解耦人工智能:

提供者模式：

每个MCP服务器都是一个单独的模块 mcp-providers/
主服务器(server.mjs)合并所有提供程序
所有提供商的工具和资源都统一到单个端点中
无需修改核心服务器代码即可轻松添加新提供程序

解耦人工智能架构：

所有AI操作都通过n8n webhooks路由
可爱的→ 边缘功能→ n8n Webhook→ LLM+工具→ 返回
没有直接的LLM API调用 来自可爱
集中式人工智能编排和成本控制

组件上下文增强：

所有278个组件都包含丰富的元数据：

- useCases -常见用例 - commonPatterns -使用模式 - whenToUse / whenNotToUse -指导方针 - examples -代码示例 - relatedComponents -相关组件

搜索功能搜索所有元数据字段
get_component_context 工具提供详细的组件信息

设计系统API：

具有嵌套属性访问的完整品牌系统
多主题支持（默认，rpg_8bit）
令牌验证和有用的错误消息
自动令牌发现和建议

🔒 安全说明

CORS当前设置为允许所有来源(*)
对于生产，考虑将CORS限制在特定域
如果敏感操作需要，请添加身份验证
考虑对公共端点进行速率限制

✨ 特性

零部件库

✅ 278总组件 横跨4个图书馆
✅ 丰富的上下文元数据 对于所有组件（用例、模式、示例）
✅ 增强型搜索 跨元数据字段
✅ 组件上下文工具 有关详细的组件信息

设计体系API（品牌体系）

✅ 嵌套属性访问 - primary.500, fontSizes.base
✅ 令牌验证 -验证颜色格式和CSS值
✅ 有用的错误消息 -建议对错误使用类似的标记
✅ 多主题支持 - default 和 rpg_8bit 主题
✅ 10工具 用于完整的设计令牌访问

建筑

✅ 解耦AI -所有AI操作均通过n8n webhooks完成
✅ 模块化提供商 -易于添加新提供商
✅ 统一端点 -所有提供商的单一连接

📝 后续步骤

配置n8n Webhooks -使用实际n8n webhook URL设置AI路由器提供程序
实施自定义组件存储 -为自定义组件添加数据库或文件系统
添加更多提供商 -使用其他组件库或工具进行扩展
添加身份验证 -如果您需要限制访问
添加日志记录/监控 -用于生产用途
设置组件缓存 -为了获得更好的性能
集成组件代码API -连接到实际的Magic UI/Shadcn API进行代码检索

🆘 故障排除

服务器无法启动

检查一下 PORT 已设置环境变量（Railway会自动设置此变量）
验证是否安装了所有依赖项： npm install

无法从Lovable连接

验证铁路URL是否可公开访问
检查运行状况端点： https://your-app.railway.app/health
确保CORS配置正确
检查铁路日志是否有错误

工具不工作

验证工具名称是否完全匹配
检查是否提供了所需的参数
查看服务器日志中的错误消息

📚 了解更多

______________________________________________________________________

内置于❤️ 在Lovable中实现一致的组件开发

Railway MCP Test

快速接入

详细介绍