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
- AsecurityAlicenseAqualityEnables 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 -8014TypeScriptApache 2.0
- -securityAlicense-qualityA server that helps AI models better understand Vite/Nuxt applications, providing enhanced context awareness for development support.Last updated -718TypeScriptMIT License
- TypeScriptMIT License
- -securityFlicense-qualityProvides 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 -1Python