vite-plugin-mcp

0.3.2 verified Mon Apr 27 auth: no javascript

A Vite plugin (v0.3.2, active development) that runs a Model Context Protocol (MCP) server alongside your Vite dev server to expose app setup details and module graphs to AI agents. It helps LLMs understand your project structure, routes, and dependencies. Supports automatic editor config (VS Code, Cursor, Windsurf, Claude Code) via `updateConfig`. Requires Vite >=6.0.0. No official release cadence; breaking changes are frequent (e.g., option renames, config unification). Not production-ready.

Common errors

error Cannot find module 'vite-plugin-mcp' or its corresponding type declarations. ↓

cause Package not installed or typings not generated.

fix

Ensure vite-plugin-mcp is installed as a dev dependency: npm i -D vite-plugin-mcp.

error The 'ViteMcp' plugin requires Vite >= 6.0.0 ↓

cause Plugin peer dependency on Vite 6+, but older Vite is installed.

fix

Upgrade Vite to version 6 or later: npm i -D vite@6.

Warnings

breaking In v0.3.0, package renamed from `nuxt-mcp` to `vue-mcp`? Actually 'nuxt-mcp-dev'? This is for Vite, not Nuxt - ensure you install `vite-plugin-mcp`. ↓

fix Use correct package name: `npm i -D vite-plugin-mcp`.

breaking v0.2.0: Unified editor config options into `updateConfig`; removed `updateCursorMcpJson`, `updateVSCodeMcpJson`, `updateWindsurfMcpJson`. Also renamed `mcpPath` to `mcpRouteRoot`. ↓

fix Use `updateConfig: true|false` and `mcpRouteRoot` instead of old options.

gotcha Plugin is experimental. Not recommended for production use. Breaking changes may occur without major version bump. ↓

fix Pin exact version and test thoroughly before upgrading.

gotcha MCP server endpoint is http://localhost:5173/__mcp/sse. If Vite port changes, this URL will change accordingly. ↓

fix Check Vite config for `server.port` if MCP connection fails.

Install

npm install vite-plugin-mcp

yarn add vite-plugin-mcp

pnpm add vite-plugin-mcp

Imports

ViteMcp

wrong

import ViteMcp from 'vite-plugin-mcp'

correct

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

Named export, not default.

generateMcpConfig

wrong

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

correct

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

Case-sensitive: lowercase 'Mcp'.

defineViteMcpConfig

wrong

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

correct

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

Exact function name as exported.

Quickstart

Adds MCP server to Vite dev server with auto-editor config and custom server name.

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

export default defineConfig({
  plugins: [
    ViteMcp({
      updateConfig: true,
      updateConfigServerName: 'my-vite-mcp'
    })
  ]
})