Nuxt MCP 服务器
什么是 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 中设置 Nuxt 连接器:
- 启用开发者模式
- 前往 设置 → 连接器 → 高级设置 → 开发者模式
- 打开 ChatGPT 设置
- 在“连接器”选项卡中,创建新连接器
- 名称:
Nuxt - MCP 服务器 URL:
https://nuxtjs.org.cn/mcp - 身份验证:
None
- 名称:
- 点击 创建
Nuxt 连接器稍后将出现在对话框的“开发者模式”工具中。
Claude Code
使用 CLI 命令添加服务器
claude mcp add --transport http nuxt-remote https://nuxtjs.org.cn/mcp
Claude Desktop
设置说明
- 打开 Claude Desktop 并导航至“Settings”(设置) > “Developer”(开发者)。
- 点击“Edit Config”。这将打开本地 Claude 目录。
- 使用你的自定义 MCP 服务器配置修改
claude_desktop_config.json文件。claude_desktop_config.json{ "mcpServers": { "nuxt": { "command": "npx", "args": [ "mcp-remote", "https://nuxtjs.org.cn/mcp" ] } } } - 重启 Claude Desktop 应用。Nuxt MCP 服务器现在应已注册。
Cursor
点击下方按钮直接在 Cursor 中安装 Nuxt MCP 服务器
安装 MCP 服务器如需手动设置,请按照以下步骤操作:
- 打开 Cursor 并前往“Settings”(设置) > “Tools & MCP”
- 添加 Nuxt MCP 服务器配置
或者在你的项目根目录手动创建/更新 .cursor/mcp.json
{
"mcpServers": {
"nuxt": {
"type": "http",
"url": "https://nuxtjs.org.cn/mcp"
}
}
}
Le Chat Mistral
- 导航至“Intelligence”(智能) > “Connectors”(连接器)
- 点击“Add Connector”(添加连接器)按钮,然后选择“Custom MCP Connector”(自定义 MCP 连接器)
- 创建你的自定义 MCP 连接器
- 连接器名称:
Nuxt - 连接器服务器:
https://nuxtjs.org.cn/mcp
- 连接器名称:
Visual Studio Code
- 打开 VS Code 并访问命令面板 (Ctrl/Cmd + Shift + P)
- 输入“Preferences: Open Workspace Settings (JSON)”并选择它
- 导航到项目的
.vscode文件夹(如果不存在则创建一个) - 创建或编辑
mcp.json文件,并填入以下配置
{
"servers": {
"nuxt": {
"type": "http",
"url": "https://nuxtjs.org.cn/mcp"
}
}
}
GitHub Copilot Agent
如果你已经在 VS Code 中配置了 MCP 服务器(对于 GitHub Copilot Agent,请将 servers 键替换为 mcpServers),你可以利用类似的配置。你需要添加一个 tools 键来指定哪些工具对 Copilot 可用。
- 导航至你的 GitHub 仓库
- 前往 Settings(设置) > Code & automation(代码与自动化) > Copilot > Coding agent(编码代理)
- 在 MCP configuration(MCP 配置)部分,添加以下配置
{ "mcpServers": { "nuxt": { "type": "http", "url": "https://nuxtjs.org.cn/mcp", "tools": ["*"] } } } - 点击 Save(保存)
验证配置
要验证 MCP 服务器配置是否正确:
- 在仓库中创建一个议题(Issue)并将其指派给 Copilot
- 等待 Copilot 创建拉取请求(Pull Request)
- 在拉取请求中,点击“Copilot started work”时间线事件中的 View session(查看会话)
- 点击右上角的省略号按钮 (...),然后在侧边栏中点击 Copilot
- 展开 Start MCP Servers 步骤以查看已配置的 Nuxt 工具
有关将 MCP 与 GitHub Copilot 编码代理配合使用的更多信息,请参阅Extend coding agent with MCP(使用 MCP 扩展编码代理).
Windsurf
- 打开 Windsurf 并导航至“Settings” > “Windsurf Settings” > “Cascade”
- 点击“Manage MCPs”按钮,然后选择“View raw config”选项
- 将以下配置添加到你的 MCP 设置中
{
"mcpServers": {
"nuxt": {
"type": "http",
"url": "https://nuxtjs.org.cn/mcp"
}
}
}
Zed
- 打开 Zed 并前往“Settings” > “Open Settings”
- 导航至 JSON 设置文件
- 将以下上下文服务器配置添加到你的设置中
{
"context_servers": {
"nuxt": {
"source": "custom",
"command": "npx",
"args": ["mcp-remote", "https://nuxtjs.org.cn/mcp"],
"env": {}
}
}
}
Opencode
- 在项目根目录创建
opencode.json - 添加以下配置
{
"$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 开发提供引导式帮助。