AI导哈

组件文档服务器

Paragon MCP Server是一个为Open edX Paragon设计系统提供结构化组件文档访问的服务器，支持AI助手获取组件属性、事件、代码示例和CSS设计令牌，以编写基于Paragon的UI代码。

  • by RomkaSk
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 RomkaSk/paragon-mcp-server

使用说明

Paragon MCP服务器

MCP服务器 Open edX Paragon 设计系统（v23.x）。为AI助手提供对组件文档（道具、事件、代码示例和CSS设计标记）的结构化访问，这样他们就可以编写基于Paragon的UI代码而无需猜测。

安装

使用此服务器的最快方法是通过npx（不需要克隆）：

claude mcp add paragon -- npx -y @romkask/paragon-mcp-server

或者手动将其添加到MCP配置中(~/.claude/settings.json 或项目 .claude/settings.local.json):

{
  "mcpServers": {
    "paragon": {
      "command": "npx",
      "args": ["-y", "@romkask/paragon-mcp-server"]
    }
  }
}

可用工具

工具 说明
list_components 列出所有63个Paragon组件，包括类别、状态和计数
get_component 获取组件或子组件的完整详细信息（描述、道具、事件、子组件）
get_component_props 获取所有带有类型和描述的道具
get_component_events 获取所有回调事件（onClose、onToggle等）
list_examples 列出组件的可用代码示例
get_example 获取特定示例的完整JSX代码
get_components_variables 获取CSS自定义属性/设计标记

子组件查找

所有73个子部件（例如。， CardGrid, AlertHeading, FormControl, TableRow)自动解析为其父组件。询问 get_component("CardGrid") 返回完整 Card 组件信息，带有指示子组件匹配的注释。

数据覆盖

  • 63个组件 （按钮、警报、卡片、DataTable、表单、模态等）
  • 73个子组件 具有自动父分辨率
  • 410道具 带有类型和描述
  • 69个事件/回调
  • 295个实时代码示例
  • 443个CSS设计标记变量

发展

git clone https://github.com/RomkaSk/paragon-mcp-server.git
cd paragon-mcp-server
npm install
npm run build     # generates data + bundles with tsup
npm start         # run server
npm run dev       # dev mode with tsx
npm test          # run tests (348 tests covering all components & subcomponents)

许可证

麻省理工学院

相关 MCP