Vuetify MCP Server

什么是 Vuetify MCP Server？

Vuetify MCP Server 是 Vuetify 团队推出的官方托管 MCP 端点，为 AI 编程助手提供准确的 Vuetify 组件 API、文档指南和版本升级规则。它运行在 https://mcp.vuetifyjs.com/mcp，无需账号或 API 密钥。

Vuetify 是一个面向 Vue 的 Material Design 组件框架。Vuetify MCP 服务器不再让助手凭记忆猜测属性，而是让它读取指定 Vuetify 版本的真实 API 类型、获取安装和功能指南、查看发布说明，并按结构化步骤完成从 Vuetify 2 到 3、从 3 到 4 的迁移。它还覆盖无头元框架 @vuetify/v0 及其组合式函数和组件。

如何使用 Vuetify MCP Server？

公共端点为 https://mcp.vuetifyjs.com/mcp（Streamable HTTP，无需认证）。README 还记载了第二个地址 https://mcp.vuetifyjs.com/one，它使用 Vuetify One OAuth，为订阅用户提供更广泛的 Vuetify One 生态。除非你订阅了 Vuetify One，否则请使用 /mcp。

Claude Code

claude mcp add --transport http vuetify-mcp https://mcp.vuetifyjs.com/mcp

可选，适用于 Vuetify One 订阅用户（登录会在浏览器中完成）：

claude mcp add --transport http vuetify-one https://mcp.vuetifyjs.com/one

Claude Desktop 和 claude.ai

打开 Settings → Connectors → Add custom connector，命名为“Vuetify”，并粘贴 https://mcp.vuetifyjs.com/mcp。

Cursor

添加到 ~/.cursor/mcp.json：

{
  "mcpServers": {
    "vuetify-mcp": { "url": "https://mcp.vuetifyjs.com/mcp" }
  }
}

VS Code

添加到 .vscode/mcp.json：

{
  "servers": {
    "vuetify-mcp": { "type": "http", "url": "https://mcp.vuetifyjs.com/mcp" }
  }
}

本地运行

README 还介绍了用 npx -y @vuetify/mcp 在本地运行服务器，以及交互式配置工具 npx -y @vuetify/mcp config --remote，它会检测 VS Code、Claude、Cursor、Trae 和 Windsurf，并自动写入托管配置。

Vuetify MCP Server 的主要功能

• 由 Vuetify 团队维护的官方服务器，采用 MIT 许可证。
• 托管端点无需登录，可用于任何支持远程 MCP 的客户端。
• 按版本查询组件和指令 API。
• 安装指南、功能指南、常见问题、导出符号和发布说明。
• 适用于 v1.5→v2、v2→v3 和 v3→v4 的可机器执行的升级计划与规则，支持多跳路径。
• 覆盖 @vuetify/v0 的无头组合式函数和组件。
• 面向订阅用户的可选 Vuetify One 端点（OAuth）。

Vuetify MCP Server 工具

对托管端点的探测返回了 28 个工具，分为五组：

• 按版本查询 API —— get_vuetify_api_by_version、get_component_api_by_version 和 get_directive_api_by_version 返回特定 Vuetify 版本的 API 类型；get_exposed_exports 列出 npm 包的导出内容。
• 文档与指南 —— get_installation_guide、get_feature_guides、get_feature_guide、get_frequently_asked_questions、get_release_notes_by_version 和 get_vuetify_one_installation_guide。
• 升级与迁移 —— get_upgrade_plan 解析多跳迁移（v2→v4 会拆为 v2→v3→v4），get_upgrade_rules 返回 grep 模式、替换映射和 codemod 提示，get_migration_receipt_schema 定义代理汇报结果的格式。针对 Vuetify 2 到 3，还有 get_v3_upgrade_playbook、get_v3_breaking_changes、get_v2_to_v3_component_map 和 get_v3_upgrade_baseline_recipe（Playwright 基线方案）。get_v4_breaking_changes 已标记为弃用，建议改用 get_upgrade_rules。
• Vuetify0（无头） —— get_vuetify0_composable_list、get_vuetify0_component_list、get_vuetify0_composable_guide、get_vuetify0_component_guide、get_vuetify0_exports_list、get_vuetify0_skill 以及安装和包指南。
• 问题反馈 —— create_bug_report 生成指向 Vuetify 问题站点的链接，已预选仓库和报告类型。

Vuetify MCP Server 的使用场景

• 使用正确属性生成组件：“用 Vuetify 3 API 构建一个支持服务端分页的 VDataTable。”
• 规划迁移：“制定把这个应用从 Vuetify 2 升级到 3 的计划，然后列出布局代码中的破坏性变更。”
• 查看变更：“最新的 Vuetify 3 发布说明有哪些变化？”
• 搭建项目：“如何在 Nuxt 应用中安装 Vuetify？”
• 基于 @vuetify/v0 构建自定义设计系统：“哪些 v0 组合式函数负责选择逻辑，如何使用？”
• 提交缺陷：“为这个渲染问题准备一个 Vuetify 缺陷报告链接。”

Vuetify MCP Server 常见问题排查

• CLI 命令用错了客户端。 README 指出 claude CLI 是 Claude Code，而不是 Claude Desktop。在 Claude Desktop 中请改为添加自定义连接器。
• 意外要求授权。 你可能添加的是 /one。公共文档工具请使用 /mcp；/one 面向 Vuetify One 订阅用户。
• 不要粘贴 API 密钥。 README 说明不使用 API 密钥；公共端点无需密钥，/one 使用 OAuth。
• 客户端不支持远程 MCP。 改用 npx -y @vuetify/mcp 在本地运行服务器。