Connection
Overview
Once your MCP server is running, you can connect AI assistants like Cursor, VS Code, and ChatGPT to use your tools, resources, and prompts.
The module also provides components and routes to help your users install your MCP server in one click.
Connect Your IDE
Cursor
Click the button below to add your local MCP server to Cursor:
Or manually add it to your Cursor settings (~/.cursor/mcp.json):
{
"mcpServers": {
"my-nuxt-app": {
"url": "http://localhost:3000/mcp"
}
}
}
VS Code
Click the button below to add your local MCP server to VS Code:
Or manually add the server to your VS Code MCP configuration (.vscode/mcp.json):
{
"servers": {
"my-nuxt-app": {
"type": "http",
"url": "http://localhost:3000/mcp"
}
}
}
my-nuxt-app with your project name and update the URL if you're using a custom route or port.InstallButton Component
The module provides an InstallButton component that you can use in your documentation to let users install your MCP server in one click.
Supported IDEs
| IDE | Value | Status |
|---|---|---|
| Cursor | cursor | Supported |
| VS Code | vscode | Supported |
In Vue Templates
<template>
<!-- Cursor (default) -->
<InstallButton url="https://my-app.com/mcp" />
<!-- VS Code -->
<InstallButton url="https://my-app.com/mcp" ide="vscode" />
<!-- Custom label -->
<InstallButton url="https://my-app.com/mcp" label="Add to Cursor" />
</template>
In Markdown (MDC Syntax)
If you're using Nuxt Content, use the MDC syntax:
<!-- Cursor (default) -->
::install-button
---
url: "https://my-app.com/mcp"
---
::
<!-- VS Code -->
::install-button
---
url: "https://my-app.com/mcp"
ide: "vscode"
---
::
<!-- With custom label -->
::install-button
---
url: "https://my-app.com/mcp"
label: "Add to Cursor"
---
::
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
url | string | required | URL of the MCP server endpoint |
ide | 'cursor' | 'vscode' | 'cursor' | Target IDE |
label | string | Auto-generated | Button label |
showIcon | boolean | true | Show the IDE icon |
Customization
The component uses CSS classes that you can override:
/* Override default styles */
.mcp-install-button {
background-color: #your-brand-color;
border-radius: 9999px;
}
Or use the slot for completely custom content:
<InstallButton url="https://my-app.com/mcp">
Add to Cursor
</InstallButton>
README Badge
For README files and documentation outside of Vue/Nuxt, the module provides server routes to generate badges.
Badge Routes
The module exposes two routes:
| Route | Description |
|---|---|
/mcp/deeplink | Redirects to the IDE deeplink |
/mcp/badge.svg | Returns a customizable SVG badge image |
Basic Usage
Add this to your README:
[](https://your-app.com/mcp/deeplink)
This will display a badge that, when clicked, opens the IDE and installs your MCP server.
VS Code Badge
[](https://your-app.com/mcp/deeplink?ide=vscode)
Both IDEs
[](https://your-app.com/mcp/deeplink)
[](https://your-app.com/mcp/deeplink?ide=vscode)
Customization Options
| Parameter | Default | Description |
|---|---|---|
ide | cursor | Target IDE (cursor or vscode) |
label | Auto-generated | Badge text |
color | 171717 | Background color (hex without #) |
textColor | ffffff | Text color (hex without #) |
borderColor | 404040 | Border color (hex without #) |
icon | true | Show IDE icon (true or false) |
Custom Badge Examples
Custom label:
[](https://your-app.com/mcp/deeplink)
Custom colors:
[](https://your-app.com/mcp/deeplink)
Without icon:
[](https://your-app.com/mcp/deeplink)
https://your-app.com with your actual domain. The badge route uses the server name from your mcp.name config.Deeplink Formats
For reference, here are the deeplink formats used by each IDE:
Cursor
cursor://anysphere.cursor-deeplink/mcp/install?name=SERVER_NAME&config=BASE64_CONFIG
The config is Base64-encoded JSON containing { type: 'http', url: 'MCP_URL' }.
VS Code
vscode:mcp/install?URL_ENCODED_JSON
The config is URL-encoded JSON containing { name: 'SERVER_NAME', type: 'http', url: 'MCP_URL' }.