AI导哈

组件库文档服务

一个基于Model Context Protocol (MCP)的服务模板，为Claude AI提供对Stencil组件库文档的访问，支持组件查询、代码生成和文档导出等功能。

  • by life4aiur
  • TypeScript
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 life4aiur/stencil-library-mcp

使用说明

模板组件库MCP服务器

模型上下文协议（MCP）服务器模板，使Claude AI能够访问您的模板组件库文档。

备注：这个项目始于 SterlingChin的MCP气象服务器，为构建MCP服务器提供了良好的基础。最初的天气服务器实现已被重新调整用途，以服务于Stencil组件库文档。

什么是MCP？

模型上下文协议（MCP）是一个开放的通信框架，允许像Claude这样的AI模型与外部工具和数据源进行交互。此模板使Claude能够访问您的组件库文档，并帮助您使用组件构建UI。

了解有关MCP的更多信息：

此存储库包含什么

此存储库提供：

  1. 完整的MCP组件库服务器模板：一个功能齐全的实现，使Claude可以访问您的模板组件文档
  2. 组件文档集成：从Stencil生成的JSON文档中读取
  3. 配置示例：用于连接到Claude Desktop的示例配置文件

特性

MCP组件库服务器实现了11个强大的工具来帮助您使用组件库：

核心工具

  • 列出组件：获取组件库中所有组件的列表
  • 获取组件详细信息：检索特定组件（道具、事件、插槽）的详细信息
  • 生成组件配方：根据您想要构建的内容生成使用示例和代码片段

发现工具

  • 搜索组件：按名称、描述、道具或事件中的关键字搜索组件
  • 使用prop查找组件：查找具有特定属性的所有组件（例如“禁用”、“值”）
  • 查找带有事件的组件：查找发出特定事件的所有组件（例如，“单击”、“更改”）

分析工具

  • 比较组件：并排比较两个组件，查看它们的差异
  • 获取组件依赖关系：显示组件的依赖关系和依赖项
  • 获取所有道具：列出整个组件库中所有唯一的属性名称
  • 获取所有事件：列出整个组件库中所有唯一的事件名称

文档工具

  • 生成组件文档markdown：将组件文档导出为格式化的markdown

连接后，Claude可以：

  • 告诉您组件库中有哪些可用组件
  • 解释如何使用特定组件
  • 向您展示任何组件的所有道具、事件和插槽
  • 生成常见UI模式的代码示例和配方
  • 帮助您找到适合您需求的组件
  • 比较相似组件以选择最佳组件
  • 了解组件关系和依赖关系
  • 以markdown格式导出文档

快速开始

先决条件

  • Node.js 16+和npm
  • 克劳德桌面
  • 带有生成的docs.json的模板组件库

安装

  1. 克隆或导航到此存储库：

    cd stencil-library-mcp

  2. 安装依赖项：

    npm install

  3. 构建项目：

    npm run build

  4. 将您的模板组件文档放入 component-docs/docs.json

连接到克劳德桌面

  1. 打开您的Claude Desktop配置文件：

    • 雨衣： ~/Library/Application Support/Claude/claude_desktop_config.json
    • 窗户： %AppData%\Claude\claude_desktop_config.json

  2. 添加以下配置（更新路径和名称以匹配您的组件库）：

    {
  "mcpServers": {
    "my-component-library": {
      "command": "node",
      "args": ["/absolute/path/to/stencil-library-mcp/build/index.js"]
    }
  }
}

    💡 小贴士：服务器名称（下面的键 mcpServers)这是Claude Desktop在要求使用工具时显示的内容。选择一个与您的组件库匹配的名称。例如，如果你的库名为“Acme UI”，你可以使用 "acme-ui" 作为关键。

  3. 重新启动克劳德桌面

  4. 在Claude Desktop中查找锤子图标，表示MCP工具可用

测试您的实现

试着问克劳德这些问题：

基本查询：

  • “我的组件库有哪些组件？”
  • “显示[组件名称]的详细信息”
  • “给我一个使用我的组件的登录表单的配方”
  • “我如何在[组件]上使用[属性]？”

发现查询：

  • “搜索与表单相关的组件”
  • “哪些组件具有“disabled”属性？”
  • “哪些组件会发出‘点击’事件？”

