Vue MCP Next
Vue MCP Next bridges AI agents with Vue.js applications, enabling real-time component state inspection and manipulation through the Model Context Protocol. Built for AI-assisted development workflows
What is Vue MCP Next?
Vue MCP Next is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to vue mcp next bridges ai agents with vue.js applications, enabling real-time component state inspection and manipulation through the model context protocol. built for ai-assisted development workflows
Vue MCP Next bridges AI agents with Vue.js applications, enabling real-time component state inspection and manipulation through the Model Context Protocol. Built for AI-assisted development workflows
This server falls under the Coding Agents category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- Vue MCP Next bridges AI agents with Vue.js applications, ena
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx vue-mcp-nextConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use Vue MCP Next
Vue MCP Next bridges AI coding agents with live Vue.js applications by providing real-time inspection and manipulation of component state, the component tree, router information, and Pinia store state through the Model Context Protocol. It integrates directly into your Vite build configuration as a plugin, requires Vue DevTools to be active, and exposes an MCP server on port 8890 by default so tools like Cursor or Claude can query and modify your running app's state during development.
Prerequisites
- Node.js 16 or higher and npm/yarn/pnpm installed
- An existing Vue 3 project using Vite as the build tool
- Vue DevTools browser extension installed and connected to your application
- An MCP-compatible client such as Cursor or Claude Desktop
Install vue-mcp-next as a project dependency
Add the package to your Vue project. It is used as a Vite plugin and only active during development.
npm install vue-mcp-next
# or: yarn add vue-mcp-next
# or: pnpm add vue-mcp-nextRegister the plugin in your Vite configuration
Import and add the VueMcpNext plugin to your vite.config file. The port defaults to 8890; override it if that port is occupied.
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueMcpNext from 'vue-mcp-next'
export default defineConfig({
plugins: [
vue(),
VueMcpNext({
port: 8890,
inspector: {
enabled: true,
autoStart: false
}
})
]
})Enable Vue DevTools
Install the Vue DevTools browser extension and open your dev server in the browser. The MCP server requires an active DevTools connection to communicate with your application's component tree.
Start your development server
Run your Vite dev server normally. Vue MCP Next will start its MCP listener on the configured port alongside your app.
npm run devConfigure your MCP client to connect
Add vue-mcp-next to your MCP client configuration pointing at the running local server endpoint.
{
"mcpServers": {
"vue-mcp-next": {
"command": "npx",
"args": ["vue-mcp-next"],
"env": {}
}
}
}Vue MCP Next Examples
Client configuration
claude_desktop_config.json entry for Vue MCP Next. Ensure your Vue dev server is already running with the plugin active before connecting the client.
{
"mcpServers": {
"vue-mcp-next": {
"command": "npx",
"args": ["vue-mcp-next"],
"env": {}
}
}
}Prompts to try
Example prompts that use the component tree, state inspection, and Pinia store tools exposed by the MCP server.
- "Show me the current component tree of my running Vue app"
- "What is the current state of the UserProfile component's data properties?"
- "Update the isLoggedIn property in the auth Pinia store to true"
- "What is the current route and what route params are active?"
- "Highlight the NavBar component in the browser so I can see where it is in the DOM"Troubleshooting Vue MCP Next
MCP server fails to connect or times out
Ensure Vue DevTools is installed and actively connected to your browser tab before your AI client tries to communicate. The MCP server depends on the DevTools bridge — without it, the component tree is inaccessible.
Port 8890 is already in use
Change the port in your Vite config by passing `port: <number>` to the VueMcpNext plugin options, then update any MCP client URL references to match the new port.
Component state reads as empty or stale
Refresh the browser tab so the DevTools connection re-initializes. If the app is in production mode, ensure you are running the development server (`npm run dev`) not a production build, as Vue DevTools only works with development builds.
Frequently Asked Questions about Vue MCP Next
What is Vue MCP Next?
Vue MCP Next is a Model Context Protocol (MCP) server that vue mcp next bridges ai agents with vue.js applications, enabling real-time component state inspection and manipulation through the model context protocol. built for ai-assisted development workflows It connects AI assistants to external tools and data sources through a standardized interface.
How do I install Vue MCP Next?
Follow the installation instructions on the Vue MCP Next GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with Vue MCP Next?
Vue MCP Next works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is Vue MCP Next free to use?
Yes, Vue MCP Next is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
Vue MCP Next Alternatives — Similar Coding Agents Servers
Looking for alternatives to Vue MCP Next? Here are other popular coding agents servers you can use with Claude, Cursor, and VS Code.
Dify
★ 142.2kProduction-ready platform for agentic workflow development.
Ruflo
★ 54.0k🌊 The leading agent orchestration platform for Claude. Deploy intelligent multi-agent swarms, coordinate autonomous workflows, and build conversational AI systems. Features enterprise-grade architecture, self-learning swarm intelligence, RAG integrat
Goose
★ 45.7kan open source, extensible AI agent that goes beyond code suggestions - install, execute, edit, and test with any LLM
Antigravity Awesome Skills
★ 38.3kInstallable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.
AgentScope
★ 25.5kBuild and run agents you can see, understand and trust.
Serena
★ 24.5kA coding agent toolkit that provides IDE-like semantic code retrieval and editing tools, enabling LLMs to efficiently navigate and modify codebases using symbol-level operations instead of basic file reading and string replacements.
Browse More Coding Agents MCP Servers
Explore all coding agents servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up Vue MCP Next in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use Vue MCP Next?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.