# vite-plugin-vue-mcp

> MCP Server

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

## Overview

- **Category:** Developer Tools
- **Language:** Vue
- **Stars:** 573
- **Forks:** 12
- **Owner:** webfansplz
- **GitHub:** https://github.com/webfansplz/vite-plugin-vue-mcp
- **Created:** 2025-03-15T07:21:43+00:00
- **Updated:** 2025-03-28T17:50:23+00:00
- **Source:** https://model-context-protocol.com/servers/vite-plugin-vue-mcp-model-understanding

## Setup

## Setup

1.  Install the plugin: `pnpm install vite-plugin-vue-mcp -D`
2.  Add the plugin to your `vite.config.ts`: 

```ts
// vite.config.ts
import { VueMcp } from 'vite-plugin-vue-mcp'

export default defineConfig({
  plugins: [VueMcp()],
})
```

3. The MCP server will be available at `http://localhost:[port]/__mcp/sse`.
4. If using Cursor, create a `.cursor/mcp.json` file in your project root to be automatically updated by the plugin.

## Tools

## Available Tools

1.  `get-component-tree`: Get the Vue component tree.
2.  `get-component-state`: Get the state of a component (input: `componentName`).
3.  `edit-component-state`: Edit the state of a component (input: `componentName`, `path`, `value`, `valueType`).
4.  `highlight-component`: Highlight a component (input: `componentName`).
5.  `get-router-info`: Get the Vue router info of the application.
6.  `get-pinia-tree`: Get the Pinia tree of the application.
7.  `get-pinia-state`: Get the Pinia state of the application (input: `storeName`).