Nuxt MCP 服务器

在你的 AI 助手中使用支持模型上下文协议(MCP)的 Nuxt 文档。

什么是 MCP?

MCP(Model Context Protocol,模型上下文协议)是一种标准化协议,使 AI 助手能够访问外部数据源和工具。Nuxt 提供了一个 MCP 服务器,允许像 Claude Code、Cursor 和 Windsurf 这样的 AI 助手直接访问文档、博客文章和部署指南。

该 MCP 服务器提供结构化访问 Nuxt 文档的能力,使 AI 工具更容易理解并协助 Nuxt 开发。

资源

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

  • resource://nuxt-com/documentation-pages:浏览所有可用的文档页面(默认使用 v4.x 版本)
  • resource://nuxt-com/blog-posts:浏览所有 Nuxt 博客文章,包括版本发布和教程
  • resource://nuxt-com/deploy-providers:浏览所有部署提供商和托管平台

你可以通过使用像 Claude Code 这样的工具,配合 @ 符号来访问这些资源。

工具

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

文档

  • list_documentation_pages: 列出所有可用的 Nuxt 文档页面及其分类和基本信息。支持版本筛选(3.x、4.x、5.x 或全部)
  • get_documentation_page: 通过路径检索文档页面内容和详情
  • get_getting_started_guide: 获取特定 Nuxt 版本的入门指南

博客

  • list_blog_posts:列出所有 Nuxt 博客文章及其元数据,包括日期、分类和标签
  • get_blog_post:通过路径检索博客文章内容和详情

部署

  • list_deploy_providers:列出所有 Nuxt 应用的部署提供商和托管平台
  • get_deploy_provider:通过路径检索部署提供商详情和使用说明

模块

  • list_modules: 列出所有可用的 Nuxt 模块,可按下载量、星标数或日期进行可选筛选和排序
  • get_module: 检索特定模块的完整详情,包括 README、兼容性、维护者和统计信息

更新日志

  • get_changelog: 检索 Nuxt 核心和官方模块的最新发布信息

提示

Nuxt MCP 服务器提供了针对常见工作流的引导式提示:

  • find_documentation_for_topic:查找某个特定主题或功能的最佳 Nuxt 文档
  • deployment_guide:获取某个特定托管提供商的部署指南
  • migration_help:获取 Nuxt 版本间迁移的帮助

你可以通过使用像 Claude Code 这样的工具,配合 / 符号来访问这些提示。

设置

Nuxt MCP 服务器使用 HTTP 传输协议,且可安装在不同的 AI 助手中。

ChatGPT

自定义连接器(使用 MCP)可在 ChatGPT Pro 和 Plus 账户网页版中使用。

按照以下步骤在 ChatGPT 中设置 Nuxt 连接器:

  1. 启用开发者模式:
    • 前往设置 → 连接器 → 高级设置 → 开发者模式
  2. 打开 ChatGPT 设置
  3. 在连接器标签页中,新建连接器:
    • 命名为:Nuxt
    • MCP 服务器 URL:https://nuxt.com/mcp
    • 认证方式:
  4. 点击创建

Nuxt 连接器随后会出现在对话编辑器的“开发者模式”工具中。

Claude Code

确保已安装 Claude Code。 - 详见 Anthropic 文档 安装指南。

使用 CLI 命令添加服务器:

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

Claude Desktop

设置说明

  1. 打开 Claude Desktop,进入“设置” > “开发者”
  2. 点击“编辑配置”,将打开本地 Claude 目录
  3. 修改 claude_desktop_config.json 文件,添加你的自定义 MCP 服务器配置
    claude_desktop_config.json
    {
      "mcpServers": {
        "nuxt": {
          "command": "npx",
          "args": [
            "mcp-remote",
            "https://nuxt.com/mcp"
          ]
        }
      }
    }
    
  4. 重启 Claude Desktop 应用,Nuxt MCP 服务器应已注册。

Cursor

点击下面按钮,直接在 Cursor 中安装 Nuxt MCP 服务器:

安装 MCP 服务器

手动设置步骤:

  1. 打开 Cursor,进入“设置” > “工具与 MCP”
  2. 添加 Nuxt MCP 服务器配置

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

.cursor/mcp.json
{
  "mcpServers": {
    "nuxt": {
      "type": "http",
      "url": "https://nuxt.com/mcp"
    }
  }
}

Gemini CLI

  1. 定位你的 Gemini CLI 配置文件(通常是 ~/.gemini/settings.json,或以你的环境中指定的路径为准)。
  2. 将以下配置添加到你的 mcpServers 对象中:
~/.gemini/settings.json
{
  "mcpServers": {
    "nuxt": {
      "httpUrl": "https://nuxt.com/mcp"
    }
  }
}
  1. 重启你的终端会话或重新加载 CLI。Nuxt MCP 服务器工具现在即可使用。

