vite-plugin-vue-mcp

vite-plugin-vue-mcp

Vue アプリのコンポーネントツリー、状態、ルート、Pinia ツリーと状態に関する情報を提供する 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

  /**
   * 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：コンポーネントの状態を編集します（入力：componentName、path、value、valueType）。

コンポーネントのハイライト

highlight-component：コンポーネントをハイライトします（入力：componentName）。

ルートの取得

get-router-info：アプリケーションの Vue ルーター情報を取得します。

Pinia ツリーの取得

get-pinia-tree：アプリケーションの Pinia ツリーを取得します。

Pinia の状態の取得

get-pinia-state：アプリケーションの Pinia の状態を取得します（入力：storeName）。

アーキテクチャ ⚡️

注意 💡

機能を使用する前に、ブラウザーでアプリケーションが実行されていることを確認してください。

謝辞 💖

このプロジェクトは vite-plugin-mcp に着想を得ています。素晴らしい成果を公開してくださった @antfu に感謝します。

ライセンス 📖

MIT ライセンス © Arlo