Vue MCP Serverとは？

Vue MCP Serverは開発ツールで、ViteプラグインとしてVueプロジェクトに統合され、リアルタイムの可視化デバッグ機能を提供します。コンポーネントの階層構造、コンポーネントの状態、ルート情報、およびPinia状態管理データを表示し、開発者がアプリケーションをより直感的に理解してデバッグするのに役立ちます。

Vue MCP Serverの使い方は？

Viteの設定にプラグインを追加し、開発サーバーを起動した後、ブラウザで特定のURLにアクセスするだけで、さまざまなデバッグ機能を使用できます。プラグインは自動的にCursorエディタと統合され、シームレスな開発体験を提供します。

適用シーン

Vue 3プロジェクトの開発段階に適しており、特にコンポーネントの状態、ルートの変更、またはPinia状態管理を頻繁にデバッグする必要があるシーンに最適です。

🚀 vite-plugin-vue-mcp

[![npm 版本][npm-version-src]][npm-version-href] [![npm 下载量][npm-downloads-src]][npm-downloads-href] [![包大小][bundle-src]][bundle-href] [![许可证][license-src]][license-href]

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:[ポート]/__mcp/sse で利用可能になります。

Cursor を使用している場合は、プロジェクトのルートディレクトリに .cursor/mcp.json ファイルを作成してください。このプラグインは自動的にそれを更新します。MCP の詳細については、公式 Cursor ドキュメントを参照してください。

オプション

export interface VueMcpOptions {
  /**
   * 監視するホスト。デフォルトは `localhost` です。
   */
  host?: string

  /**
   * コンソールに MCP サーバーの URL を表示するかどうか。
   *
   * @default true
   */
  printUrl?: boolean

  /**
   * MCP サーバーの情報。`mcpServer` が提供された場合はこのオプションは無視されます。
   */
  mcpInfo?: {
    /** MCP のバージョン番号 */
    version: string
    /** MCP の説明 */
    description: string
  }

  /**
   * カスタム MCP サーバー。
   */
  mcpServer?: CustomMcpServer

  /** デフォルトの MCP サービスを有効にするかどうか。 */
  enabled?: boolean

  /** デフォルトのプロキシ設定。 */
  proxy?: {
    /** プロキシするターゲットの URL アドレス。 */
    target: string
    /** 生のレスポンスヘッダーを保持するかどうか。 */
    preserveHeaders?: boolean
    /** オリジンヘッダーを変更するかどうか。 */
    changeOrigin?: boolean
    /** ゲートウェイのプレフィックス。 */
    prefix?: string
  }

  /** 監視するポート。デフォルトは `4010` です。 */
  port?: number

  /** 監視するネットワークインターフェイス。 */
  interface?: string

  /** クロスオリジンリクエストを許可するかどうか。 */
  cors?: boolean | CorsOptions

  /** リクエストのログレベル。 */
  logLevel?: LogLevel
}

✨ 主な機能

コンポーネントツリー

export type ComponentTree = {
  /** コンポーネントの ID */
  id: string
  /** コンポーネントの名前 */
  name?: string
  /** コンポーネントのタイプ */
  type: 'component' | 'container'
  /** 親コンポーネントの ID */
  parentId?: string
  /** 子コンポーネントのリスト */
  children: ComponentTree[]
  /** コンポーネントのプロパティ */
  props: Record<string, any>
  /** コンポーネントの状態 */
  state: Record<string, any>
}

コンポーネントの状態

export type ComponentState = {
  /** コンポーネントの ID */
  id: string
  /** 現在のコンポーネントの状態 */
  state: Record<string, any>
}

ルート

export type RouteInfo = {
  /** ルートのパス */
  path: string
  /** ルートの名前 */
  name?: string
  /** ルートのパラメータ */
  params: Record<string, string>
  /** クエリパラメータ */
  query: Record<string, string>
  /** リクエストメソッド */
  method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH'
}

Pinia ツリー

export type PiniaTree = {
  /** Pinia の ID */
  id: string
  /** Pinia の名前 */
  name?: string
  /** 親 Pinia の ID */
  parentId?: string
  /** 子 Pinia のリスト */
  children: PiniaTree[]
  /** Pinia のデータ */
  data: Record<string, any>
}