# Source: https://nuxt.com/raw/docs/3.x/guide/ai/mcp.md

# Source: https://nuxt.com/raw/docs/4.x/guide/ai/mcp.md

# Nuxt MCP Server

> Use Nuxt documentation in your AI assistants with Model Context Protocol support.

## What is MCP?

MCP (Model Context Protocol) is a standardized protocol that enables AI assistants to access external data sources and tools. Nuxt provides an MCP server that allows AI assistants like Claude Code, Cursor, and Windsurf to access documentation, blog posts, and deployment guides directly.

The MCP server provides structured access to the Nuxt documentation, making it easy for AI tools to understand and assist with Nuxt development.

## Resources

The Nuxt MCP server provides the following resources for discovery:

- **resource://nuxt-com/documentation-pages**: Browse all available documentation pages (defaults to v4.x)
- **resource://nuxt-com/blog-posts**: Browse all Nuxt blog posts including releases and tutorials
- **resource://nuxt-com/deploy-providers**: Browse all deployment providers and hosting platforms

You're able to access these resources with tools like Claude Code by using `@`.

## Tools

The Nuxt MCP server provides the following tools organized by category:

### Documentation

- **list_documentation_pages**: Lists all available Nuxt documentation pages with their categories and basic information. Supports version filtering (3.x, 4.x, or all)
- **get_documentation_page**: Retrieves documentation page content and details by path
- **get_getting_started_guide**: Gets the getting started guide for a specific Nuxt version

### Blog

- **list_blog_posts**: Lists all Nuxt blog posts with metadata including dates, categories, and tags
- **get_blog_post**: Retrieves blog post content and details by path

### Deployment

- **list_deploy_providers**: Lists all deployment providers and hosting platforms for Nuxt applications
- **get_deploy_provider**: Retrieves deployment provider details and instructions by path

## Prompts

The Nuxt MCP server provides guided prompts for common workflows:

- **find_documentation_for_topic**: Find the best Nuxt documentation for a specific topic or feature
- **deployment_guide**: Get deployment instructions for a specific hosting provider
- **migration_help**: Get help with migrating between Nuxt versions

You're able to access these resources with tools like Claude Code by using `/`.

## Setup

The Nuxt MCP server uses HTTP transport and can be installed in different AI assistants.

### ChatGPT

<note icon="i-lucide-info">

**Custom connectors using MCP are available on ChatGPT for Pro and Plus accounts** on the web.

</note>

Follow these steps to set up Nuxt as a connector within ChatGPT:

1. **Enable Developer mode:**
  - Go to Settings → Connectors → Advanced settings → Developer mode
2. **Open ChatGPT settings**
3. **In the Connectors tab, Create a new connector:**
  - Give it a name: `Nuxt`
  - MCP server URL: `https://nuxt.com/mcp`
  - Authentication: `None`
4. **Click Create**

The Nuxt connector will appear in the composer's "Developer mode" tool later during conversations.

### Claude Code

<note icon="i-lucide-info">

