Vite MCP Server
Vite MCPサーバーでClaude連携・フロントエンドビルドを自動化
最終更新：2026年3月27日
クイックインストール
npx vite-mcp-server概要
Vite MCP Serverの設定方法と使い方。
高速フロントエンドビルドツール「Vite」をClaudeから操作できるMCPサーバー。
開発サーバーの起動・ビルドの実行・vite.configの解析・プラグイン設定の確認が可能。
ClaudeとViteのMCPサーバー連携により、ビルドエラーの自動解析・設定の最適化提案・プロジェクト構成の把握を自動化できる。
React・Vue・Svelteなど主要フレームワークのViteプロジェクトをAIから制御できる。
設定方法はプロジェクトルートを設定するだけでシンプルに完結する。
料金・APIキー情報
APIキー
🔓 不要✅このMCPはAPIキー不要です。別途セットアップが必要な場合があります（上記参照）。
こんな使い方ができます
Viteのビルドエラーをクロードが解析して原因と修正方法を提案できる
vite.config.tsの設定をClaudeが確認してパフォーマンス最適化を提案できる
開発サーバーの起動をClaudeが管理してホットリロードの動作を確認できる
Viteのプラグイン設定をClaudeが解析して互換性問題を検出できる
セットアップ手順
- 1
Viteプロジェクトのルートパスを確認する
- 2
claude mcp add vite -e PROJECT_ROOT=/path/to/vite-project -- npx -y vite-mcp-server
- 3
Claudeで「Viteの設定ファイルを確認して」と指示して動作確認する
設定ファイル
⚠️
コピー前に確認
Node.js 18以上が必要。vite.config.ts/jsを持つViteプロジェクトが必要。
Terminal
claude mcp add vite -e PROJECT_ROOT=/path/to/your/vite-project -- npx -y vite-mcp-server#Vite#ビルドツール#JavaScript#フロントエンド#HMR