Skip to main content
Glama

Vue MCP Server

by webfansplz
MIT License
1,186
483

vite-plugin-vue-mcp

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<McpServer> /** * 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<void | McpServer> /** * 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

-
security - not tested
A
license - permissive license
-
quality - not tested

Provides application insights for Vue apps by exposing component trees, state, routes, and Pinia data through a Model Context Protocol server.

  1. Installation 📦
    1. Usage 🔨
      1. Options
    2. Features/Tools ✨
      1. Get Component Tree
      2. Get Component State
      3. Edit Component State
      4. Highlight Component
      5. Get Routes
      6. Get Pinia Tree
      7. Get Pinia State
    3. Architecture ⚡️
      1. Notice 💡
        1. Credits 💖
          1. License 📖

            Related MCP Servers

            • A
              security
              A
              license
              A
              quality
              Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.
              Last updated -
              8
              0
              14
              TypeScript
              Apache 2.0
              • Apple
            • -
              security
              A
              license
              -
              quality
              A server that helps AI models better understand Vite/Nuxt applications, providing enhanced context awareness for development support.
              Last updated -
              718
              TypeScript
              MIT License
            • A
              security
              A
              license
              A
              quality
              mcp-server-chart
              Last updated -
              25
              4,065
              2,128
              TypeScript
              MIT License
              • Apple
            • -
              security
              F
              license
              -
              quality
              Provides real-time system metrics and information through a Model Context Protocol interface, enabling access to CPU usage, memory statistics, disk information, network status, and running processes.
              Last updated -
              1
              Python
              • Apple
              • Linux

            View all related MCP servers

            MCP directory API

            We provide all the information about MCP servers via our MCP API.

            curl -X GET 'https://glama.ai/api/mcp/v1/servers/webfansplz/vite-plugin-vue-mcp'

            If you have feedback or need assistance with the MCP directory API, please join our Discord server