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.

add-mcp

The add-mcp CLI can register a remote (streamable HTTP) MCP server with Cursor, Claude Code, VS Code, Codex, and several other coding agents in one step.

Use the URL that matches where the app runs: http://… for local dev, https://… in production (public MCP endpoints should use HTTPS). If you changed mcp.route in nuxt.config, append that path instead of /mcp.

npx add-mcp http://localhost:3000/mcp

npx add-mcp https://your-app.example.com/mcp

Run the command from any directory; it updates agent config files (e.g. project .cursor/mcp.json). Options such as -a cursor, -y, or --header for authenticated endpoints are described in the add-mcp package docs.

Share your MCP with users (production)

When your Nuxt app is deployed, you give your users a stable MCP URL. They will plug the same shape of URL into their assistant as for localhost—only the host and scheme change.

What to publish

Prefer HTTPS on the public internet. Your hosting provider’s assigned URL (e.g. https://my-app.vercel.app/mcp) is fine until you add a custom domain.

One-liner for users (add-mcp)

Document this in your README or docs so people can register your server quickly:

npx add-mcp https://your-product.com/mcp

If your MCP is behind auth, document the required headers and point people to add-mcp --header 'Authorization: Bearer …' (or your provider’s pattern).

Buttons and badges for docs / README

Give non-CLI users a single click:

• InstallButton in Vue or MDC — set url to your production MCP URL (see examples with https://my-app.com/mcp below).
• README badges — Markdown badges that open the IDE installer and work in GitHub or any site.

Example for your landing or documentation:

Manual config you can copy for users

Same JSON as in the IDE sections below, but with your live URL:

{
  "url": "https://your-product.com/mcp"
}

Cursor and VS Code expect this inside their respective mcpServers / servers shapes — mirror the full examples under Cursor and VS Code and replace the localhost URL.

Connect Your IDE

The steps below use localhost while you develop. To publish instructions for your audience, reuse the same patterns with your production https://… URL — see Share your MCP with users (production).

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"
    }
  }
}

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

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

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:

Basic Usage

Add this to your README:

[![Install in Cursor](https://your-app.com/mcp/badge.svg)](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

[![Install in VS Code](https://your-app.com/mcp/badge.svg?ide=vscode)](https://your-app.com/mcp/deeplink?ide=vscode)

Both IDEs

[![Install in Cursor](https://your-app.com/mcp/badge.svg)](https://your-app.com/mcp/deeplink)
[![Install in VS Code](https://your-app.com/mcp/badge.svg?ide=vscode)](https://your-app.com/mcp/deeplink?ide=vscode)

Customization Options

Custom Badge Examples

Custom label:

[![Add to Cursor](https://your-app.com/mcp/badge.svg?label=Add%20to%20Cursor)](https://your-app.com/mcp/deeplink)

Custom colors:

[![Install](https://your-app.com/mcp/badge.svg?color=0ea5e9&borderColor=0284c7)](https://your-app.com/mcp/deeplink)

Without icon:

[![Install](https://your-app.com/mcp/badge.svg?icon=false)](https://your-app.com/mcp/deeplink)

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' }.

Next Steps

• Tools - Create your first tool
• Resources - Expose data to AI assistants
• Prompts - Create reusable message templates