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 或全部）
  • get_documentation_page：通过路径检索文档页面内容和详情
  • get_getting_started_guide：获取某个特定 Nuxt 版本的快速入门指南

博客

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

部署

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

提示

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-remote https://nuxt.com/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"
    }
  }
}

Le Chat Mistral

  1. 进入“智能” > “连接器”
  2. 点击“添加连接器”，选择“自定义 MCP 连接器”
  3. 创建你的自定义 MCP 连接器：
    • 连接器名称：Nuxt
    • 连接器服务器：https://nuxt.com/mcp

Visual Studio Code

安装所需扩展 - 确保已安装 GitHub Copilot 和 GitHub 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 编码代理。

Windsurf

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

Zed

  1. 打开 Zed，进入“设置” > “打开设置”
  2. 打开 JSON 设置文件
  3. 在设置中添加如下上下文服务器配置：
.config/zed/settings.json
{
  "context_servers": {
    "nuxt": {
      "source": "custom",
      "command": "npx",
      "args": ["mcp-remote", "https://nuxt.com/mcp"],
      "env": {}
    }
  }
}

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 开发提供引导式支持。