原始界面MCP服务器

Name: 原始界面MCP服务器
Author: kelvinchng

作者：kelvinchng6 星标更新：2025-06-20

安装使用来源：spider==github.com

项目介绍

OriginUI MCP 服务器

这是一个提供访问OriginUI组件的模型上下文协议（MCP）服务器，使Claude Code代理能够无缝地搜索、浏览和安装OriginUI组件。

特性

组件搜索：按名称、类别或标签搜索组件
组件详情：获取特定组件的全面信息
安装命令：生成正确的 pnpm dlx shadcn@latest add 命令
视觉预览：获取组件截图和视觉描述以评估适用性
组件预览：查看样式信息和使用示例
类别过滤：按类别浏览组件（按钮、输入框、表单等）

🚀 快速开始

TL;DR：在你的 ~/.claude-code/mcp.json 文件中添加以下内容：

{
  "mcpServers": {
    "origin-ui": {
      "command": "npx",
      "args": ["--yes", "github:kelvinchng/origin-ui-mcp"],
      "env": {}
    }
  }
}

重启Claude Code并询问："有哪些可用的OriginUI按钮组件？"

安装

方案1：使用npx（推荐 - 不需要克隆！）

无需安装！你可以直接从GitHub仓库使用npx来使用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-mcp

Claude Code 集成

第一步：添加到Claude Code MCP配置

创建或编辑位于 ~/.claude-code/mcp.json 的Claude Code MCP配置文件：

方案A：使用npx（推荐）

{
  "mcpServers": {
    "origin-ui": {
      "command": "npx",
      "args": ["--yes", "github:kelvinchng/origin-ui-mcp"],
      "env": {}
    }
  }
}

方案B：使用本地克隆

{
  "mcpServers": {
    "origin-ui": {
      "command": "node",
      "args": ["/绝对路径/to/origin-ui-mcp/dist/index.js"],
      "env": {}
    }
  }
}

注意：使用方案A（npx），不需要手动安装或路径配置！

第二步：重启Claude Code

添加MCP配置后，重启Claude Code以加载OriginUI MCP服务器。

第三步：验证集成

你可以通过询问Claude Code来验证集成是否正常工作：

"有哪些可用的OriginUI按钮组件？"

Claude Code现在应该能够搜索、描述并提供安装命令给OriginUI组件。

使用示例

一旦与Claude Code集成，你可以提出如下问题：

"找到与支付相关的组件"
"如何安装按钮组件？"
"卡片组件有哪些样式选项？"
"显示所有导航组件"
"我需要一个用户输入表单组件"

Claude Code将使用MCP服务器提供准确的信息和安装命令。

📸 组件视觉评估

关键特性之一是能够获得组件的视觉预览，帮助LLMs做出更好的推荐：

"展示支付组件的样子"
"获取按钮组件的截图"
"我想看看导航组件的视觉风格"

MCP服务器将提供：

组件外观的视觉描述
到OriginUI上实时示例的链接
主题特定信息（浅色/深色模式）
移动响应细节
根据视觉风格的用例推荐

可用工具

`search_components`

按名称、类别或标签搜索OriginUI组件。

参数：

query（字符串，必需）：搜索查询
category（字符串，可选）：按类别筛选
limit（数字，可选）：最大结果数（默认：10）

示例：

search_components({
  query: "支付",
  category: "表单",
  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.json

`get_component_preview`

获取带有样式信息和使用示例的组件预览。

参数：

componentId（字符串，必需）：组件ID

`get_component_screenshot`

获取组件的视觉预览，以帮助评估其是否适合你的项目。

参数：

componentId（字符串，必需）：组件ID
theme（字符串，可选）：主题偏好（"浅色"，"深色"，"两者"）

返回：

组件外观的视觉描述
可用时的截图
到实时示例的链接
用例推荐
安装说明

组件类别

button - 按钮组件
input - 输入和表单控件
select - 选择和下拉组件
navbar - 导航组件
card - 卡片和容器组件
form - 表单相关组件
layout - 布局组件
navigation - 导航元素
feedback - 反馈和状态组件
data-display - 数据展示组件
overlay - 模态和覆盖层组件
typography - 文本和排版组件
media - 媒体组件

示例使用与Claude Code

// 搜索按钮组件
const buttons = await search_components({
  query: "按钮",
  category: "按钮",
  limit: 10
});

// 获取特定组件的详细信息
const details = await get_component_details({
  componentId: "comp-163"
});

// 获取安装命令
const installCmd = await get_install_command({
  componentId: "comp-163"
});

// 获取视觉预览以评估适用性
const screenshot = await get_component_screenshot({
  componentId: "comp-163",
  theme: "两者"
});

// 安装组件
// pnpm dlx shadcn@latest add https://originui.com/r/comp-163.json

开发

# 安装依赖
npm install

# 构建项目
npm run build

# 在开发模式下运行
npm run dev

# 启动MCP服务器
npm start

工作原理

组件发现：服务器维护一个带有元数据的OriginUI组件注册表
动态获取：组件详情按需从OriginUI的JSON注册表中获取
缓存：组件被缓存5分钟以提高性能
安装：生成正确的 pnpm dlx shadcn@latest add 命令和正确的URL

贡献

分叉仓库
创建功能分支
进行更改
如适用，添加测试
提交拉取请求

许可证

MIT许可证 - 查看LICENSE文件了解详情。