{"type":"mcp_server","name":"vite-plugin-vue-mcp","description":"This Vite plugin enables a MCP server for Vue apps, providing information about the component tree, state, routes, and Pinia. It supports Cursor integration and offers options for customization, including","category":"Developer Tools","language":"Vue","stars":569,"forks":12,"owner":"webfansplz","github_url":"https://github.com/webfansplz/vite-plugin-vue-mcp","homepage":null,"setup":"## Setup\n\n1.  Install the plugin: `pnpm install vite-plugin-vue-mcp -D`\n2.  Add the plugin to your `vite.config.ts`: \n\n```ts\n// vite.config.ts\nimport { VueMcp } from 'vite-plugin-vue-mcp'\n\nexport default defineConfig({\n  plugins: [VueMcp()],\n})\n```\n\n3. The MCP server will be available at `http://localhost:[port]/__mcp/sse`.\n4. If using Cursor, create a `.cursor/mcp.json` file in your project root to be automatically updated by the plugin.","tools":"## Available Tools\n\n1.  `get-component-tree`: Get the Vue component tree.\n2.  `get-component-state`: Get the state of a component (input: `componentName`).\n3.  `edit-component-state`: Edit the state of a component (input: `componentName`, `path`, `value`, `valueType`).\n4.  `highlight-component`: Highlight a component (input: `componentName`).\n5.  `get-router-info`: Get the Vue router info of the application.\n6.  `get-pinia-tree`: Get the Pinia tree of the application.\n7.  `get-pinia-state`: Get the Pinia state of the application (input: `storeName`).","faq":null,"created_at":"2025-03-15T07:21:43+00:00","updated_at":"2025-03-28T17:50:23+00:00","source_url":"https://model-context-protocol.com/servers/vite-plugin-vue-mcp-model-understanding","related_articles":[]}