---
title: "Nuxt MCP 服务器"
description: "在您的 AI 助手中使用带有模型上下文协议支持的 Nuxt 文档。"
canonical_url: "https://nuxt.zhcndoc.com/docs/3.x/guide/ai/mcp"
---
# Nuxt MCP 服务器

> 在您的 AI 助手中使用带有模型上下文协议支持的 Nuxt 文档。

## 什么是 MCP？

MCP（模型上下文协议）是一种标准化协议，使 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

::note{icon="i-lucide-info"}
**针对网页版 ChatGPT Pro 和 Plus 账户，支持使用 MCP 的自定义连接器。**
::

请按照以下步骤在 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://code.claude.com/docs/en/quickstart) 了解安装说明。
::

使用 CLI 命令添加服务器：

```bash
claude mcp add --transport http nuxt-remote 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"
    }
  }
}
```

### Le Chat Mistral

1. 进入“智能” > “连接器”
2. 点击“添加连接器”按钮，选择“自定义 MCP 连接器”
3. 创建自定义 MCP 连接器：
   - 连接器名称：`Nuxt`
   - 连接器服务器：`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 代理

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

如果您已经在 VS Code 中配置了 MCP 服务器（将 `servers` 键替换为 `mcpServers` 用于 GitHub Copilot 代理），可以为 GitHub Copilot 编码代理使用类似配置。需要添加 `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 创建拉取请求
3. 在拉取请求中，点击“Copilot 开始工作”时间线事件的 **查看会话**
4. 点击右上角的省略号按钮（**...**），然后在侧边栏点击 **Copilot**
5. 展开 **启动 MCP 服务器** 步骤，查看已配置的 Nuxt 工具

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

### Windsurf

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

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

### Zed

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

```json [.config/zed/settings.json]
{
  "context_servers": {
    "nuxt": {
      "source": "custom",
      "command": "npx",
      "args": ["mcp-remote", "https://nuxt.com/mcp"],
      "env": {}
    }
  }
}
```

### 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.