模板组件库MCP服务器
模型上下文协议（MCP）服务器模板，使Claude AI能够访问您的模板组件库文档。
备注：这个项目始于 SterlingChin的MCP气象服务器，为构建MCP服务器提供了良好的基础。最初的天气服务器实现已被重新调整用途，以服务于Stencil组件库文档。
什么是MCP？
模型上下文协议（MCP）是一个开放的通信框架，允许像Claude这样的AI模型与外部工具和数据源进行交互。此模板使Claude能够访问您的组件库文档，并帮助您使用组件构建UI。
了解有关MCP的更多信息：
此存储库包含什么
此存储库提供：
- 完整的MCP组件库服务器模板：一个功能齐全的实现，使Claude可以访问您的模板组件文档
- 组件文档集成：从Stencil生成的JSON文档中读取
- 配置示例：用于连接到Claude Desktop的示例配置文件
特性
MCP组件库服务器实现了11个强大的工具来帮助您使用组件库：
核心工具
- 列出组件：获取组件库中所有组件的列表
- 获取组件详细信息：检索特定组件（道具、事件、插槽）的详细信息
- 生成组件配方：根据您想要构建的内容生成使用示例和代码片段
发现工具
- 搜索组件：按名称、描述、道具或事件中的关键字搜索组件
- 使用prop查找组件：查找具有特定属性的所有组件（例如“禁用”、“值”）
- 查找带有事件的组件：查找发出特定事件的所有组件（例如，“单击”、“更改”）
分析工具
- 比较组件：并排比较两个组件，查看它们的差异
- 获取组件依赖关系：显示组件的依赖关系和依赖项
- 获取所有道具：列出整个组件库中所有唯一的属性名称
- 获取所有事件：列出整个组件库中所有唯一的事件名称
文档工具
- 生成组件文档markdown：将组件文档导出为格式化的markdown
连接后，Claude可以：
- 告诉您组件库中有哪些可用组件
- 解释如何使用特定组件
- 向您展示任何组件的所有道具、事件和插槽
- 生成常见UI模式的代码示例和配方
- 帮助您找到适合您需求的组件
- 比较相似组件以选择最佳组件
- 了解组件关系和依赖关系
- 以markdown格式导出文档
快速开始
先决条件
- Node.js 16+和npm
- 克劳德桌面
- 带有生成的docs.json的模板组件库
安装
- 克隆或导航到此存储库：
cd stencil-library-mcp- 安装依赖项：
npm install- 构建项目：
npm run build- 将您的模板组件文档放入
component-docs/docs.json
连接到克劳德桌面
- 打开您的Claude Desktop配置文件：
- 雨衣： ~/Library/Application Support/Claude/claude_desktop_config.json - 窗户： %AppData%\Claude\claude_desktop_config.json
- 添加以下配置（更新路径和名称以匹配您的组件库）：
{
"mcpServers": {
"my-component-library": {
"command": "node",
"args": ["/absolute/path/to/stencil-library-mcp/build/index.js"]
}
}
}> 💡 小贴士：服务器名称（下面的键 mcpServers)这是Claude Desktop在要求使用工具时显示的内容。选择一个与您的组件库匹配的名称。例如，如果你的库名为“Acme UI”，你可以使用 "acme-ui" 作为关键。
- 重新启动克劳德桌面
- 在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更新组件文档
更新模板组件时：
- 重新生成模板文档（通常是构建过程的一部分）
- 复制新
docs.json到component-docs/docs.json - 重建此MCP服务器：
npm run build - 重新启动克劳德桌面
为您的设计系统定制
要使此模板适应您自己的设计系统，请执行以下操作：
- 更新服务器名称 在
src/index.ts:
const server = new McpServer({
name: "your-design-system-name",
// ...
});- 修改组件格式 在
formatComponent()满足您的需求
- 增强代码生成 在
generateExampleUsage()创造更好的例子
- 添加其他工具 用于特定的设计系统需求（主题标记、图标等）
- 更新品牌 控制台消息和文档
可用工具
核心工具
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服务器实现，作为此组件库文档服务器的基础。
贡献
欢迎根据您自己的组件库需求进行自定义！
______________________________________________________________________
使用 模型上下文协议