@sdata/web-vue-mcp

@sdata/web-vue-mcp

SD Design Vue 组件库的 Model Context Protocol (MCP) 服务。安装后，AI 助手可以直接查询 SD Design 组件的分类、Props、Events、Slots、导入方式与文档链接，在帮你写 Vue 代码时给出准确、最新的组件用法。

这是什么

MCP 是一个让 AI 模型连接外部工具与数据源的开放协议。本服务把 SD Design 组件库的 API 元数据暴露给 AI 助手，使其在编码时无需盲猜组件 Props，而是基于组件库真实导出的接口回答。

服务基于 MCP TypeScript SDK v2，支持当前的 2026-07-28 协议，并继续兼容使用 initialize 握手的旧版客户端。

SFC API 由 vue-docgen-api 从源码提取；对导入的运行时 props、第三方类型和服务 API，使用工作区 TypeScript 编译器 API 读取已有契约，覆盖全部文档化组件。

安装

Claude Code

# 添加到用户级配置（所有项目可用）
claude mcp add sd-design -s user -- npx -y @sdata/web-vue-mcp

# 或仅添加到当前项目
claude mcp add sd-design -- npx -y @sdata/web-vue-mcp

也可以使用 JSON 格式：

claude mcp add-json sd-design '{"command":"npx","args":["-y","@sdata/web-vue-mcp"]}' -s user

常用命令：

claude mcp list            # 列出所有 MCP 服务
claude mcp get sd-design   # 查看服务详情
claude mcp remove sd-design # 移除服务

添加后开启新的 Claude Code 会话，使用 /mcp 验证连接。

参考：Claude Code MCP 文档

VS Code (GitHub Copilot)

在项目下创建 .vscode/mcp.json：

{
  "servers": {
    "sd-design": {
      "command": "npx",
      "args": ["-y", "@sdata/web-vue-mcp"]
    }
  }
}

添加后在 Copilot Chat 的 Agent 模式 下即可使用。

参考：VS Code MCP 文档

OpenAI Codex CLI

codex mcp add sd-design -- npx -y @sdata/web-vue-mcp

或编辑 ~/.codex/config.toml：

[mcp_servers.sd-design]
command = "npx"
args = ["-y", "@sdata/web-vue-mcp"]

参考：OpenAI Codex MCP 文档

Zed

编辑 Zed 设置文件（macOS：~/Library/Application Support/Zed/settings.json；Linux：~/.config/zed/settings.json）：

{
  "context_servers": {
    "sd-design": {
      "command": {
        "path": "npx",
        "args": ["-y", "@sdata/web-vue-mcp"]
      }
    }
  }
}

参考：Zed MCP 文档

本地开发

直接用 npx 运行（与上文安装方式一致）：

npx -y @sdata/web-vue-mcp

在本仓库内开发：

# 重新生成组件数据（当 web-vue 组件源码或文档侧边栏变更后执行）
pnpm --filter @sdata/web-vue-mcp run gen

# 构建 dist/index.js
pnpm --filter @sdata/web-vue-mcp run build

# 类型检查
pnpm --filter @sdata/web-vue-mcp run typecheck

# 构建后分别以 2026-07-28 和旧版协议运行 stdio 集成测试
pnpm --filter @sdata/web-vue-mcp run test

可用工具

示例提问

安装后，可以试着这样问 AI 助手：

• "SD Design 的 Button 组件有哪些 props？"
• "帮我用 sd-table 实现一个带分页的表格"
• "哪些组件支持 size 属性？"
• "比较一下 Select 和 AutoComplete"
• "日期选择器怎么用？给我一个示例"
• "我想做一个上传组件，需要导入什么？"

数据说明

• 组件清单、分类与标题来自文档站侧边栏（sd-vue-docs/src/generated/docs-sidebar.ts）与各组件 MDX frontmatter。
• Props / Events / Slots 由 vue-docgen-api 提取；scripts/type-api.ts 从 components/index.ts 的公开导出和 SFC defineProps 自动发现契约，并读取同目录下的 组件名Props / 组件名Slots；没有 SFC 的服务按 组件名Config + 组件名Method 识别。不维护逐组件清单，也不复制属性定义。
• Message / Notification 标记为 kind: "service"，配置项和方法分别返回在 config、methods，不伪装成 SFC props。
• 没有同名组件的文档分组按真实公开导出自动展开；Clamp 文档展开为 LineClamp、RichLineClamp、InlineClamp、WrapClamp 四个真实组件；clamp / sd-clamp 查询兼容指向 LineClamp。
• 重新生成：pnpm --filter @sdata/web-vue-mcp run gen，产物为 data/components.json（build 时自动生成并内联进 dist/index.js，不提交到版本库）。

已知限制

补齐的 API 即使没有 @en 注释也会保留字段，缺失的描述为空。第三方组件未在本地声明的默认值为空，不推测上游默认值；Calendar 默认值从运行时 props 定义读取。需要具体行为和示例时，请参考返回的 docUrl。

环境要求

• Node.js 20+
• 任一受支持的 AI 工具（Claude Code、Codex、VS Code + Copilot、Zed 等）

相关链接

• SD Design 文档
• Model Context Protocol
• GitHub 仓库
• 问题反馈

许可证

AGPL-3.0-only