vite-plugin-vue-mcp

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![bundle][bundle-src]][bundle-href]
[![License][license-src]][license-href]

Vite plugin that enables a MCP server for your Vue app to provide information about the component tree, state, routes, and pinia tree and state.

Installation 📦

pnpm install vite-plugin-vue-mcp -D

Usage 🔨

// vite.config.ts
import { VueMcp } from 'vite-plugin-vue-mcp'
export default defineConfig({

  plugins: [VueMcp()],

})

Then the MCP server will be available at http://localhost:[port]/__mcp/sse.

If you are using Cursor, create a .cursor/mcp.json file in your project root, this plugin will automatically update it for you. For more details about the MCP, check the official Cursor documentation.

Options

export interface VueMcpOptions {
  /
    The host to listen on, default is localhost
   /
  host?: string
/

    Print the MCP server URL in the console

   

    @default true

   /

  printUrl?: boolean
/

    The MCP server info. Ingored when mcpServer is provided

   /

  mcpServerInfo?: McpServerInfo

/

    Custom MCP server, when this is provided, the built-in MCP tools will be ignored

   /

  mcpServer?: (viteServer: ViteDevServer) => Awaitable<McpServer>
/

    Setup the MCP server, this is called when the MCP server is created

    You may also return a new MCP server to replace the default one

   /

  mcpServerSetup?: (server: McpServer, viteServer: ViteDevServer) => Awaitable<void | McpServer>

/

    The path to the MCP server, default is /__mcp

   /

  mcpPath?: string

/

    Update the address of the MCP server in the cursor config file .cursor/mcp.json,

    if .cursor folder exists.

   

    @default true

   /

  updateCursorMcpJson?: boolean | {

    enabled: boolean

    /

      The name of the MCP server, default is vue-mcp

     /

    serverName?: string

  }
/

    append an import to the module id ending with appendTo instead of adding a script into body

    useful for projects that do not use html file as an entry

   

    WARNING: only set this if you know exactly what it does.

    @default ''

   /

  appendTo?: string | RegExp

}

Please ensure the application is running in your browser before using the features.**

Credits 💖

This project is inspired by vite-plugin-mcp. Thanks to @antfu for the great work.

License 📖

MIT License © Arlo

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/vite-plugin-vue-mcp?style=flat&colorA=080f12&colorB=1fa669
[npm-version-href]: https://npmjs.com/package/vite-plugin-vue-mcp
[npm-downloads-src]: https://img.shields.io/npm/dm/vite-plugin-vue-mcp?style=flat&colorA=080f12&colorB=1fa669
[npm-downloads-href]: https://npmjs.com/package/vite-plugin-vue-mcp
[bundle-src]: https://img.shields.io/bundlephobia/minzip/vite-plugin-vue-mcp?style=flat&colorA=080f12&colorB=1fa669&label=minzip
[bundle-href]: https://bundlephobia.com/result?p=vite-plugin-vue-mcp
[license-src]: https://img.shields.io/github/license/webfansplz/vite-plugin-vue-mcp.svg?style=flat&colorA=080f12&colorB=1fa669
[license-href]: https://github.com/webfansplz/vite-plugin-vue-mcp/blob/main/LICENSE