@ cooperco/ 组件- 图书馆- mcp- 服务器
库珀组件库的MCP(模式上下文协议)服务器. 给予克劳德代码等AI助手访问组件文档,道具类型,彩色调色板,通过配置,和脚手架工具.
安装
npm install -g @cooperco/component-library-mcp-server
# or use npx (no install needed)
配置 Claude 代码
添加到您的项目 .claude/settings.json数字 :
{
"mcpServers": {
"cooper-components": {
"command": "npx",
"args": ["-y", "@cooperco/component-library-mcp-server"]
}
}
}
服务器通过从工作目录上走来搜索工程根 src/components/components.ts。 。 。 .
明确项目路径
如果自动检测不起作用(例如,你处于单列状态),明确通过路径:
{
"mcpServers": {
"cooper-components": {
"command": "npx",
"args": ["-y", "@cooperco/component-library-mcp-server", "/path/to/Cordblood-Component-Library"]
}
}
}
或者使用环境变量 :
{
"mcpServers": {
"cooper-components": {
"command": "npx",
"args": ["-y", "@cooperco/component-library-mcp-server"],
"env": {
"COOPER_PROJECT_ROOT": "/path/to/Cordblood-Component-Library"
}
}
}
}
地方发展(在此范围内)
在组件库本身工作时,使用本地建筑 :
{
"mcpServers": {
"cooper-components": {
"command": "node",
"args": ["mcp/dist/index.js"]
}
}
}
工具
| 工具 | 说明 |
|---|---|
list-components | 列出包含类别、变体和描述的所有组件 |
get-component | 一个组件的完整文件:道具、事件、插槽、通过和源代码 |
get-component-props | 有类型、默认和所需状态的焦点道具表 |
get-color-palettes | 彩色调色板系统:可用的调色板、结构和使用 |
get-passthrough-config | 通过密钥和组件默认的 Tailwind 类 |
search-components | 按名称、类别或道具名称搜索组件 |
scaffold-component | 生成带有.vue、.ts和.stories.ts文件的新组件 |
实例
一旦配置,克洛德代码可以自动使用工具:
- "有什么组件可用?" 电话
list-components - "给我看看集装箱模型的道具" 电话
get-component - "我可以用什么调色板?" 电话
get-color-palettes - 创造出新的BannerModule组件 电话
scaffold-component
如何运作
服务器在运行时读取您的组件库源文件 :
- 解析类型脚本接口
ComponentName.ts使用 TypeScript 编译器 API 文件 - 摘录
withDefaults, (中文(简体) ),defineEmits,以及<slot>来自.vue文件 - 读取通过配置
src/config/defaultPassthrough/index.ts - 读取调色板
src/config/colorPalettes.ts - 发现组件来自
src/components/components.ts桶出口
结果被缓存在内存中,当源文件改变时无效,因此文档总是流出.