xiaou66/vite-plugin-vue-mcp-next

★ 11TypeScriptAudience · developerComplexity · 3/5ActiveSetup · easy

Mindmap

mindmap
  root((vite-plugin-vue-mcp-next))
    Inputs
      Vite plugin config
      Browser runtime hooks
    Outputs
      MCP SSE endpoint
      DOM and screenshots
      Vue and Pinia state
    Use Cases
      Debug Vue with AI
      Inspect live state
      Capture network logs
    Tech Stack
      TypeScript
      Vite
      Vue
      MCP
      Pinia

mindmap root((vite-plugin-vue-mcp-next)) Inputs Vite plugin config Browser runtime hooks Outputs MCP SSE endpoint DOM and screenshots Vue and Pinia state Use Cases Debug Vue with AI Inspect live state Capture network logs Tech Stack TypeScript Vite Vue MCP Pinia

Things people build with this

USE CASE 1

Let Cursor or Claude Code inspect your running Vue app via MCP

USE CASE 2

Capture page screenshots and DOM trees during local Vite development

USE CASE 3

Read Pinia store state and Vue component trees from an AI client

USE CASE 4

Stream console logs and network requests into an MCP-aware editor

Tech stack

TypeScriptViteVueMCPPinia

Getting it running

Difficulty · easy Time to first run · 5min

Drop into your Vite plugins array and an MCP-aware AI tool config is auto-written if its folder exists.

In plain English

vite-plugin-vue-mcp-next is a Vite plugin that turns a running Vite dev server into a Model Context Protocol endpoint, so AI tools can inspect the Vue app you are building. When the plugin is active, the Vite dev server exposes an SSE address at /__mcp/sse and a streamable HTTP address at /__mcp/mcp, and it injects browser-side hooks that report runtime information back through those endpoints. The plugin is for local development only and is not bundled into production builds. The data the AI client can read includes the list of open pages, a trimmed DOM tree, results of DOM selector queries, a page screenshot saved to disk or returned as base64, console logs at log, info, warn, error, and debug level, captured network requests with URL, query, body, status, headers, and response body, the Vue component tree, individual component state with read and edit, current router information, and the Pinia inspector tree plus store state. Running arbitrary JavaScript through an Evaluate tool is off by default and must be turned on explicitly. Install with pnpm add -D @xiaou66/vite-plugin-vue-mcp-next and add vueMcpNext() to your Vite plugins array next to the Vue plugin. After Vite starts, the plugin auto-writes project-level MCP configuration into .cursor/mcp.json for Cursor.codex/config.toml for Codex.mcp.json for Claude Code, and .trae/mcp.json for Trae, but only when the matching tool folder already exists in the project. The npm package also ships a static SKILL.md guidance file. When the plugin sees one of the supported AI tool directories, it copies that file into the right subdirectory so the AI has a usage guide describing the recommended tool order: list_pages, then get_dom_tree or query_dom, then take_screenshot, then get_console_logs, then network inspection, then the Vue-specific tools. Many behaviours are configurable through the plugin options, including the MCP path, host, server name, network capture limits, masked headers, DOM depth, console buffer, and screenshot mode (file path or base64).

Copy-paste prompts

Prompt 1

Walk me through installing vite-plugin-vue-mcp-next and wiring vueMcpNext() into vite.config.ts

Prompt 2

Show me how to enable the Evaluate tool safely and what risks it adds

Prompt 3

Help me read the auto-generated .cursor/mcp.json and adjust the MCP path

Prompt 4

Explain the recommended tool order from list_pages through Pinia inspection

Prompt 5

Generate a config that masks sensitive headers and caps DOM depth at 5

Open on GitHub → Explain another repo

Generated 2026-05-22 · Model: sonnet-4-6 · Verify against the repo before relying on details.