vue -next

Vue MCP Next provides a runtime Model Context Protocol server for Vue.js applications. It allows real-time viewing and modification of a running Vue app's component state, exposes tools to inspect the component tree, router information, and Pinia stores, and integrates with the built-in MCP Inspector for debugging. After starting the MCP server, you can connect the MCP Inspector and use the available MCP endpoints (e.g., get-component-tree, get-component-state, edit-component-state, get-router-info, get-pinia-tree, get-pinia-state) to explore and manipulate the running application.

To use it, install the package in your project, start the MCP server (via the provided command), and ensure Vue DevTools is installed and connected. The server is designed to work with common build tools like Vite and Webpack and supports multi-tool integration through its plugin architecture. When running in development, the server port defaults to 8890 and the Vite dev server can run on 5174, with the MCP Inspector auto-starting if enabled in options.

Prerequisites

• Node.js and npm/yarn/pnpm installed
• Vue DevTools installed in your browser (required for runtime access)

Install (npm)

npm install vue-mcp-next

Install (yarn)

yarn add vue-mcp-next

Install (pnpm)

pnpm add vue-mcp-next

Start the MCP server (example)

# This uses npx as the MCP launcher for the package
npx -y vue-mcp-next

Connect your development environment to the MCP server on port 8890 (or the port you configured).

Important: Vue MCP Next relies on the Vue DevTools extension to access and manipulate the runtime state. Ensure the DevTools extension is installed and that it can connect to your running Vue application. The MCP server exposes endpoints for component tree viewing, state get/edit, router info, and Pinia state. If you encounter connection issues, verify that the DevTools is connected, that the MCP server port is accessible, and that the Vite/webpack tooling is configured to expose the application for debugging. The default MCP port is 8890; you can override it via plugin options or environment variables if supported by your setup.