Skip to main content
Glama

Vue MCP Server

by webfansplz
MIT License
179
394

vite-插件-vue-mcp

Vite 插件为您的 Vue 应用程序启用 MCP 服务器,以提供有关组件树、状态、路由以及 pinia 树和状态的信息。

安装📦

pnpm install vite-plugin-vue-mcp -D

用法🔨

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

然后 MCP 服务器将可以通过http://localhost:[port]/__mcp/sse访问。

如果您正在使用 Cursor,请在项目根目录下创建一个.cursor/mcp.json文件,此插件将自动为您更新。有关 MCP 的更多详细信息,请参阅Cursor 官方文档

选项

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 }

功能/工具✨

获取组件树

get-component-tree :获取 Vue 组件树。

组件树

获取组件状态

get-component-state :获取组件的状态(输入: componentName )。

组件状态

编辑组件状态

edit-component-state :编辑组件的状态(输入: componentNamepathvaluevalueType )。

编辑组件状态

突出显示组件

highlight-component :突出显示组件(输入: componentName )。

突出显示组件

获取路线

get-router-info :获取应用程序的 Vue 路由器信息。

路由树

获取 Pinia 树

get-pinia-tree :获取应用程序的 Pinia 树。

松树

获取 Pinia 州

get-pinia-state :获取应用程序的 Pinia 状态(输入: storeName )。

松属

建筑⚡️

建筑学

通知💡

在使用这些功能之前,请确保应用程序在您的浏览器中运行。

致谢💖

该项目灵感源自vite-plugin-mcp 。感谢@antfu的出色工作。

许可证📖

MIT许可证 © Arlo

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

通过模型上下文协议服务器公开组件树、状态、路由和 Pinia 数据,为 Vue 应用程序提供应用程序洞察。

  1. 安装📦
    1. 用法🔨
      1. 选项
    2. 功能/工具✨
      1. 获取组件树
      2. 获取组件状态
      3. 编辑组件状态
      4. 突出显示组件
      5. 获取路线
      6. 获取 Pinia 树
      7. 获取 Pinia 州
    3. 建筑⚡️
      1. 通知💡
        1. 致谢💖
          1. 许可证📖

            Related MCP Servers

            • A
              security
              A
              license
              A
              quality
              A Model Context Protocol server that allows AI assistants to interact with Appwrite's API, providing tools to manage databases, users, functions, teams, and other resources within Appwrite projects.
              Last updated -
              84
              40
              Python
              MIT License
              • Linux
              • 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 -
              637
              TypeScript
              MIT License
            • A
              security
              A
              license
              A
              quality
              A Model Context Protocol server that allows AI assistants to interact with the VRChat API, enabling retrieval of user information, friends lists, and other VRChat data through a standardized interface.
              Last updated -
              7
              132
              33
              TypeScript
              MIT License
              • Apple
            • -
              security
              F
              license
              -
              quality
              A Model Context Protocol server that provides a comprehensive interface for interacting with the ConnectWise Manage API, simplifying API discovery, execution, and management for both developers and AI assistants.
              Last updated -
              46
              2
              Python
              • Linux
              • Apple

            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