Vite Plugin Vue MCP

🚀 vite-plugin-vue-mcp

This is a Vite plugin that enables the MCP server for Vue applications, providing information on component trees, states, routes, and Pinia trees and states.

[![npm Version][npm-version-src]][npm-version-href] [![npm Downloads][npm-downloads-src]][npm-downloads-href] [![Bundle Size][bundle-src]][bundle-href] [![License][license-src]][license-href]

🚀 Quick Start

This plugin allows you to quickly enable the MCP server in your Vue application, providing detailed information about the application's components, states, routes, and Pinia stores.

✨ Features

• Component Tree: Real-time monitoring and display of the hierarchical structure of Vue components.
• State Tracking: Capture and display the state data of each component.
• Route Information: Record detailed information about the current active route, including the path, parameters, and query string.
• Pinia Tree: Visualize the storage structure and data of Pinia.

📦 Installation

pnpm install vite-plugin-vue-mcp -D

💻 Usage Examples

Basic 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 the project root directory, and this plugin will automatically update it for you. For more detailed information about MCP, please refer to the official Cursor documentation.

Advanced Usage

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

  /**
   * MCP server information. This option is ignored when `mcpServer` is provided
   */
  mcpInfo?: {
    /** MCP version number */
    version: string
    /** MCP description */
    description: string
  }

  /**
   * Custom MCP server
   */
  mcpServer?: CustomMcpServer

  /** Whether to enable the default MCP service */
  enabled?: boolean

  /** Default proxy configuration */
  proxy?: {
    /** The target URL address to proxy */
    target: string
    /** Whether to preserve the original response headers */
    preserveHeaders?: boolean
    /** Whether to change the origin header */
    changeOrigin?: boolean
    /** Gateway prefix */
    prefix?: string
  }

  /** The port to listen on, default is `4010` */
  port?: number

  /** The network interface to listen on */
  interface?: string

  /** Whether to allow cross-origin requests */
  cors?: boolean | CorsOptions

  /** Request log level */
  logLevel?: LogLevel
}

Data Structure Definitions

Component Tree

export type ComponentTree = {
  /** Component ID */
  id: string
  /** Component name */
  name?: string
  /** Component type */
  type: 'component' | 'container'
  /** Parent component ID */
  parentId?: string
  /** List of child components */
  children: ComponentTree[]
  /** Component properties */
  props: Record<string, any>
  /** Component state */
  state: Record<string, any>
}

Component State

export type ComponentState = {
  /** Component ID */
  id: string
  /** Current component state */
  state: Record<string, any>
}

Route

export type RouteInfo = {
  /** Route path */
  path: string
  /** Route name */
  name?: string
  /** Route parameters */
  params: Record<string, string>
  /** Query parameters */
  query: Record<string, string>
  /** Request method */
  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
}

Pinia Tree

export type PiniaTree = {
  /** Pinia ID */
  id: string
  /** Pinia name */
  name?: string
  /** Parent Pinia ID */
  parentId?: string
  /** List of child Pinia stores */
  children: PiniaTree[]
  /** Pinia data */
  data: Record<string, any>
}

📚 Documentation

Architecture Diagram

The following diagram shows the overall architecture of vite-plugin-vue-mcp:

Function Overview

• Component Tree: Real-time monitoring and display of the hierarchical structure of Vue components.
• State Tracking: Capture and display the state data of each component.
• Route Information: Record detailed information about the current active route, including the path, parameters, and query string.
• Pinia Tree: Visualize the storage structure and data of Pinia.

⚠️ Important Note

• Ensure that the correct dependencies are installed.
• Additional security measures may be required in a production environment.
• Keep the image links unchanged and only translate the text content.

💡 Usage Tip

Thank you for choosing vite-plugin-vue-mcp. If you have any questions or suggestions, please feel free to let us know.