MCP cover image
See in Github
2025-03-29

Vite Plugin que permite que un servidor MCP ayude a modelos para comprender mejor su aplicación VUE.

3

Github Watches

20

Github Forks

354

Github Stars

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<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

相关推荐

  • Yusuf Emre Yeşilyurt
  • I find academic articles and books for research and literature reviews.

  • https://suefel.com
  • Latest advice and best practices for custom GPT development.

  • https://maiplestudio.com
  • Find Exhibitors, Speakers and more

  • Carlos Ferrin
  • Encuentra películas y series en plataformas de streaming.

  • Joshua Armstrong
  • Confidential guide on numerology and astrology, based of GG33 Public information

  • Elijah Ng Shi Yi
  • Advanced software engineer GPT that excels through nailing the basics.

  • Emmet Halm
  • Converts Figma frames into front-end code for various mobile frameworks.

  • lumpenspace
  • Take an adjectivised noun, and create images making it progressively more adjective!

  • https://appia.in
  • Siri Shortcut Finder – your go-to place for discovering amazing Siri Shortcuts with ease

  • Mintplex-Labs
  • La aplicación AI de escritorio todo en uno y Docker con trapo incorporado, agentes de IA, creador de agentes sin código, compatibilidad de MCP y más.

  • ravitemer
  • Un poderoso complemento Neovim para administrar servidores MCP (protocolo de contexto del modelo)

  • jae-jae
  • Servidor MCP para obtener contenido de la página web con el navegador sin cabeza de dramaturgo.

  • patruff
  • Puente entre los servidores Ollama y MCP, lo que permite a LLM locales utilizar herramientas de protocolo de contexto del modelo

  • pontusab
  • La comunidad de cursor y windsurf, encontrar reglas y MCP

  • n8n-io
  • Plataforma de automatización de flujo de trabajo de código justo con capacidades de IA nativas. Combine el edificio visual con código personalizado, auto-anfitrión o nube, más de 400 integraciones.

  • WangRongsheng
  • 🧑‍🚀 全世界最好的 llM 资料总结(数据处理、模型训练、模型部署、 O1 模型、 MCP 、小语言模型、视觉语言模型) | Resumen de los mejores recursos del mundo.

  • metorial
  • Versiones contenedores de cientos de servidores MCP 📡 🧠

  • av
  • Ejecute sin esfuerzo LLM Backends, API, frontends y servicios con un solo comando.

    Reviews

    4 (1)
    Avatar
    user_bBGmJoN2
    2025-04-17

    I've been using vite-plugin-vue-mcp for a while now, and it's incredibly efficient for streamlining my Vue.js development process. The plugin, developed by webfansplz, integrates seamlessly with Vite, offering amazing performance and ease of use. Highly recommended for Vue.js developers looking for a reliable build tool! Check it out: https://github.com/webfansplz/vite-plugin-vue-mcp.