Nuxt MCP 服务器

通过模型上下文协议(Model Context Protocol)支持,在你的 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:通过路径获取部署提供商的详情和说明

提示词(Prompts)

Nuxt MCP 服务器为常见工作流程提供引导式提示词:

  • find_documentation_for_topic:查找特定主题或功能的最佳 Nuxt 文档
  • deployment_guide:获取特定托管平台的部署说明
  • migration_help:获取关于 Nuxt 版本迁移的帮助

你可以在 Claude Code 等工具中使用 / 来访问这些提示词。

设置

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

ChatGPT

ChatGPT 的 Pro 和 Plus 账户网页版支持使用 MCP 的自定义连接器。

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

  1. 启用开发者模式
    • 前往 设置 → 连接器 → 高级设置 → 开发者模式
  2. 打开 ChatGPT 设置
  3. 在“连接器”选项卡中,创建新连接器
    • 名称:Nuxt
    • MCP 服务器 URL:https://nuxtjs.org.cn/mcp
    • 身份验证:None
  4. 点击 创建

Nuxt 连接器稍后将出现在对话框的“开发者模式”工具中。

Claude Code

确保已安装 Claude Code - 请访问Anthropic 文档查看安装说明。

使用 CLI 命令添加服务器

claude mcp add --transport http nuxt-remote https://nuxtjs.org.cn/mcp

Claude Desktop

设置说明

  1. 打开 Claude Desktop 并导航至“Settings”(设置) > “Developer”(开发者)。
  2. 点击“Edit Config”。这将打开本地 Claude 目录。
  3. 使用你的自定义 MCP 服务器配置修改 claude_desktop_config.json 文件。
    claude_desktop_config.json
    {
      "mcpServers": {
        "nuxt": {
          "command": "npx",
          "args": [
            "mcp-remote",
            "https://nuxtjs.org.cn/mcp"
          ]
        }
      }
    }
    
  4. 重启 Claude Desktop 应用。Nuxt MCP 服务器现在应已注册。

Cursor

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

安装 MCP 服务器

如需手动设置,请按照以下步骤操作:

  1. 打开 Cursor 并前往“Settings”(设置) > “Tools & MCP”
  2. 添加 Nuxt MCP 服务器配置

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

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

Le Chat Mistral

  1. 导航至“Intelligence”(智能) > “Connectors”(连接器)
  2. 点击“Add Connector”(添加连接器)按钮,然后选择“Custom MCP Connector”(自定义 MCP 连接器)
  3. 创建你的自定义 MCP 连接器
    • 连接器名称:Nuxt
    • 连接器服务器:https://nuxtjs.org.cn/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://nuxtjs.org.cn/mcp"
    }
  }
}

GitHub Copilot Agent

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

如果你已经在 VS Code 中配置了 MCP 服务器(对于 GitHub Copilot Agent,请将 servers 键替换为 mcpServers),你可以利用类似的配置。你需要添加一个 tools 键来指定哪些工具对 Copilot 可用。

  1. 导航至你的 GitHub 仓库
  2. 前往 Settings(设置) > Code & automation(代码与自动化) > Copilot > Coding agent(编码代理)
  3. MCP configuration(MCP 配置)部分,添加以下配置
    {
      "mcpServers": {
        "nuxt": {
          "type": "http",
          "url": "https://nuxtjs.org.cn/mcp",
          "tools": ["*"]
        }
      }
    }
    
  4. 点击 Save(保存)

验证配置

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

  1. 在仓库中创建一个议题(Issue)并将其指派给 Copilot
  2. 等待 Copilot 创建拉取请求(Pull Request)
  3. 在拉取请求中,点击“Copilot started work”时间线事件中的 View session(查看会话)
  4. 点击右上角的省略号按钮 (...),然后在侧边栏中点击 Copilot
  5. 展开 Start MCP Servers 步骤以查看已配置的 Nuxt 工具

有关将 MCP 与 GitHub Copilot 编码代理配合使用的更多信息,请参阅Extend coding agent with MCP(使用 MCP 扩展编码代理).

Windsurf

  1. 打开 Windsurf 并导航至“Settings” > “Windsurf Settings” > “Cascade”
  2. 点击“Manage MCPs”按钮,然后选择“View raw config”选项
  3. 将以下配置添加到你的 MCP 设置中
.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "nuxt": {
      "type": "http",
      "url": "https://nuxtjs.org.cn/mcp"
    }
  }
}

Zed

  1. 打开 Zed 并前往“Settings” > “Open Settings”
  2. 导航至 JSON 设置文件
  3. 将以下上下文服务器配置添加到你的设置中
.config/zed/settings.json
{
  "context_servers": {
    "nuxt": {
      "source": "custom",
      "command": "npx",
      "args": ["mcp-remote", "https://nuxtjs.org.cn/mcp"],
      "env": {}
    }
  }
}

Opencode

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

提示词示例

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

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

AI 助手将使用 MCP 服务器获取结构化的 JSON 数据,并为 Nuxt 开发提供引导式帮助。