OriginUI MCP服务器
一个模型上下文协议（MCP）服务器，提供对OriginUI组件的访问，使Claude Code代理能够无缝搜索、浏览和安装OriginUI元素。
特性
- 组件搜索：按名称、类别或标记搜索组件
- 组件详细信息：获取有关特定组件的全面信息
- 安装命令：生成正确的
pnpm dlx shadcn@latest add命令 - 可视化的预览：获取组件截图和视觉描述以评估匹配度
- 组件预览：查看样式信息和使用示例
- 类别筛选：按类别浏览组件（按钮、输入、表单等）
🚀 快速开始
太长，读不下去了：将此添加到您的 ~/.claude-code/mcp.json 文件：
{
"mcpServers": {
"origin-ui": {
"command": "npx",
"args": ["--yes", "github:kelvinchng/origin-ui-mcp"],
"env": {}
}
}
}重新启动Claude Code并询问： *“OriginUI按钮组件有哪些？”*
安装
选项1：与npx一起使用（推荐-不需要克隆！）
无需安装！您可以使用npx直接从GitHub存储库使用MCP服务器。
选项2：在本地克隆和构建
git clone https://github.com/kelvinchng/origin-ui-mcp.git
cd origin-ui-mcp
npm install
npm run build选项3：全球安装（即将推出）
npm install -g origin-ui-mcpClaude代码集成
步骤1：添加到克劳德代码MCP配置
在以下位置创建或编辑您的Claude Code MCP配置文件 ~/.claude-code/mcp.json:
选项A：使用npx（推荐）
{
"mcpServers": {
"origin-ui": {
"command": "npx",
"args": ["--yes", "github:kelvinchng/origin-ui-mcp"],
"env": {}
}
}
}选项B：使用本地克隆
{
"mcpServers": {
"origin-ui": {
"command": "node",
"args": ["/absolute/path/to/origin-ui-mcp/dist/index.js"],
"env": {}
}
}
}备注：使用选项A（npx），不需要手动安装或路径配置！
步骤2：重新启动Claude代码
添加MCP配置后，重新启动Claude Code以加载OriginUI MCP服务器。
步骤3：验证集成
您可以通过询问Claude Code来验证集成是否正常工作：
"What OriginUI components are available for buttons?"Claude Code现在应该能够搜索、描述和提供OriginUI组件的安装命令。
使用示例
一旦与Claude Code集成，您可以提出以下问题：
- “查找与付款相关的组件”
- “如何安装按钮组件？”
- “卡组件有哪些样式选项？”
- “显示所有导航组件”
- “我需要一个用户输入表单组件”
Claude Code将使用MCP服务器提供准确的信息和安装命令。
📸 视觉组件评估
其中一个关键功能是能够获得组件的视觉预览，以帮助LLM提出更好的建议：
"Show me what the payment component looks like"
"Get a screenshot of the button component"
"I want to see the visual style of navigation components"MCP服务器将提供：
- 组件外观的视觉描述
- OriginUI上的实时示例链接
- 特定主题信息（亮/暗模式）
- 移动响应详细信息
- 基于视觉风格的用例推荐
可用工具
search_components
按名称、类别或标签搜索OriginUI组件。
参数：
query（字符串，必填）：搜索查询category（字符串，可选）：按类别筛选limit（数字，可选）：最大结果（默认值：10）
例子：
search_components({
query: "payment",
category: "form",
limit: 5
})get_component_details
获取特定组件的详细信息。
参数：
componentId（字符串，必填）：组件ID（例如“comp-163”）
例子：
get_component_details({
componentId: "comp-163"
})list_components
列出所有可用组件及其基本信息。
参数：
category（字符串，可选）：按类别筛选limit（数字，可选）：最大结果（默认值：50）
get_install_command
获取特定组件的安装命令。
参数：
componentId（字符串，必填）：组件ID
退货：
pnpm dlx shadcn@latest add https://originui.com/r/comp-163.jsonget_component_preview
获取包含样式信息和使用示例的组件预览。
参数：
componentId（字符串，必填）：组件ID
get_component_screenshot
获取组件视觉预览，以帮助评估它是否适合您的项目。
参数：
componentId（字符串，必填）：组件IDtheme（字符串，可选）：主题偏好（“亮”、“暗”、“两者”）
退货：
- 组件外观的视觉描述
- 屏幕截图（如有）
- 链接到实时示例
- 用例建议
- 安装说明
组件类别
button-按钮组件input-输入和表单控件select-选择并下拉组件navbar-导航组件card-卡片和容器组件form-表单相关组件layout-布局组件navigation-导航元素feedback-反馈和状态组件data-display-数据显示组件overlay-模态和叠加组件typography-文本和排版组件media-媒体组件
使用Claude代码的示例用法
// Search for button components
const buttons = await search_components({
query: "button",
category: "button",
limit: 10
});
// Get details for a specific component
const details = await get_component_details({
componentId: "comp-163"
});
// Get installation command
const installCmd = await get_install_command({
componentId: "comp-163"
});
// Get visual preview to assess fit
const screenshot = await get_component_screenshot({
componentId: "comp-163",
theme: "both"
});
// Install the component
// pnpm dlx shadcn@latest add https://originui.com/r/comp-163.json发展
# Install dependencies
npm install
# Build the project
npm run build
# Run in development mode
npm run dev
# Start the MCP server
npm start运作原理
- 组件发现：服务器维护一个包含元数据的OriginUI组件注册表
- 动态抓取：组件详细信息根据需要从OriginUI的JSON注册表中获取
- 缓存：缓存组件5分钟以提高性能
- 安装：生成正确的
pnpm dlx shadcn@latest add具有正确URL的命令
贡献
- 分叉存储库
- 创建要素分支
- 进行更改
- 如果适用，添加测试
- 提交拉取请求
许可证
MIT许可证-有关详细信息，请参阅许可证文件。