Vue MCP
Supports Laravel + Inertia applications by exposing component tree/state and Pinia tools, while router info returns null because Inertia does not use vue-router.
Provides tools for inspecting and interacting with a Laravel + Vue application, including component tree, component state, Vue router info, and Pinia tree/state.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@Vue MCPshow me the component tree and Pinia state"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
laravel-vite-plugin-vue-mcp
This is a fork of vite-plugin-vue-mcp by Arlo (@webfansplz), adapted and published for the Laravel standard (Blade +
laravel-vite-plugin+ Inertia/Vue). All credits for the original idea and implementation go to the author.
Vite plugin that enables an MCP server for your Laravel + Vue app to provide information about the component tree, state, routes, and pinia tree and state.
Unlike plain SPA setups, a Laravel app has no index.html entry — the plugin detects Laravel projects (via the artisan file) and automatically attaches the MCP overlay to your JS entry point (resources/ts/main.ts, resources/js/app.js, or whatever is set in laravel-vite-plugin's input).
Installation 📦
# npm / yarn / pnpm / bun
pnpm add -D laravel-vite-plugin-vue-mcp
bun add -d laravel-vite-plugin-vue-mcp
npm install -D laravel-vite-plugin-vue-mcpOr install the latest commit from GitHub:
pnpm add -D github:Klipsik/laravel-vite-plugin-vue-mcp
npm install -D Klipsik/laravel-vite-plugin-vue-mcpRelated MCP server: Vite MCP Server
Usage 🔨
// vite.config.ts (Laravel project root)
import vue from '@vitejs/plugin-vue'
import laravel from 'laravel-vite-plugin'
import { VueMcp } from 'laravel-vite-plugin-vue-mcp'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
vue(),
laravel({
input: ['resources/ts/main.ts'],
refresh: true,
}),
VueMcp(), // overlay is appended to `resources/ts/main.ts` automatically
],
})Then the MCP server will be available at http://localhost:[port]/__mcp/sse (the URL follows your Vite dev server port, whatever it is).
By default the plugin registers the MCP server in your IDE configs — .cursor/mcp.json (when the folder exists), or explicitly in opencode.json / kilo.json via the updateMcpJson option:
VueMcp({
updateMcpJson: 'cursor|opencode|kilo',
})IDE configs
Besides Cursor, the plugin can register the MCP server in other IDE config files.
Use updateMcpJson with one or several IDEs (separated by , or |) — missing
folders and files are created, existing entries are preserved:
VueMcp({
updateMcpJson: 'cursor|opencode|kilo',
// or: updateMcpJson: { ide: ['cursor', 'kilo'], serverName: 'laravel-mcp' },
})Supported config files:
IDE | File | Server entry |
|
|
|
|
|
|
|
|
|
updateMcpJson: true updates all config files that already exist (does not create them),
updateMcpJson: false disables writing entirely. The legacy updateCursorMcpJson option
still works and is equivalent to updateMcpJson: 'cursor' with the additional requirement
that the .cursor folder already exists.
Laravel (Inertia/vue-router + Vue)
Laravel projects have no index.html entry (Blade + laravel-vite-plugin), so the plugin
automatically appends the overlay script to your JS entry instead of injecting it into HTML.
Laravel projects are auto-detected via the artisan file in the project root.
// vite.config.ts (Laravel project root)
import vue from '@vitejs/plugin-vue'
import laravel from 'laravel-vite-plugin'
import { VueMcp } from 'laravel-vite-plugin-vue-mcp'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
vue(),
laravel({
input: ['resources/ts/main.ts'],
refresh: true,
}),
VueMcp(), // overlay is appended to the `input` entry automatically
],
})The entry is detected from build.rollupOptions.input (set by laravel-vite-plugin,
e.g. resources/ts/main.ts) or the common Laravel conventions. If your entry differs,
point appendTo at it:
VueMcp({
// module id ending to append the overlay import to
appendTo: 'resources/js/app.ts',
})Laravel + Inertia apps do not use vue-router, so get-router-info returns null there;
all other tools (component tree/state, pinia) work the same.
You can disable Laravel mode explicitly with VueMcp({ laravel: false }).
Options
export interface VueMcpOptions {
/**
* The host to listen on, default is `localhost`
*/
host?: string
/**
* Print the MCP server URL in the console
*
* @default true
*/
printUrl?: boolean
/**
* The MCP server info. Ingored when `mcpServer` is provided
*/
mcpServerInfo?: McpServerInfo
/**
* Custom MCP server, when this is provided, the built-in MCP tools will be ignored
*/
mcpServer?: (viteServer: ViteDevServer) => Awaitable<McpServer>
/**
* Setup the MCP server, this is called when the MCP server is created
* You may also return a new MCP server to replace the default one
*/
mcpServerSetup?: (server: McpServer, viteServer: ViteDevServer) => Awaitable<void | McpServer>
/**
* The path to the MCP server, default is `/__mcp`
*/
mcpPath?: string
/**
* Update the MCP server address in your IDE config files:
* - `cursor`: `.cursor/mcp.json`
* - `opencode`: `opencode.json`
* - `kilo`: `kilo.json`
*
* Pass the IDE(s) as a string separated by `,` or `|` (e.g. `'cursor,kilo'`),
* `true` to update all existing config files, or an object for more options.
* Missing folders/config files are created.
*
* @default undefined
*/
updateMcpJson?: boolean | string | string[] | {
/**
* The IDE(s) to update, one or several separated by `,` or `|`
* Supported: `cursor`, `opencode`, `kilo`
*
* @default all known IDEs
*/
ide?: string | string[]
/**
* The name of the MCP server entry, default is `vue-mcp`
*/
serverName?: string
}
/**
* Update the address of the MCP server in the cursor config file `.cursor/mcp.json`,
* if `.cursor` folder exists.
*
* @deprecated use `updateMcpJson` instead
* @default true
*/
updateCursorMcpJson?: boolean | {
enabled: boolean
/**
* The name of the MCP server, default is `vue-mcp`
*/
serverName?: string
}
/**
* append an import to the module id ending with `appendTo` instead of adding a script into body
* useful for projects that do not use html file as an entry
*
* WARNING: only set this if you know exactly what it does.
* @default ''
*/
appendTo?: string | RegExp
/**
* Laravel integration, auto-detected via the presence of an `artisan` file.
*
* Laravel projects have no `index.html` entry (Blade + `laravel-vite-plugin`),
* so the overlay script is appended to your JS entry instead of being injected
* into an HTML file (see `appendTo`).
*
* The entry is detected from `build.rollupOptions.input` (set by
* `laravel-vite-plugin`) or common Laravel conventions. Override it with
* `appendTo`, or disable with `false`.
*
* @default 'auto'
*/
laravel?: boolean
}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 a fork of vite-plugin-vue-mcp by Arlo (@webfansplz), which is in turn inspired by vite-plugin-mcp. Thanks to @antfu and @webfansplz for the great work.
License 📖
This server cannot be deployed
Maintenance
Related MCP Connectors
Serves your design system and coding standards to coding agents, so they stop guessing.
The bug mediator for AI-built apps: plain-English diagnosis + a ready fix, in your editor.
Discover and install Aura UI Blade components for Laravel, Livewire and Tailwind CSS 4.
- FlareOAuthio.flareapp
Error tracking for Laravel and PHP apps. Let your agent fetch errors, stack traces and context.
Related MCP Servers
- AlicenseNot gradedqualityFmaintenanceProvides application insights for Vue apps by exposing component trees, state, routes, and Pinia data through a Model Context Protocol server.1,497 npm578MIT
- AlicenseBqualityCmaintenanceIntegrates Cursor AI with Vite Dev server, allowing AI agents to modify code and observe live updates through the Hot Module Replacement system in real-time.1687 npm23MIT
- AlicenseNot gradedqualityDmaintenanceEnables real-time debugging and state manipulation of Vue.js applications through MCP protocol, integrating with Vue DevTools to access component trees, states, router info, and Pinia stores.13 npm43MIT
- AlicenseAqualityBmaintenanceEnables AI assistants to incrementally build Laravel and Vue.js applications by creating file structures, methods, and code through natural conversation.5081 npm1MIT