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.
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"
}
}
}
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.The module provides an InstallButton component that you can use in your documentation to let users install your MCP server in one click.
| IDE | Value | Status |
|---|---|---|
| Cursor | cursor | Supported |
| VS Code | vscode | Supported |
<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>
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"
---
::
| 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 |
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>
For README files and documentation outside of Vue/Nuxt, the module provides server routes to generate badges.
The module exposes two routes:
| Route | Description |
|---|---|
/mcp/deeplink | Redirects to the IDE deeplink |
/mcp/badge.svg | Returns a customizable SVG badge image |
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.
[](https://your-app.com/mcp/deeplink?ide=vscode)
[](https://your-app.com/mcp/deeplink)
[](https://your-app.com/mcp/deeplink?ide=vscode)
| 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 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.For reference, here are the deeplink formats used by each IDE:
cursor://anysphere.cursor-deeplink/mcp/install?name=SERVER_NAME&config=BASE64_CONFIG
The config is Base64-encoded JSON containing { type: 'http', url: 'MCP_URL' }.
vscode:mcp/install?URL_ENCODED_JSON
The config is URL-encoded JSON containing { name: 'SERVER_NAME', type: 'http', url: 'MCP_URL' }.