Related MCP Server Resources

Explore more AI models, providers, and integration options:

  • Explore AI Models
  • Explore AI Providers
  • Explore MCP Servers
  • LangDB Pricing
  • Documentation
  • AI Industry Blog
  • Zenn MCP Server
  • MindManager MCP Server
  • OWASP Cheatsheets MCP Server
  • Phrases MCP Server
  • Chrome Debug MCP Server
Back to MCP Servers
Vue MCP Server

Vue MCP Server

Public
webfansplz/vite-plugin-vue-mcp

Enables a Model Context Protocol server for Vue apps to inspect and manipulate the component tree, state, routes, and Pinia store data in real-time for enhanced debugging and development.

javascript
0 tools
May 29, 2025
Updated Jun 4, 2025

Supercharge Your AI with Vue MCP Server

MCP Server

Unlock the full potential of Vue MCP Server through LangDB's AI Gateway. Get enterprise-grade security, analytics, and seamless integration with zero configuration.

Unified API Access
Complete Tracing
Instant Setup
Get Started Now

Free tier available • No credit card required

Instant Setup
99.9% Uptime
10,000+Monthly Requests

vite-plugin-vue-mcp

npm version npm downloads bundle License

Vite plugin that enables a MCP server for your Vue app to provide information about the component tree, state, routes, and pinia tree and state.

Installation 📦

pnpm install vite-plugin-vue-mcp -D

Usage 🔨

// vite.config.ts import { VueMcp } from 'vite-plugin-vue-mcp' export default defineConfig({ plugins: [VueMcp()], })

Then the MCP server will be available at http://localhost:[port]/__mcp/sse.

If you are using Cursor, create a .cursor/mcp.json file in your project root, this plugin will automatically update it for you. For more details about the MCP, check the official Cursor documentation.

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 /** * 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 /** * The path to the MCP server, default is `/__mcp` */ mcpPath?: string /** * Update the address of the MCP server in the cursor config file `.cursor/mcp.json`, * if `.cursor` folder exists. * * @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 }

Features/Tools ✨

Get Component Tree

get-component-tree: Get the Vue component tree.

!component-tree

Get Component State

get-component-state: Get the state of a component (input: componentName).

!component-state

Edit Component State

edit-component-state: Edit the state of a component (input: componentName, path, value, valueType).

!edit-component-state

Highlight Component

highlight-component: Highlight a component (input: componentName).

!highlight-component

Get Routes

get-router-info: Get the Vue router info of the application.

!route-tree

Get Pinia Tree

get-pinia-tree: Get the Pinia tree of the application.

!pinia-tree

Get Pinia State

get-pinia-state: Get the Pinia state of the application (input: storeName).

!pinia-state

Architecture ⚡️

!architecture

Notice 💡

Please ensure the application is running in your browser before using the features.

Credits 💖

This project is inspired by vite-plugin-mcp. Thanks to @antfu for the great work.

License 📖

MIT License © Arlo

Publicly Shared Threads0

Discover shared experiences

Shared threads will appear here, showcasing real-world applications and insights from the community. Check back soon for updates!

Share your threads to help others
Related MCPs5
  • Zenn MCP Server
    Zenn MCP Server

    An unofficial Model Context Protocol server for Zenn that enables fetching lists of articles and boo...

    Added May 30, 2025
  • MindManager MCP Server
    MindManager MCP Server

    Enables programmatic interaction with MindManager on Windows and macOS via the Model Context Protoco...

    9 tools
    Added May 30, 2025
  • OWASP Cheatsheets MCP Server
    OWASP Cheatsheets MCP Server

    Minimal Model Context Protocol (MCP) server delivering OWASP Cheat Sheets via a FastAPI HTTP API wit...

    Added May 30, 2025
  • Phrases MCP Server
    Phrases MCP Server

    Efficient MCP (Model Context Protocol) server for managing inspirational phrases with full CRUD capa...

    6 tools
    Added May 30, 2025
  • Chrome Debug MCP Server
    Chrome Debug MCP Server

    Model Context Protocol server enabling advanced browser automation with Playwright, featuring multi-...

    13 tools
    Added May 30, 2025