vite-plugin-vue-mcp
by webfansplz
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.
Last updated: N/A
What is vite-plugin-vue-mcp?
A Vite plugin that enables a Model Context Protocol (MCP) server for Vue applications. It provides insights into the component tree, component state, Vue Router information, and Pinia store data.
How to use vite-plugin-vue-mcp?
Install the plugin using pnpm install vite-plugin-vue-mcp -D. Then, import and add it to your vite.config.ts file: import { VueMcp } from 'vite-plugin-vue-mcp'; export default defineConfig({ plugins: [VueMcp()], }). The MCP server will be available at http://localhost:[port]/__mcp/sse.
Key features of vite-plugin-vue-mcp
Get Component Tree
Get Component State
Edit Component State
Highlight Component
Get Routes
Get Pinia Tree
Get Pinia State
Automatic Cursor config update
Use cases of vite-plugin-vue-mcp
Debugging Vue applications
Inspecting component state during development
Understanding application architecture
Integrating with Cursor IDE for enhanced context awareness
FAQ from vite-plugin-vue-mcp
What is MCP?
What is MCP?
MCP stands for Model Context Protocol. It's a protocol that allows tools to understand the context of your application.
How do I access the MCP server?
How do I access the MCP server?
The MCP server will be available at http://localhost:[port]/__mcp/sse after installing and configuring the plugin.
What if I'm using Cursor?
What if I'm using Cursor?
If you are using Cursor, the plugin can automatically update the .cursor/mcp.json file for you.
Can I customize the MCP server?
Can I customize the MCP server?
Yes, you can provide a custom MCP server or setup using the mcpServer and mcpServerSetup options.
Is this plugin inspired by other projects?
Is this plugin inspired by other projects?
Yes, this project is inspired by vite-plugin-mcp and thanks to @antfu for the great work.