Плагин Vite, который позволяет MCP-серверу для вашего приложения Vue предоставлять информацию о дереве компонентов, состоянии, маршрутах и дереве пиния и состоянии.

Установка 📦

Использование 🔨

Тогда сервер MCP будет доступен по адресу http://localhost:[port]/__mcp/sse.

Если вы используете Cursor, создайте файл .cursor/mcp.json в корень проекта, этот плагин автоматически обновит его для вас. Для получения дополнительной информации о MCP ознакомьтесь с официальной документацией Cursor.

Варианты

Функции/Инструменты ✨

Получить дерево компонентов

get-component-tree: Получите дерево компонентов Vue.

Получить компонентное состояние

get-component-state: Получите состояние компонента (вход: componentName).

Редактировать состояние компонента

edit-component-state: Редактировать состояние компонента (вход: componentName, path, value, valueType).

Компонент Хайлайт

highlight-component: Выделить компонент (вход: componentName).

Найди маршруты

get-router-info: Получите информацию о маршрутизаторе Vue в приложении.

Достань Пиния Три

get-pinia-tree: Получите дерево Пиния в приложении.

Получите Pinia State

get-pinia-state: Получите состояние Pinia приложения (вход: storeName).

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

  /**
   * 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

  /**
   * 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
}

Features/Tools ✨

Get Component Tree

get-component-tree: Get the Vue component tree.

Get Component State

get-component-state: Get the state of a component (input: componentName).

Edit Component State

edit-component-state: Edit the state of a component (input: componentName, path, value, valueType).

Highlight Component

highlight-component: Highlight a component (input: componentName).