# see-u-ui-mcp

[see-u-ui](https://www.npmjs.com/package/see-u-ui) 组件库的 MCP (Model Context Protocol) 服务。让 AI 助手（Cursor / Claude Code 等）实时查询全部组件的 props / events / slots / 示例，**按需查询、不占上下文**。

数据来自库的单一数据源 `registry.json`，构建期同步进本包 `data/`，运行时读本地副本，无跨包依赖，可独立发布。

## 工具

| 工具 | 入参 | 作用 |
| --- | --- | --- |
| `list_components` | `category?` | 列出全部组件（可按分组过滤），返回 tag / 组件名 / 标题 / 描述 |
| `get_component_api` | `tag` | 按标签返回完整 API：props（类型/必填/默认值）、events（模板绑定名）、slots |
| `get_component_examples` | `tag` | 按标签返回代码示例 |

> 事件绑定名统一 kebab-case：内部 emit `onClick` 对应模板 `@on-click`。`get_component_api` 返回的 `events[].bind` 即模板可直接使用的绑定名。

## 安装

```bash
# 已发布后（推荐）
npx see-u-ui-mcp

# 或本地克隆
cd see-u-ui-mcp
npm install
npm run sync   # 从同级 see-u-ui 库同步 registry.json（本地开发才需要）
```

## 接入

### Cursor

编辑 `~/.cursor/mcp.json`（或项目内 `.cursor/mcp.json`）：

```json
{
  "mcpServers": {
    "see-u-ui": {
      "command": "npx",
      "args": ["-y", "see-u-ui-mcp"]
    }
  }
}
```

本地开发（未发布）用绝对路径指向入口：

```json
{
  "mcpServers": {
    "see-u-ui": {
      "command": "node",
      "args": ["/path/to/see-u-ui-mcp/index.mjs"]
    }
  }
}
```

### Claude Code

```bash
# 已发布
claude mcp add see-u-ui -- npx -y see-u-ui-mcp

# 本地开发
claude mcp add see-u-ui -- node /path/to/see-u-ui-mcp/index.mjs
```

或手动写入 `.mcp.json`（项目级）/ `~/.claude.json`（用户级），结构同上 Cursor 的 `mcpServers`。

### 通用（任意支持 MCP 的客户端）

传输方式 **stdio**，启动命令 `node index.mjs`（或发布后 `npx see-u-ui-mcp`）。服务启动后在 stderr 打印 `[see-u-ui-mcp] ready`，stdout 仅走 JSON-RPC。

## 验证

```bash
node scripts/probe.mjs
# 期望输出 PROBE_OK，并列出 3 个工具与抽检结果
```

## 维护

库组件有更新时，在 `see-u-ui` 库执行 `pnpm ai:gen` 重建 registry，再在本包 `npm run sync` 同步，最后发版。