MCP 服务器

什么是 MCP？

MCP（模型上下文协议）是一个标准化协议，使 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：检索组件的详细元数据，包括 props、slots 和 events
• 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：生成带有正确 props 的完整组件实现
• 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
   • 认证：无
4. 点击“创建”

Nuxt UI 连接器将在对话期间出现在编写器（composer）的“开发者模式”工具中。

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"
    }
  }
}

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. 输入“首选项：打开工作区设置 (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
    },
  }
}

使用示例

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

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

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