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服务器提供以下按类别组织的工具：

搜索工具

• search-components：按名称、类别或意图搜索组件。匹配备用名称（如"segmented control"或"combobox"），并按相关性对结果进行排名。如果没有参数，则列出所有组件
• search-composables：按名称或描述搜索可组合项。不带参数，列出所有可组合项
• search-icons：在Iconify集合中搜索图标（默认为lucide）。以Nuxt UI使用的i-{prefix}-{name}格式返回图标名称

组件工具

• get-component：检索组件文档和详细信息。支持sections参数（usage、examples、api、theme、changelog），以仅获取特定部分并减少响应大小
• get-component-metadata：检索组件的元数据，包括prop、插槽和事件（轻量级，无文档内容）。默认情况下，prop是紧凑的，传递full: true以获取原始递归prop模式

文档工具

• search-documentation：按标题、描述或章节搜索文档页面。没有参数，列出所有页面。使用section进行筛选（例如"getting-started"、"components"）
• get-documentation-page：通过URL路径检索文档页面内容。支持headings参数以仅获取特定的h2部分（例如["Usage", "API"]）并减少响应大小

模板工具

• list-templates：列出所有可用的Nuxt UI模板，并带有可选的框架过滤
• get-template：检索模板的描述、功能和链接

示例工具

• list-examples：列出所有可用UI示例的名称
• get-example：检索UI示例的源代码

迁移工具

• get-migration-guide：检索此版本Nuxt UI的迁移指南和升级说明

限制可用工具

将可选的X-MCP-Tools HTTP标头设置为逗号分隔的工具名称列表，以仅显示助手需要的工具。这有助于减少助手中定义的上下文。

使用确切的kebab案例MCP工具名称，例如：

{
  "X-MCP-Tools": "search-components,get-component"
}

没有标头会公开所有工具，空标头不会公开任何工具，未知的工具名称会返回配置错误。

可用的插件

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

• find-component-for-usecase：为您的特定用例查找最佳组件
• implement-component-with-props：使用适当的props生成完整的组件实现
• setup-project-with-template：获取项目模板的引导设置说明

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

配置

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

ChatGPT

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

1. 启用开发者模式：
   • 进入“设置”>“连接器”>“高级设置”>“开发者模式”
2. 打开聊天GPT设置
3. 在“连接器”选项卡中，创建新连接器：
   • 给它一个名字：Nuxt UI
   • MCP服务器URL：https://ui.nuxt.com/mcp
   • 验证：None
4. 点击创建

Nuxt UI连接器将在稍后的对话中出现在作曲家的“开发者模式”工具中。

Claude码

使用CLI命令添加服务器：

claude mcp add --transport http nuxt-ui https://ui.nuxt.com/mcp

Claude桌面

安装说明：

1. 打开Claude桌面并导航到“设置”>“开发人员”。
2. 点击“编辑配置”。这将打开本地Claude目录。
3. 使用自定义MCP服务器配置修改claude_desktop_config.json文件。

{
  "mcpServers": {
    "nuxt-ui": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://ui.nuxt.com/mcp"
      ]
    }
  }
}

4. 重新启动Claude桌面应用程序。Nuxt UI MCP服务器现在应该已注册。

光标

快速安装：

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

手动设置说明：

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

或者在项目根目录下手动创建/更新.cursor/mcp.json：

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

Gemini CLI

安装说明：

1. 找到您的Gemini CLI配置文件（通常为configuration/. gemini/settings.json或在您的环境中指定）。
2. 将以下配置添加到mcpServers对象：

{
  "mcpServers": {
    "nuxt-ui": {
      "httpUrl": "https://ui.nuxt.com/mcp"
    }
  }
}

3. 重新启动您的终端会话或重新加载CLI。现在可以使用Nuxt UI MCP服务器工具。

GitHub副驾驶代理

如果您已经在Visual Studio Code中配置了MCP服务器，请将servers密钥替换为mcpServers，并添加一个tools密钥以指定Copilot可以使用哪些工具。

安装说明：

1. 导航到GitHub存储库
2. 转到设置> 编码和自动化> 复制> 编码代理
3. 在“MCP配置”部分中，添加以下配置：

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

4. 单击保存

验证配置：

要验证MCP服务器是否配置正确，请执行以下操作：

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

如需了解更多关于使用MCP和GitHub Copilot编码代理的信息，请参阅使用MCP扩展编码代理。

GitHub Copilot命令行界面

安装说明：

1. 在交互模式下启动GitHub Copilot CLI。
2. 运行/mcp add。
3. 在配置表单中填写以下内容： 服务器名称： 服务器类型： 网址：
   • HTTP Headers：留空
   • 工具：*
4. 按Ctrl + S保存。MCP服务器立即可用，无需重新启动CLI。

或者直接将服务器添加到~/.copilot/mcp-config.json：

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

使用/mcp show确认服务器已配置且可用。

有关更多详细信息，请参阅为GitHub Copilot CLI添加MCP服务器。

Google反重力

安装说明：

1. 通过编辑器代理面板顶部的"."按钮打开MCP商店。
2. 点击"管理MCP服务器"
3. 点击"查看原始配置"
4. 使用自定义MCP服务器配置修改mcp_config.json：

{
  "mcpServers": {
    "nuxt-ui": {
      "serverUrl": "https://ui.nuxt.com/mcp"
    }
  }
}

5. 返回到"管理MCP服务器"选项卡，然后单击"刷新"。Nuxt UI MCP服务器现在应该出现。

Le聊天Mistral

安装说明：

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

OpenCode

安装说明：

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

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

Visual Studio代码

安装说明：

1. 打开VS代码并访问命令行（Ctrl/Cmd + Shift + P）
2. 键入“首选项：打开工作区设置（JSON）”并选择它
3. 导航到项目的.vscode文件夹，如果不存在，则创建一个
4. 使用以下配置创建或编辑mcp.json文件：

{
  "servers": {
    "nuxt-ui": {
      "type": "http",
      "url": "https://ui.nuxt.com/mcp",
      "headers": {
        "X-MCP-Tools": "search-components,get-component"
      }
    }
  }
}

删除headers条目以使所有Nuxt UI MCP工具可用。

冲浪

安装说明：

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

{
  "mcpServers": {
    "nuxt-ui": {
      "serverUrl": "https://ui.nuxt.com/mcp"
    }
  }
}

Zed

安装说明：

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

{
  "context_servers": {
    "nuxt-ui": {
      "url": "https://ui.nuxt.com/mcp"
    }
  }
}

使用示例

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

• “列出所有可用的Nuxt UI组件”
• “获取按钮组件文档”
• “仅显示按钮用法示例”
• “Input接受什么道具？”
• “查找表单相关组件”
• “在lucide中搜索箭头图标”
• “列出仪表板模板”
• “获取模板设置说明”
• “显示安装指南”
• “获取迁移指南”
• “列出所有示例”
• “获取ContactForm示例代码”

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