AI导哈

统一MCP服务器

一个集中化的模型上下文协议(MCP)服务器，整合多个MCP提供商，提供组件库、设计系统API和AI工具的统一访问接口，适用于Lovable开发环境。

  • by AgentArtel
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 AgentArtel/railway-mcp-test

使用说明

爱的统一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提供商
  • 始终可用：铁路全天候运行

🚀 快速开始

本地开发

  1. 安装依赖项：
npm install
  1. 启动服务器：
npm start

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

部署到铁路

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

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

  2. 铁路将自动：

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

  3. 获取您的服务器URL:

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

🔌 连接到可爱

逐步配置

  1. 获取您的铁路服务器URL

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

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

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

  3. 填写连接详细信息：

    基本设置：

    • 服务器名称: 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 （或留空）

  4. 保存和测试：

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

快速测试

手动测试连接：

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

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

故障排除

如果您仍然收到OAuth错误：

  1. 等待2-3分钟 铁路重新部署后
  2. 检查铁路日志 确保服务器正在运行
  3. 尝试发现端点: https://design-api-mcp-production.up.railway.app/.well-known/oauth-authorization-server
  4. 验证端点 可访问（无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://<component-name> -Magic UI组件（68个可用）
  • shadcn://<component-name> -Shadcn UI组件（59个可用）
  • aceternity://<component-name> -Aceternity UI组件（96个可用）
  • 8bit://<component-name> -8位组件（55个可用）
  • component://<component-name> -自定义组件

品牌体系资源（设计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提供商：

  1. 创建新的提供程序文件 在 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) { /* ... */ }

  2. 导入并注册 server.mjs:

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

  3. 合并到统一的端点:

    • 将工具添加到 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完成
  • ✅ 模块化提供商 -易于添加新提供商
  • ✅ 统一端点 -所有提供商的单一连接

📝 后续步骤

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

🆘 故障排除

服务器无法启动

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

无法从Lovable连接

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

工具不工作

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

📚 了解更多

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

相关 MCP