xiaou66

xiaou66 / vite-plugin-vue-mcp-next

Public

Vite plugin template for Vue MCP runtime debugging.

10
0
85% credibility
Found May 20, 2026 at 10 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

This is a Vite plugin for Vue developers that creates a debugging bridge between your running web application and AI coding assistants. When you develop locally, the plugin exposes your app's internals—Vue components, console logs, network requests, and state—to AI tools like Cursor, Claude Code, Codex, or Trae. This lets AI assistants give you more accurate help because they can actually see what's happening in your live app, not just read your source code. The plugin only runs during development and has safety features like disabled script execution by default, masked sensitive headers, and data size limits.

How It Works

1
💬 You hear about AI-assisted debugging

A colleague tells you about a tool that lets AI coding assistants peek inside your running Vue app while you develop.

2
📦 You add the plugin to your project

You install the package and add two lines to your Vite setup, just like adding any other development tool.

3
🚀 You start your dev server

When you run your usual dev command, the plugin automatically starts a debugging service alongside your app.

4
🔗 Your AI assistant connects automatically

If you use Cursor, Claude Code, Codex, or Trae, the plugin quietly sets up the connection so your AI can talk to your running app.

5
Your AI can now see inside your app
🌳
Inspect components

The AI reads your Vue component tree, sees which components exist, and can peek at their current state.

📝
Read console logs

The AI sees your console output, helping it understand what's happening in your app.

🌐
Track network requests

The AI watches API calls, seeing what data your app requests and receives.

📸
Take screenshots

The AI can capture what your page looks like right now, useful for visual debugging.

6
💡 You get smarter AI help

Because the AI can see your actual running app, it gives advice that's based on your real code and data, not guesses.

✨ Your debugging feels magical

You can ask questions like 'why is this button showing the wrong count?' and the AI looks at your actual running app to find the answer.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 10 to 10 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is vite-plugin-vue-mcp-next?

This plugin turns your Vite dev server into an MCP (Model Context Protocol) server that AI coding assistants can query for live debugging data. While your app runs locally, the plugin exposes tools to read DOM structure, capture console logs, inspect network requests, and access Vue-specific state like component trees, router info, and Pinia stores. It works with Vue 3 apps and supports both SSE and Streamable HTTP transport protocols for connecting AI clients.

Why is it gaining traction?

The main draw is that it gives AI assistants real-time access to your running app without requiring you to manually dump state or screenshot things. You get 17 MCP tools out of the box, including screenshot capture, DOM querying, and even controlled script execution (opt-in). The plugin auto-configures MCP settings for popular AI tools like Cursor, Codex, Claude Code, and Trae, so setup is minimal. It also gracefully falls back from CDP (Chrome DevTools Protocol) to runtime hooks when you do not have a remote debugging session running.

Who should use this?

Frontend developers using Vue 3 with Vite who want AI assistants like Cursor or Claude Code to debug their apps more effectively. It is especially useful if you are building features that involve complex component state, router logic, or Pinia stores and want AI to reason about them accurately. If you just need basic DOM inspection without AI integration, Vue DevTools is a simpler alternative.

Verdict

This is a well-documented, thoughtfully designed plugin for a niche but growing use case. The 0.8500000238418579% credibility score reflects solid engineering practices, but with only 10 stars, the project is early-stage and community validation is minimal. If you are already using AI-assisted development workflows, this plugin removes friction in debugging sessions. For others, it may be worth watching rather than adopting immediately.

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.