This plugin provides a server for AI models to introspect and interact with Vue.js applications during development. It exposes component trees, state, routing information, and Pinia stores, enabling AI-powered debugging, code generation, and enhanced developer tooling.

How It Works

The plugin integrates with Vite's development server to expose a Server-Sent Events (SSE) endpoint. This endpoint streams real-time information about the Vue application's structure and state, including component hierarchy, component state (get/set), router information, and Pinia store details. This allows external tools, like AI coding assistants, to query and manipulate the application's internal state programmatically.

Quick Start & Requirements

• Install: pnpm install vite-plugin-vue-mcp -D
• Usage: Add VueMcp() to your vite.config.ts plugins.
• Requirements: Vue.js application running in the browser.
• Docs: Cursor documentation

Highlighted Details

• Exposes component tree, component state (get/set), router info, and Pinia store state.
• Supports highlighting components for easier identification.
• Integrates with Cursor IDE via .cursor/mcp.json for automatic configuration updates.
• Offers extensive configuration options for host, path, and custom server integration.

Maintenance & Community

• MIT License.
• Inspired by vite-plugin-mcp.

Licensing & Compatibility

• MIT License. Permissive for commercial use and closed-source linking.

Limitations & Caveats

The plugin requires the Vue application to be actively running in the browser for its features to function.