分析查询：

  • “比较[组件1]和[组件2]”
  • “[组件名称]的依赖关系是什么？”
  • “显示整个库中的所有公共属性”
  • “组件可以发出哪些事件？”

文档查询：

  • “为[组件名称]生成标记文档”

项目结构

├── src/
│   └── index.ts           # Main server entry point with all tools
├── component-docs/
│   ├── docs.json          # Your Stencil component documentation
│   └── docs.d.ts          # TypeScript definitions
├── build/                 # Compiled JavaScript files
├── package.json
└── tsconfig.json

更新组件文档

更新模板组件时：

  1. 重新生成模板文档（通常是构建过程的一部分）
  2. 复制新 docs.json 到 component-docs/docs.json
  3. 重建此MCP服务器： npm run build
  4. 重新启动克劳德桌面

为您的设计系统定制

要使此模板适应您自己的设计系统，请执行以下操作：

  1. 更新服务器名称 在 src/index.ts:

    const server = new McpServer({
  name: "your-design-system-name",
  // ...
});

  2. 修改组件格式 在 formatComponent() 满足您的需求

  3. 增强代码生成 在 generateExampleUsage() 创造更好的例子

  4. 添加其他工具 用于特定的设计系统需求（主题标记、图标等）

  5. 更新品牌 控制台消息和文档

可用工具

核心工具

list-components

列出设计系统中所有可用的组件，并附上简要说明。

参数： 无

例子： “我的库中有哪些可用组件？”

get-component-details

获取特定组件的详细文档，包括：

  • 所有属性（包括类型和默认值）
  • 事件
  • 插槽
  • 使用文档

参数：

  • tag （string）：组件标签名称（例如“我的按钮”）

例子： “显示我的按钮的详细信息”

generate-component-recipe

根据您想要构建的内容生成代码示例和实现建议。Claude将分析您可用的组件，并建议如何组合它们。

参数：

  • description （string）：描述您要构建的内容

例子： “给我一个登录表单的配方”

发现工具

search-components

按名称、描述、道具或事件中的关键字搜索组件。

参数：

  • query （字符串）：搜索查询（例如，“按钮”、“表单”、“输入”）

例子： “搜索所有与输入相关的组件”

find-components-with-prop

查找具有特定属性的所有组件。

参数：

  • propName （string）：要搜索的属性名称（例如，“disabled”、“value”）

例子： “哪些组件具有“disabled”属性？”

find-components-with-event

查找发出特定事件的所有组件。

参数：

  • eventName （string）：要搜索的事件名称（例如，“点击”、“更改”）

例子： “哪些组件会发出‘更改’事件？”

分析工具

compare-components

并排比较两个组件，看看它们在道具、事件和插槽方面的差异。

参数：

  • component1 （string）：第一个组件标记名称
  • component2 （string）：第二个组件标记名称

例子： “比较我的按钮和图标按钮”

get-component-dependencies

显示组件的依赖关系（此使用的组件）和依赖关系（使用此的组件）。

参数：

  • tag （string）：组件标记名称

例子： “我的卡的依赖项是什么？”

get-all-props

列出整个组件库中所有唯一的属性名称，按使用频率排序。

参数： 无

例子： “我的组件有哪些共同属性？”

get-all-events

列出整个组件库中所有唯一的事件名称，按使用频率排序。

参数： 无

例子： “我的组件可以发出哪些事件？”

文档工具

generate-component-docs-markdown

将组件文档导出为格式化的标记，您可以将其复制到文档站点。

参数：

  • tag （string）：组件标记名称

例子： “为我的按钮生成markdown文档”

故障排除

常见问题

  • 克劳德找不到你的服务器：验证中的配置路径 claude_desktop_config.json 并重新启动克劳德桌面
  • “加载组件文档失败”：确保 component-docs/docs.json 存在并且是有效的JSON
  • 服务器未更新：重建 npm run build 并重新启动克劳德桌面
  • 检查日志：查看克劳德桌面日志：
    • 雨衣： ~/Library/Logs/Claude/mcp*.log
    • 窗户： %AppData%\Claude\logs\mcp*.log

许可证

麻省理工学院

鸣谢

这个项目是 SterlingChin的MCP气象服务器特别感谢Sterling Chin创建了一个优秀的MCP服务器实现，作为此组件库文档服务器的基础。

贡献

欢迎根据您自己的组件库需求进行自定义！

使用 模型上下文协议

相关 MCP