---
title: "Nuxt MCP 服务器"
description: "在你的 AI 助手中使用支持模型上下文协议（MCP）的 Nuxt 文档。"
canonical_url: "https://nuxt.zhcndoc.com/docs/4.x/guide/ai/mcp"
---
# 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 核心和官方模块的最新版本发布信息

## 限制可用工具

设置可选的 `X-MCP-Tools` HTTP 标头，其值为以逗号分隔的工具名称列表，即可仅公开助手需要的工具。这样可以减少发送给助手的工具上下文。

使用服务器返回的 MCP 工具名称对应的确切短横线命名格式，例如：

```json
{
  "X-MCP-Tools": "list-documentation-pages,get-documentation-page"
}
```

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

## 提示

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

- **`find-documentation-for-topic`**：查找特定主题或功能对应的最佳 Nuxt 文档
- **`deployment-guide`**：获取特定托管提供商的部署说明
- **`migration-help`**：获取 Nuxt 版本迁移方面的帮助

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

## 设置

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

### ChatGPT

::note{icon="i-lucide-info"}
**自定义连接器（使用 MCP）可在 ChatGPT Pro 和 Plus 账户网页版中使用。**
::

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

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

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

### Claude Code

::note{icon="i-lucide-info"}
**确保已安装 Claude Code。** - 详见 [Anthropic 文档](https://docs.claude.com/en/docs/claude-code/quickstart) 安装指南。
::

使用 CLI 命令添加服务器：

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

### Claude Desktop

#### 设置说明

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

### Cursor

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

::u-button
```yaml [props]
to: cursor://anysphere.cursor-deeplink/mcp/install?name=nuxt&config=eyJ0eXBlIjoiaHR0cCIsInVybCI6Imh0dHBzOi8vbnV4dC5jb20vbWNwIn0%3D
label: 安装 MCP 服务器
color: neutral
icon: i-custom-cursor
```
::

手动设置步骤：

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

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

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

### Gemini CLI

1. 找到 Gemini CLI 配置文件（通常位于 `~/.gemini/settings.json`，或位于你的环境中指定的位置）。
2. 将以下配置添加到 `mcpServers` 对象中：

```json [~/.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

::note{icon="i-lucide-info"}
**安装所需扩展** - 确保已安装 [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) 和 [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) 扩展。
::

1. 打开 VS Code，调出命令面板（Ctrl/Cmd + Shift + P）
2. 输入“Preferences: Open Workspace Settings (JSON)” 并选择
3. 前往项目的 `.vscode` 文件夹（如果不存在则创建）
4. 创建或编辑 `mcp.json` 文件，添加以下配置：

```json [.vscode/mcp.json]
{
  "servers": {
    "nuxt": {
      "type": "http",
      "url": "https://nuxt.com/mcp"
    }
  }
}
```

### GitHub Copilot Agent

::note{icon="i-lucide-info"}
**需要仓库管理员权限** 以配置 GitHub Copilot 编码代理的 MCP 服务器。
::

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

步骤：

1. 进入你的 GitHub 仓库
2. 打开 **设置** > **代码与自动化** > **Copilot** > **编码代理**
3. 在 **MCP 配置** 区块，添加以下内容：

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

4. 点击 **保存**

#### 验证配置

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

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

更多信息请见 [使用 MCP 扩展 GitHub Copilot 编码代理](https://docs.github.com/en/copilot/how-tos/use-copilot-agents/coding-agent/extend-coding-agent-with-mcp)。

### GitHub Copilot CLI

1. 以交互模式启动 GitHub Copilot CLI。
2. 运行 `/mcp add`。
3. 在配置表单中填写：
   - **服务器名称**：`nuxt`
   - **服务器类型**：`HTTP`
   - **URL**：`https://nuxt.com/mcp`
   - **HTTP 标头**：留空
   - **工具**：`*`
4. 按 <kbd>Ctrl</kbd>+<kbd>S</kbd> 保存。MCP 服务器会立即可用，无需重启 CLI。

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

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

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

更多详情请见 [为 GitHub Copilot CLI 添加 MCP 服务器](https://docs.github.com/en/copilot/how-tos/copilot-cli/customize-copilot/add-mcp-servers)。

### Google Antigravity

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

```json [mcp_config.json]
{
  "mcpServers": {
    "nuxt": {
      "serverUrl": "https://nuxt.com/mcp"
    }
  }
}
```

1. 返回“管理 MCP 服务器”标签页并点击“刷新”。此时应会显示 Nuxt MCP 服务器。

### Windsurf

1. 打开 Windsurf，进入“设置” > “Windsurf 设置” > “级联”
2. 点击“管理 MCP”，然后选择“查看原始配置”
3. 在 MCP 设置中添加以下配置：

```json [.codeium/windsurf/mcp_config.json]
{
  "mcpServers": {
    "nuxt": {
      "serverUrl": "https://nuxt.com/mcp"
    }
  }
}
```

### Zed

1. 打开 Zed，进入“设置” > “打开设置”
2. 打开 JSON 设置文件
3. 在设置中添加如下上下文服务器配置：

```json [.config/zed/settings.json]
{
  "context_servers": {
    "nuxt": {
      "url": "https://nuxt.com/mcp"
    }
  }
}
```

### Opencode

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

```json
{
  "$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 开发提供引导式支持。


## Sitemap

See the full [sitemap](https://nuxt.zhcndoc.com/sitemap.md) for all pages.