Le Chat Mistral

  1. 导航至“智能” > “连接器”
  2. 点击“添加连接器”按钮,然后选择“自定义 MCP 连接器”
  3. 创建你的自定义 MCP 连接器:
    • 连接器名称:Nuxt
    • 服务器 URL:https://nuxt.com/mcp

Visual Studio Code

安装所需扩展 - 确保已安装 GitHub CopilotGitHub Copilot Chat 扩展。
  1. 打开 VS Code,调出命令面板(Ctrl/Cmd + Shift + P)
  2. 输入“Preferences: Open Workspace Settings (JSON)” 并选择
  3. 前往项目的 .vscode 文件夹(如果不存在则创建)
  4. 创建或编辑 mcp.json 文件,添加以下配置:
.vscode/mcp.json
{
  "servers": {
    "nuxt": {
      "type": "http",
      "url": "https://nuxt.com/mcp"
    }
  }
}

GitHub Copilot Agent

需要仓库管理员权限 以配置 GitHub Copilot 编码代理的 MCP 服务器。

如果你已在 VS Code 配置了 MCP 服务器(注意将 servers 键改为 mcpServers 以适配 GitHub Copilot Agent),你可以用类似配置为 Copilot 编码代理设定 MCP 服务器。需要添加 tools 键指定 Copilot 可用的工具。

步骤:

  1. 进入你的 GitHub 仓库
  2. 打开 设置 > 代码与自动化 > Copilot > 编码代理
  3. MCP 配置 区块,添加以下内容:
{
  "mcpServers": {
    "nuxt": {
      "type": "http",
      "url": "https://nuxt.com/mcp",
      "tools": ["*"]
    }
  }
}
  1. 点击 保存

验证配置

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

  1. 在仓库中新建一个 Issue 并分配给 Copilot
  2. 等待 Copilot 创建 Pull Request
  3. 在 PR 页面,点击“Copilot 开始工作”时间线事件中的 查看会话
  4. 点击右上角的省略号按钮(...),然后在侧边栏点击 Copilot
  5. 展开 启动 MCP 服务器 步骤,查看已配置的 Nuxt 工具

更多信息请见 使用 MCP 扩展 GitHub Copilot 编码代理

GitHub Copilot CLI

  1. 在交互模式下启动 GitHub Copilot CLI。
  2. 运行 /mcp add
  3. 在配置表单中填写:
    • 服务器名称nuxt
    • 服务器类型HTTP
    • URLhttps://nuxt.com/mcp
    • HTTP 头:留空
    • 工具*
  4. Ctrl+S 保存。无需重启 CLI,MCP 服务器会立即可用。

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

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

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

更多详情请见 为 GitHub Copilot CLI 添加 MCP 服务器

Google Antigravity

  1. 通过编辑器代理面板顶部的“...”下拉菜单打开 MCP 商店。
  2. 点击“管理 MCP 服务器”
  3. 点击“查看原始配置”
  4. 使用你的自定义 MCP 服务器配置修改 mcp_config.json
mcp_config.json
{
  "mcpServers": {
    "nuxt": {
      "serverUrl": "https://nuxt.com/mcp"
    }
  }
}
  1. 返回“管理 MCP 服务器”标签页并点击“刷新”。Nuxt MCP 服务器现在应该会出现。

Windsurf

  1. 打开 Windsurf,进入“设置” > “Windsurf 设置” > “级联”
  2. 点击“管理 MCP”,然后选择“查看原始配置”
  3. 在 MCP 设置中添加以下配置:
.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "nuxt": {
      "serverUrl": "https://nuxt.com/mcp"
    }
  }
}

Zed

  1. 打开 Zed,进入“设置” > “打开设置”
  2. 打开 JSON 设置文件
  3. 在设置中添加如下上下文服务器配置:
.config/zed/settings.json
{
  "context_servers": {
    "nuxt": {
      "url": "https://nuxt.com/mcp"
    }
  }
}

Opencode

  1. 在项目根目录创建 opencode.json
  2. 添加以下配置:
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "nuxt": {
      "type": "remote",
      "url": "https://nuxt.com/mcp",
      "enabled": true
    }
  }
}

提示示例

配置完成后,你可以向 AI 助手提出如下问题:

  • “列出所有可用的 Nuxt 文档页面”
  • “获取入门文档”
  • “v3 和 v4 有什么区别?”
  • “我该如何部署到 Vercel?”
  • “展示最新的博客文章”
  • “帮助我从 Nuxt 3 迁移到 Nuxt 4”
  • “搜索有关 composables 的文档”
  • “查找 Cloudflare 的部署指南”

AI 助手将通过 MCP 服务器获取结构化 JSON 数据,并为 Nuxt 开发提供引导式支持。