Provides integration with Vite development servers to expose component and state data through MCP endpoints.
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 📦
Usage 🔨
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
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).

Get Routes
get-router-info: Get the Vue router info of the application.

Get Pinia Tree
get-pinia-tree: Get the Pinia tree of the application.

Get Pinia State
get-pinia-state: Get the Pinia state of the application (input: storeName).

Architecture ⚡️

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 📖
This server cannot be installed
Provides application insights for Vue apps by exposing component trees, state, routes, and Pinia data through a Model Context Protocol server.
Related Resources
Related MCP Servers
- Asecurity-licenseAqualityEnables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.Last updated -8217Apache 2.0
- -security-license-qualityA server that helps AI models better understand Vite/Nuxt applications, providing enhanced context awareness for development support.Last updated -803MIT License
- TypeScriptMIT License
- Asecurity-licenseAqualityProvides real-time system metrics and information through a Model Context Protocol interface, enabling access to CPU usage, memory statistics, disk information, network status, and running processes.Last updated -72