Skip to main content
Glama
webfansplz

Vue MCP Server

by webfansplz

vite-プラグイン-vue-mcp

npmバージョン npmダウンロード バンドル ライセンス

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

インストール📦

pnpm install vite-plugin-vue-mcp -D

Related MCP server: nuxt-mcp / vite-plugin-mcp

使用方法🔨

// 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 ルーター情報を取得します。

ルートツリー

ピニアツリーを入手する

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

マツ科

ピニア州を取得する

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

ピニア州

建築⚡️

建築

お知らせ💡

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

クレジット💖

このプロジェクトはvite-plugin-mcpにインスピレーションを受けています。素晴らしい仕事をしてくださった@antfuに感謝します。

ライセンス📖

MITライセンス © Arlo

A
license - permissive license
-
quality - not tested
F
maintenance

Maintenance

Maintainers
Response time
Release cycle
Releases (12mo)
Commit activity
Issues opened vs closed

Resources

Unclaimed servers have limited discoverability.

Looking for Admin?

If you are the server author, to access and configure the admin panel.

Related MCP Servers

View all related MCP servers

Related MCP Connectors

  • A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…

  • A Model Context Protocol server for Wix AI tools

  • MCP (Model Context Protocol) server for Appwrite

View all MCP Connectors

Latest Blog Posts

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