MCP 服务器

什么是 MCP？

MCP（Model Context Protocol）是一种标准化协议，它使 AI 助手能够访问外部数据源和工具。Nuxt UI 提供了一个 MCP 服务器，允许像 Claude Code、Cursor 和 Windsurf 这样的 AI 助手直接访问组件信息、源代码和使用示例。

MCP 服务器提供对我们组件库的结构化访问，使 AI 工具能够轻松理解并协助 Nuxt UI 的开发。

可用资源

Nuxt UI MCP 服务器提供以下资源供发现

• resource://nuxt-ui/components: 按类别浏览所有可用组件
• resource://nuxt-ui/composables: 按类别浏览所有可用可组合项
• resource://nuxt-ui/examples: 浏览所有可用代码示例
• resource://nuxt-ui/templates: 浏览所有可用项目模板
• resource://nuxt-ui/documentation-pages: 浏览所有可用文档页面

您可以通过使用 @ 在 Claude Code 等工具中访问这些资源。

可用工具

Nuxt UI MCP 服务器提供以下按类别组织的工具

组件工具

• list_components: 列出所有可用的 Nuxt UI 组件及其类别和基本信息
• list_composables: 列出所有可用的 Nuxt UI 可组合项及其类别和基本信息
• get_component: 检索组件文档和详细信息
• get_component_metadata: 检索组件的详细元数据，包括 prop、插槽和事件
• search_components_by_category: 按类别或文本过滤器搜索组件

模板工具

• list_templates: 列出所有可用的 Nuxt UI 模板，并可选择类别过滤
• get_template: 检索模板详细信息和设置说明

文档工具

• list_documentation_pages: 列出所有文档页面
• get_documentation_page: 按 URL 路径检索文档页面内容
• list_getting_started_guides: 列出所有入门指南和安装说明

示例工具

• list_examples: 列出所有可用的 UI 示例和代码演示
• get_example: 检索特定的 UI 示例实现代码和详细信息

迁移工具

• get_migration_guide: 检索特定版本的迁移指南和升级说明

可用提示

Nuxt UI MCP 服务器提供常见工作流的引导式提示

• find_component_for_usecase: 查找最适合您特定用例的组件
• implement_component_with_props: 生成具有正确 prop 的完整组件实现
• setup_project_with_template: 获取项目模板的引导式设置说明

您可以通过使用 / 在 Claude Code 等工具中访问这些资源。

配置

Nuxt UI MCP 服务器使用 HTTP 传输，并可在不同的 AI 助手中进行配置。

ChatGPT

按照以下步骤在 ChatGPT 中将 Nuxt UI 设置为连接器

1. 启用开发者模式
   • 转到“设置”→“连接器”→“高级设置”→“开发者模式”
2. 打开 ChatGPT 设置
3. 在“连接器”选项卡中，创建一个新连接器
   • 给它一个名称：Nuxt UI
   • MCP 服务器 URL：https://ui.nuxtjs.org.cn/mcp
   • 认证：None
4. 点击“创建”

Nuxt UI 连接器将在之后的对话中出现在编写器的“开发者模式”工具中。

Claude Code

使用 CLI 命令添加服务器

claude mcp add --transport http nuxt-ui-remote https://ui.nuxtjs.org.cn/mcp

Cursor

快速安装

点击下方按钮，直接在 Cursor 中安装 Nuxt UI MCP 服务器

手动设置说明

1. 打开 Cursor 并转到“设置”>“工具和 MCP”
2. 添加 Nuxt UI MCP 服务器配置

或者在您的项目根目录中手动创建/更新 .cursor/mcp.json

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxtjs.org.cn/mcp"
    }
  }
}

Google Antigravity

设置说明

1. 通过编辑器代理面板顶部的“...”下拉菜单打开 MCP 商店。
2. 点击“管理 MCP 服务器”
3. 点击“查看原始配置”
4. 使用您的自定义 MCP 服务器配置修改 mcp_config.json

