nuxt-mcp-dev

The ViteMcpOptions interface defines the configuration for the vite-plugin-mcp plugin. You can use these options to control the MCP server's network settings, route, and how it integrates with IDE configuration files.

Network and Routing

• host: The host to listen on (defaults to localhost).
• port: The port to listen on (defaults to the Vite dev server port).
• mcpRouteRoot: The root route for the MCP server (defaults to /__mcp).
• printUrl: Whether to print the MCP server URL in the console (defaults to true).

MCP Server Customization

• mcpServer: A function that receives the ViteDevServer and returns an McpServer. Providing this will cause the built-in MCP tools to be ignored.
• mcpServerInfo: Provides MCP server metadata. This is ignored if mcpServer is provided.
• mcpServerSetup: A lifecycle hook called when the MCP server is created. It receives the McpServer and ViteDevServer. You can use this to modify the existing server or return a new one to replace it.

IDE Configuration Updates

• updateConfig: Controls which IDE configuration files are automatically updated with the MCP server details.
  • 'auto': Automatically update existing config files.
  • false: Disable automatic updates.
  • SupportedUpdateConfigType[]: Specify specific targets like 'cursor', 'vscode', 'windsurf', or 'claude-code'.
• updateConfigServerName: The name used for the server in the generated config files (defaults to 'vite').
• updateConfigAdditionalServers: An array of UpdateConfigAdditionalServer objects to include in the configuration updates.

Deprecated Options

• mcpPath: Use mcpRouteRoot instead.

// Example configuration
import mcp from 'vite-plugin-mcp'

export default {
  plugins: [
    mcp({
      mcpRouteRoot: '/my-mcp',
      updateConfig: ['cursor', 'vscode'],
      updateConfigServerName: 'my-custom-server',
      mcpServerSetup: async (server, viteServer) => {
        // Custom setup logic here
      }
    })
  ]
}

The ViteMcp plugin accepts a ViteMcpOptions object to customize its behavior. Key options include:

• printUrl: (boolean, default: true) Whether to log the MCP SSE URL to the console.
• mcpRouteRoot: (string) The base path for the MCP routes. Defaults to options.mcpPath or '/__mcp'.
• mcpPath: (string) Alternative base path for MCP routes.
• mcpServer: (function, default: createMcpServerDefault) A function that receives the ViteDevServer and returns an MCP server instance. This allows for custom server implementations.
• mcpServerSetup: (function) A hook to perform additional setup on the created MCP server instance.
• updateConfig: (boolean | string | string[]) Controls automatic configuration updates for AI tools.
  • false: Disables automatic updates.
  • 'auto': Automatically detects and updates supported tools (Cursor, VSCode, Windsurf, Claude Code) based on existing config files in the workspace.
  • string[]: A specific list of tool identifiers to update.
• updateConfigServerName: (string, default: 'vite') The name used to identify the server in the tool's configuration file.
• updateConfigAdditionalServers: (Array<{ name: string, url: string }>) A list of additional MCP servers to include in the generated configuration files.
• host: (string) The host to use for the SSE URL (defaults to 'localhost').
• port: (number) The port to use for the SSE URL (defaults to the Vite server port).

import { ViteMcp } from 'vite-plugin-mcp'

export default {
  plugins: [
    ViteMcp({
      mcpRouteRoot: '/my-mcp',
      updateConfig: ['cursor', 'vscode'],
      updateConfigServerName: 'my-custom-server',
      updateConfigAdditionalServers: [
        { name: 'other-server', url: 'http://localhost:3000/sse' }
      ]
    })
  ]
}

The nuxt-mcp-dev module is configured using the mcp key in your Nuxt configuration. It extends the options provided by vite-plugin-mcp and adds a specific option for Nuxt documentation integration.

Options

export default defineNuxtConfig({
  modules: ['nuxt-mcp-dev'],
  mcp: {
    includeNuxtDocsMcp: true,
    port: 3000,
    // Additional custom setup
    mcpServerSetup: async (mcp, vite) => {
      // custom logic here
    }
  }
})

The nuxt-scaffold tool allows you to automatically generate new files (such as components, pages, layouts, or middleware) within your current Nuxt project using the Nuxt CLI's nuxi add command. This tool is exposed via the MCP server.

Parameters

Supported Templates

You can scaffold the following types:

• api
• app
• app-config
• component
• composable
• error
• layer
• layout
• middleware
• module
• page
• plugin
• server-middleware
• server-plugin
• server-route
• server-util

// Example tool call via MCP
// template: 'component', name: 'MyButton'
// This effectively runs: nuxi add component MyButton

The createMcpServerDefault function is a factory that initializes a Model Context Protocol (MCP) server instance pre-configured with Vite-specific tools. It integrates with an existing ViteDevServer to expose Vite's internal state and module graph to MCP clients.

By default, the server includes two tools:

1. get-vite-config: Retrieves the Vite configuration digest (root, resolve, plugin names, and environment names).
2. get-vite-module-info: Retrieves detailed graph information for a specific module (importers, imported modules, transform results, etc.) across all Vite environments.

To use this, you must provide a ViteMcpOptions object and an active ViteDevServer instance.

import { createMcpServerDefault } from 'vite-plugin-mcp'
import type { ViteDevServer } from 'vite'
import type { ViteMcpOptions } from './types'

// Assuming 'vite' is an instance of ViteDevServer
const vite: ViteDevServer = /* ... */;

const options: ViteMcpOptions = {
  mcpServerInfo: {
    name: 'my-custom-vite-server',
    version: '1.0.0'
  }
};

const server = createMcpServerDefault(options, vite);