Summary of vite-plugin-vue-mcp

vite-plugin-vue-mcp is a Vite plugin designed to enhance Vue.js development by providing a Model Context Protocol (MCP) server. This server exposes valuable information about your Vue application, including the component tree, component state, routes, and Pinia store details.

Installation & Usage:

Install via pnpm install vite-plugin-vue-mcp -D and integrate into vite.config.ts with import { VueMcp } from 'vite-plugin-vue-mcp'; plugins: [VueMcp()]. The MCP server is then accessible at http://localhost:[port]/__mcp/sse. It supports automatic updates to .cursor/mcp.json for Cursor integration.

Key Features:

The plugin offers tools like get-component-tree, get-component-state, edit-component-state, highlight-component, get-router-info, get-pinia-tree, and get-pinia-state. These features enable developers to inspect and manipulate the application's state and structure in real-time.

Use Case:

Primarily intended for use with Cursor, it can be used independently for debugging and development purposes. The plugin is inspired by vite-plugin-mcp and is licensed under MIT.