see-u-ui-mcp
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@see-u-ui-mcp get component api for u-button"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
see-u-ui-mcp
see-u-ui 组件库的 MCP (Model Context Protocol) 服务。让 AI 助手(Cursor / Claude Code 等)实时查询全部组件的 props / events / slots / 示例,按需查询、不占上下文。
数据来自库的单一数据源 registry.json,构建期同步进本包 data/,运行时读本地副本,无跨包依赖,可独立发布。
工具
工具 | 入参 | 作用 |
|
| 列出全部组件(可按分组过滤),返回 tag / 组件名 / 标题 / 描述 |
|
| 按标签返回完整 API:props(类型/必填/默认值)、events(模板绑定名)、slots |
|
| 按标签返回代码示例 |
事件绑定名统一 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 toolsget_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
Scored across 3 tools
Each tool has a clearly distinct purpose: listing components, getting API details, and retrieving code examples. No overlap or ambiguity.
All tool names follow a consistent verb_noun pattern in snake_case (get_component_api, get_component_examples, list_components). No deviations.
Three tools is well-scoped for a UI component library documentation server. They cover overview, detailed API, and examples without being excessive.
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
Related MCP Connectors
MCP server for querying Forkast documentation
MCP server for stocksense-ai documentation, generated by doc2mcp.
Augments MCP Server - A comprehensive framework documentation provider for Claude Code
Related MCP Servers
- AlicenseAqualityDmaintenanceHelps 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.4551 npm60MIT
- AlicenseAqualityCmaintenanceMCP 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.4MIT
- AlicenseBqualityDmaintenanceAn 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.71MIT
- FlicenseNot gradedqualityDmaintenanceMCP server to query and render the Doggie UI design system's Storybook documentation, enabling component search, URL rendering, and natural language questions.-