Skip to main content
Glama

see-u-ui-mcp

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 即模板可直接使用的绑定名。

Related MCP server: bunge-ds-mcp

安装

# 已发布后(推荐)
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):

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

本地开发(未发布)用绝对路径指向入口:

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

Claude Code

# 已发布
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。

验证

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

维护

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

Available Tools

3 tools
get_component_api查询组件 APIA

按 tag(如 see-button)返回单个组件的完整 API:props(含类型/必填/默认值/说明)、events(模板绑定名,kebab-case,如 @on-click)、slots。用于生成使用该组件的准确代码。

Inputs: tag (required).

get_component_examples查询组件示例A

按 tag(如 see-button)返回该组件的可用代码示例(标题 + HTML 模板片段)。用于参考真实用法。

Inputs: tag (required).

list_components列出组件A

列出 see-u-ui 组件库的全部组件(可按 category 过滤)。返回每个组件的 tag、组件名、中英文标题、分组、一句话描述。用于总览或查找组件。

Inputs: category.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

Loading tool schema changelog…

    TDQS

    A4.4/5.0

    Scored across 3 tools

    Disambiguation5/5

    Each tool has a clearly distinct purpose: listing components, getting API details, and retrieving code examples. No overlap or ambiguity.

    Naming Consistency5/5

    All tool names follow a consistent verb_noun pattern in snake_case (get_component_api, get_component_examples, list_components). No deviations.

    Tool Count5/5

    Three tools is well-scoped for a UI component library documentation server. They cover overview, detailed API, and examples without being excessive.

    Completeness4/5

    The set covers listing, API details, and examples, which are core for component documentation. A minor gap is the lack of a search tool, but it's not critical.

    Maintenance

    ActivityInactive
    ResponsivenessNo recent community issues

    Related MCP Connectors

    Related MCP Servers

    • A
      license
      A
      quality
      D
      maintenance
      Helps AI assistants access shadcn/ui component documentation and examples through a TypeScript-based MCP server that provides reference information for component details, usage examples, and search capabilities.
      4
      551 npm
      60
      MIT
    • A
      license
      A
      quality
      C
      maintenance
      MCP server that exposes the @bunge/ds-components design system catalog, allowing AI assistants to list, search, and retrieve component details including inputs, outputs, usage examples, and import instructions.
      4
      MIT
    • A
      license
      B
      quality
      D
      maintenance
      An MCP server that scans React and Vue projects, extracts component metadata (props, slots, events, imports, usage), and exposes it to AI coding agents via structured tools.
      7
      1
      MIT