Vue MCP Server

local-only server

The server can only run on the client’s local machine because it depends on local resources.

Integrations

  • Provides integration with Vite development servers to expose component and state data through MCP endpoints.

vite-プラグイン-vue-mcp

Vue アプリの MCP サーバーがコンポーネント ツリー、状態、ルート、ピニア ツリーと状態に関する情報を提供できるようにする Vite プラグイン。

インストール📦

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 /** * The port to listen on, default is the port of the Vite dev server */ port?: number /** * 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 ルーター情報を取得します。

ピニアツリーを入手する

get-pinia-tree : アプリケーションの 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. 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 📖
            ID: wxe5s8ifko