连接
概述
MCP 服务器运行后，您可以连接 Cursor、VS Code 和 ChatGPT 等 AI 助手，以使用您的工具、资源和提示词。
该模块还提供了组件和路由，帮助您的用户一键安装您的 MCP 服务器。
add-mcp
add-mcp CLI 可以一步将远程（可流式传输的 HTTP）MCP 服务器注册到 Cursor、Claude Code、VS Code、Codex 以及其他多个编程代理中。
使用与应用运行位置匹配的 URL：本地开发使用 http://…，生产环境使用 https://…（公共 MCP 端点应使用 HTTPS）。如果您在 nuxt.config 中更改了 mcp.route，请附加该路径而不是 /mcp。
npx add-mcp http://localhost:3000/mcp
npx add-mcp https://your-app.example.com/mcp
可在任意目录下运行该命令；它会更新代理配置文件（例如项目中的 .cursor/mcp.json）。有关 -a cursor、-y 或用于认证端点的 --header 等选项，请参阅 add-mcp 包文档。
与用户共享您的 MCP（生产环境）
部署 Nuxt 应用后，您需要为您的用户提供一个稳定的 MCP URL。他们将在助手中填入与 localhost 相同格式的 URL——仅主机和协议会发生变化。
需要发布的内容
| 您分享的内容 | 示例 |
|---|---|
| 公共 MCP 端点 | https://your-product.com/mcp |
| 自定义路由 | 如果 mcp.route 为 /api/mcp，则为 https://your-product.com/api/mcp |
在公共互联网上请优先使用 HTTPS。在添加自定义域名之前，使用托管服务商分配的 URL（例如 https://my-app.vercel.app/mcp）即可。
供用户使用的单行命令 (add-mcp)
将其记录在您的 README 或文档中，以便用户快速注册您的服务器：
npx add-mcp https://your-product.com/mcp
如果您的 MCP 需要身份验证，请记录所需的请求头，并引导用户使用 add-mcp --header 'Authorization: Bearer …'（或您服务商的格式）。
用于文档 / README 的按钮和徽章
为非 CLI 用户提供一键操作：
- Vue 或 MDC 中的
InstallButton— 将url设置为您的生产环境 MCP URL（参见下方使用https://my-app.com/mcp的示例）。 - README 徽章 — 可打开 IDE 安装程序并在 GitHub 或任何网站上正常工作的 Markdown 徽章。
适用于您的落地页或文档的示例：
可供用户复制的手动配置
与下方 IDE 部分 中的 JSON 相同，但使用您的实际 URL：
{
"url": "https://your-product.com/mcp"
}
Cursor 和 VS Code 期望将其放在各自的 mcpServers / servers 结构中——请参照 Cursor 和 VS Code 下的完整示例，并替换 localhost URL。
连接您的 IDE
以下步骤在开发时使用 localhost。若要为您的受众发布说明，请复用相同的模式，但将 URL 替换为您的生产环境 https://… URL——请参阅与用户共享您的 MCP（生产环境）。
Cursor
点击下方按钮将本地 MCP 服务器添加到 Cursor：
或手动将其添加到 Cursor 设置（~/.cursor/mcp.json）中：
{
"mcpServers": {
"my-nuxt-app": {
"url": "http://localhost:3000/mcp"
}
}
}
VS Code
点击下方按钮将本地 MCP 服务器添加到 VS Code：
或手动将服务器添加到 VS Code MCP 配置（.vscode/mcp.json）中：
{
"servers": {
"my-nuxt-app": {
"type": "http",
"url": "http://localhost:3000/mcp"
}
}
}
my-nuxt-app 替换为您的项目名称，如果您使用了自定义路由或端口，请更新 URL。InstallButton 组件
该模块提供了一个 InstallButton 组件，您可以在文档中使用它，让用户一键安装您的 MCP 服务器。
支持的 IDE
| IDE | 值 | 状态 |
|---|---|---|
| Cursor | cursor | 支持 |
| VS Code | vscode | 支持 |
在 Vue 模板中
<template>
<!-- Cursor（默认） -->
<InstallButton url="https://my-app.com/mcp" />
<!-- VS Code -->
<InstallButton url="https://my-app.com/mcp" ide="vscode" />
<!-- 自定义标签 -->
<InstallButton url="https://my-app.com/mcp" label="Add to Cursor" />
</template>
在 Markdown 中（MDC 语法）
如果您使用的是 Nuxt Content，请使用 MDC 语法：
<!-- Cursor（默认） -->
::install-button
---
url: "https://my-app.com/mcp"
---
::
<!-- VS Code -->
::install-button
---
url: "https://my-app.com/mcp"
ide: "vscode"
---
::
<!-- 带自定义标签 -->
::install-button
---
url: "https://my-app.com/mcp"
label: "Add to Cursor"
---
::
Props 参考
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
url | string | 必填 | MCP 服务器端点的 URL |
ide | 'cursor' | 'vscode' | 'cursor' | 目标 IDE |
label | string | 自动生成 | 按钮标签 |
showIcon | boolean | true | 显示 IDE 图标 |
自定义
该组件使用了您可以覆盖的 CSS 类：
/* 覆盖默认样式 */
.mcp-install-button {
background-color: #your-brand-color;
border-radius: 9999px;
}
或使用插槽实现完全自定义的内容：
<InstallButton url="https://my-app.com/mcp">
添加到 Cursor
</InstallButton>
README 徽章
对于 Vue/Nuxt 之外的 README 文件和文档，该模块提供了用于生成徽章的服务器路由。
徽章路由
该模块暴露了两个路由：
| 路由 | 描述 |
|---|---|
/mcp/deeplink | 重定向到 IDE 深度链接 |
/mcp/badge.svg | 返回可自定义的 SVG 徽章图片 |
基本用法
将其添加到您的 README 中：
[](https://your-app.com/mcp/deeplink)
这将显示一个徽章，点击后会打开 IDE 并安装您的 MCP 服务器。
VS Code 徽章
[](https://your-app.com/mcp/deeplink?ide=vscode)
两个 IDE
[](https://your-app.com/mcp/deeplink)
[](https://your-app.com/mcp/deeplink?ide=vscode)
自定义选项
| 参数 | 默认值 | 描述 |
|---|---|---|
ide | cursor | 目标 IDE（cursor 或 vscode） |
label | 自动生成 | 徽章文本 |
color | 171717 | 背景颜色（不带 # 的十六进制） |
textColor | ffffff | 文本颜色（不带 # 的十六进制） |
borderColor | 404040 | 边框颜色（不带 # 的十六进制） |
icon | true | 显示 IDE 图标（true 或 false） |
自定义徽章示例
自定义标签：
[](https://your-app.com/mcp/deeplink)
自定义颜色：
[](https://your-app.com/mcp/deeplink)
不带图标：
[](https://your-app.com/mcp/deeplink)
https://your-app.com 替换为您的实际域名。徽章路由使用您 mcp.name 配置中的服务器名称。深度链接格式
供参考，以下是各 IDE 使用的深度链接格式：
Cursor
cursor://anysphere.cursor-deeplink/mcp/install?name=SERVER_NAME&config=BASE64_CONFIG
配置是包含 { type: 'http', url: 'MCP_URL' } 的 Base64 编码 JSON。
VS Code
vscode:mcp/install?URL_ENCODED_JSON
配置是包含 { name: 'SERVER_NAME', type: 'http', url: 'MCP_URL' } 的 URL 编码 JSON。