📌Overview

Purpose: To provide a Vite plugin that implements a Model-Component-Protocol (MCP) server for Vue applications, facilitating access to component trees, states, and route information.

Overview: The vite-plugin-vue-mcp enables developers to visualize and interact with the structure and state of their Vue components via an MCP server. It integrates seamlessly with existing Vite projects and enhances the debugging experience by exposing detailed application insights.

Key Features:

• Get Component Tree: Retrieve and view the hierarchical structure of Vue components, aiding in understanding component relationships.

• Get Component State: Access the current state of specific components, allowing for better debugging and state management.

• Edit Component State: Modify the state of components dynamically, which is useful for testing and development scenarios.

• Highlight Component: Visually emphasize specific components in the application for easier identification during debugging.

• Get Routes: Obtain detailed information about the application's routing setup, thereby assisting in route management.

• Get Pinia Tree and State: Fetch the structure and state of Pinia stores, improving state management visibility in applications using state management libraries.

---

vite-plugin-vue-mcp

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()],
})

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 update it for you. For more information, check the official Cursor documentation.

Options

export interface VueMcpOptions {
  host?: string; // The host to listen on, default is `localhost`
  printUrl?: boolean; // Print the MCP server URL in the console (default: true)
  mcpServerInfo?: McpServerInfo; // MCP server info
  mcpServer?: (viteServer: ViteDevServer) => Awaitable<McpServer>; // Custom MCP server
  mcpServerSetup?: (server: McpServer, viteServer: ViteDevServer) => Awaitable<void | McpServer>; // Setup MCP server
  mcpPath?: string; // The path to the MCP server, default is `/__mcp`
  updateCursorMcpJson?: boolean | { enabled: boolean; serverName?: string }; // Update cursor config file
  appendTo?: string | RegExp; // Append an import to the module
}

Features/Tools ✨

• get-component-tree: Get the Vue component tree.
• get-component-state: Get the state of a component (input: componentName).
• edit-component-state: Edit the state of a component (input: componentName, path, value, valueType).
• highlight-component: Highlight a component (input: componentName).
• get-router-info: Get the Vue router info of the application.
• get-pinia-tree: Get the Pinia tree of the application.
• get-pinia-state: Get the Pinia state of the application (input: storeName).

Notice 💡

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