Vite Plugin Vue MCP

🚀 vite-plugin-vue-mcp

一個 Vite 插件，啟用 Vue 應用的 MCP 服務器，提供組件樹、狀態、路由和 Pinia 樹及狀態的信息。

🚀 快速開始

本插件可讓你在 Vue 應用中啟用 MCP 服務器，獲取組件樹、狀態、路由和 Pinia 樹及狀態的信息。以下為你介紹安裝和使用方法。

📦 安裝指南

使用以下命令安裝本插件：

pnpm install vite-plugin-vue-mcp -D

💻 使用示例

基礎用法

在 vite.config.ts 中引入並使用該插件：

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

架構圖

下圖展示了 vite-plugin-vue-mcp 的整體架構：

功能概述

• 組件樹：即時監控和顯示 Vue 組件的層次結構。
• 狀態跟蹤：捕獲和展示每個組件的狀態數據。
• 路由信息：記錄當前活動路由的詳細信息，包括路徑、參數和查詢字符串。
• Pinia 樹：可視化 Pinia 的存儲結構及其數據。

⚠️ 重要提示

• 確保安裝了正確的依賴項。
• 在生產環境中可能需要額外的安全措施。
• 圖片鏈接保持不變，僅翻譯文本內容。

📄 許可證

本項目遵循相應的開源許可證，具體請查看 許可證鏈接。

致謝

感謝你選擇 vite-plugin-vue-mcp，如果你有任何問題或建議，請隨時提出。