{
  "mcpServers": {
    "nuxt-ui": {
      "serverUrl": "https://ui.nuxtjs.org.cn/mcp"
    }
  }
}

5. 返回“管理 MCP 服务器”选项卡并点击“刷新”。Nuxt UI MCP 服务器现在应该出现了。

Le Chat Mistral

设置说明

1. 导航到“智能”>“连接器”
2. 点击“添加连接器”按钮，然后选择“自定义 MCP 连接器”
3. 创建您的自定义 MCP 连接器
   • 连接器名称：NuxtUI
   • 连接器服务器：https://ui.nuxtjs.org.cn/mcp

Visual Studio Code

设置说明

1. 打开 VS Code 并访问命令面板 (Ctrl/Cmd + Shift + P)
2. 输入“Preferences: Open Workspace Settings (JSON)”并选择它
3. 导航到您的项目 .vscode 文件夹，如果不存在则创建一个
4. 创建或编辑 mcp.json 文件，其中包含以下配置

{
  "servers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxtjs.org.cn/mcp"
    }
  }
}

Windsurf

设置说明

1. 打开 Windsurf 并导航到“设置”>“Windsurf 设置”>“Cascade”
2. 点击“管理 MCPs”按钮，然后选择“查看原始配置”选项
3. 将以下配置添加到您的 MCP 设置中

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxtjs.org.cn/mcp"
    }
  }
}

Zed

设置说明

1. 打开 Zed 并转到“设置”>“打开设置”
2. 导航到 JSON 设置文件
3. 将以下上下文服务器配置添加到您的设置中

{
  "context_servers": {
    "nuxt-ui": {
      "source": "custom",
      "command": "npx",
      "args": ["mcp-remote", "https://ui.nuxtjs.org.cn/mcp"],
      "env": {}
    }
  }
}

Opencode

设置说明

1. 在您的项目根目录中，创建 opencode.json
2. 添加以下配置

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "nuxt-ui": {
      "type": "remote",
      "url": "https://ui.nuxtjs.org.cn/mcp",
      "enabled": true
    },
  }
}

GitHub Copilot Agent

如果您已在 VS Code 中配置了 MCP 服务器（对于 GitHub Copilot 代理，将 servers 键替换为 mcpServers），您可以利用类似的配置来配置 GitHub Copilot 编码代理。您需要添加一个 tools 键，指定 Copilot 可以使用的工具。

设置说明

1. 导航到您的 GitHub 仓库
2. 转到设置 > 代码与自动化 > Copilot > 编码代理
3. 在MCP 配置部分，添加以下配置

{
  "mcpServers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxtjs.org.cn/mcp",
      "tools": ["*"]
    }
  }
}

4. 点击“保存”

验证配置

要验证 MCP 服务器是否配置正确

1. 在您的仓库中创建一个问题并将其分配给 Copilot
2. 等待 Copilot 创建拉取请求
3. 在拉取请求中，点击“Copilot 已开始工作”时间线事件中的“查看会话”
4. 点击右上角的省略号按钮 (...)，然后在侧边栏中点击 Copilot
5. 展开“启动 MCP 服务器”步骤以查看配置的 Nuxt 工具

有关将 MCP 与 GitHub Copilot 编码代理结合使用的更多信息，请参阅使用 MCP 扩展编码代理.

使用示例

配置完成后，您可以向 AI 助手提出以下问题

• “列出所有可用的 Nuxt UI 组件”
• “获取 Button 组件文档”
• “Input 接受哪些 props？”
• “查找与表单相关的组件”
• “列出仪表盘模板”
• “获取模板设置说明”
• “显示安装指南”
• “获取 v4 迁移指南”
• “列出所有示例”
• “获取 ContactForm 示例代码”

AI 助手将使用 MCP 服务器获取结构化的 JSON 数据，并在开发过程中为 Nuxt UI 提供引导式帮助。