**Ensure Claude Code is installed** - Visit [Anthropic's documentation](https://docs.claude.com/en/docs/claude-code/quickstart) for installation instructions.

</note>

Add the server using the CLI command:

```bash
claude mcp add --transport http nuxt-remote https://nuxt.com/mcp
```

### Claude Desktop

#### Setup Instructions

1. Open Claude Desktop and navigate to "Settings" > "Developer".
2. Click on "Edit Config". This will open the local Claude directory.
3. Modify the `claude_desktop_config.json` file with your custom MCP server configuration.
```json [claude_desktop_config.json]
{
  "mcpServers": {
    "nuxt": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://nuxt.com/mcp"
      ]
    }
  }
}
```
4. Restart Claude Desktop app. The Nuxt MCP server should now be registered.

### Cursor

Click the button below to install the Nuxt MCP server directly in Cursor:

<u-button color="neutral" icon="i-custom-cursor" label="Install MCP Server" to="cursor://anysphere.cursor-deeplink/mcp/install?name=nuxt&config=eyJ0eXBlIjoiaHR0cCIsInVybCI6Imh0dHBzOi8vbnV4dC5jb20vbWNwIn0%3D">



</u-button>

For manual setup, follow these steps:

1. Open Cursor and go to "Settings" > "Tools & MCP"
2. Add the Nuxt MCP server configuration

Or manually create/update `.cursor/mcp.json` in your project root:

```json [.cursor/mcp.json]
{
  "mcpServers": {
    "nuxt": {
      "type": "http",
      "url": "https://nuxt.com/mcp"
    }
  }
}
```

### Le Chat Mistral

1. Navigate to "Intelligence" > "Connectors"
2. Click on "Add Connector" button, then select "Custom MCP Connector"
3. Create your Custom MCP Connector:

  - Connector Name : `Nuxt`
  - Connector Server : `https://nuxt.com/mcp`

### Visual Studio Code

<note icon="i-lucide-info">

**Install required extensions** - Ensure you have [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) and [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) extensions installed.

</note>

1. Open VS Code and access the Command Palette (Ctrl/Cmd + Shift + P)
2. Type "Preferences: Open Workspace Settings (JSON)" and select it
3. Navigate to your project's `.vscode` folder or create one if it doesn't exist
4. Create or edit the `mcp.json` file with the following configuration:

```json [.vscode/mcp.json]
{
  "servers": {
    "nuxt": {
      "type": "http",
      "url": "https://nuxt.com/mcp"
    }
  }
}
```

### GitHub Copilot Agent

<note icon="i-lucide-info">

**Repository administrator access required** to configure MCP servers for GitHub Copilot coding agent.

</note>

If you have already configured MCP servers in VS Code (replace the `servers` key with `mcpServers` for GitHub Copilot Agent), you can leverage a similar configuration for GitHub Copilot coding agent. You will need to add a `tools` key specifying which tools are available to Copilot.

1. Navigate to your GitHub repository
2. Go to **Settings** > **Code & automation** > **Copilot** > **Coding agent**
3. In the **MCP configuration** section, add the following configuration:
```json
{
  "mcpServers": {
    "nuxt": {
      "type": "http",
      "url": "https://nuxt.com/mcp",
      "tools": ["*"]
    }
  }
}
```
4. Click **Save**

#### Validating the Configuration

To verify the MCP server is configured correctly:

1. Create an issue in your repository and assign it to Copilot
2. Wait for Copilot to create a pull request
3. In the pull request, click **View session** in the "Copilot started work" timeline event
4. Click the ellipsis button (**...**) at the top right, then click **Copilot** in the sidebar
5. Expand the **Start MCP Servers** step to see the configured Nuxt tools

For more information on using MCP with GitHub Copilot coding agent, see [Extend coding agent with MCP](https://docs.github.com/en/copilot/how-tos/use-copilot-agents/coding-agent/extend-coding-agent-with-mcp).

### Windsurf

1. Open Windsurf and navigate to "Settings" > "Windsurf Settings" > "Cascade"
2. Click the "Manage MCPs" button, then select the "View raw config" option
3. Add the following configuration to your MCP settings:

```json [.codeium/windsurf/mcp_config.json]
{
  "mcpServers": {
    "nuxt": {
      "type": "http",
      "url": "https://nuxt.com/mcp"
    }
  }
}
```

### Zed

1. Open Zed and go to "Settings" > "Open Settings"
2. Navigate to the JSON settings file
3. Add the following context server configuration to your settings:

```json [.config/zed/settings.json]
{
  "context_servers": {
    "nuxt": {
      "source": "custom",
      "command": "npx",
      "args": ["mcp-remote", "https://nuxt.com/mcp"],
      "env": {}
    }
  }
}
```

### Opencode

1. In your project root, create `opencode.json`
2. Add the following configuration:

```json
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "nuxt": {
      "type": "remote",
      "url": "https://nuxt.com/mcp",
      "enabled": true
    }
  }
}
```

## Prompts Examples

Once configured, you can ask your AI assistant questions like:

- "List all available Nuxt documentation pages"
- "Get the introduction documentation"
- "What's the difference between v3 and v4?"
- "How do I deploy to Vercel?"
- "Show me the latest blog posts"
- "Help me migrate from Nuxt 3 to Nuxt 4"
- "Search documentation about composables"
- "Find deployment guides for Cloudflare"

The AI assistant will use the MCP server to fetch structured JSON data and provide guided assistance for Nuxt development.