Integrations
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
- AsecurityAlicenseAqualityA Model Context Protocol server that allows AI assistants to interact with Appwrite's API, providing tools to manage databases, users, functions, teams, and other resources within Appwrite projects.Last updated -8436PythonMIT License
- -securityAlicense-qualityA server that helps AI models better understand Vite/Nuxt applications, providing enhanced context awareness for development support.Last updated -467TypeScriptMIT License
- AsecurityAlicenseAqualityA Model Context Protocol server that allows AI assistants to interact with the VRChat API, enabling retrieval of user information, friends lists, and other VRChat data through a standardized interface.Last updated -713233TypeScriptMIT License
- -securityFlicense-qualityA Model Context Protocol server that provides a comprehensive interface for interacting with the ConnectWise Manage API, simplifying API discovery, execution, and management for both developers and AI assistants.Last updated -462Python