[Claude] Web開発をMCPでバイブコーディングで開発する

AntigravityでGeminiを使ってWeb開発をやっておりましたが、Google WorkspaceだけではAIの制限がありすぐに限界が来てしまいました。
GoogleのAIのプロプランに入ろうと思いましたが、以前にClaudeを使ってBlenderなどをAIで作成する記事を記載していたこともあり、ClaudeのProプランを契約してしまいました。

[Blender] Blender MCPを導入してAIを使って制作

GitHub CopilotやContinueなどのIDE拡張機能は便利ですが、これらはClaude APIを使用するため、プロプランとは別に従量課金が発生します。せっかく月額料金を支払っているのに、開発でも追加料金が必要になるのは避けたいところです。
実は、Claude Desktop + MCPサーバーを組み合わせることで、プロプランの利用枠内でバイブコーディング（AIと対話しながらコードを書く開発スタイル）が可能になります。

0.環境

Mac 26.1
Node.js: v18以上推奨
Claude Desktop App 1.0.2339 (https://claude.com/ja-jp/download)
Claude アカウント
Web開発プロジェクト

Claude Desktop + MCPは、IDE統合の便利さを少し犠牲にする代わりに、プロプランの恩恵を最大限活用できる唯一の方法です。

1. 設定手順

1.1 Claude Desktopのインストール

ClaudeサイトからClaude Desktopをダウンロード
アプリが正常に起動することを確認

1.2 プロジェクトパスの確認

ターミナルで、バイブコーディングを行いたいプロジェクトディレクトリに移動し、絶対パスを取得します。

cd /path/to/your/project
pwd

出力された絶対パスをコピーしておきます。

/Users/username/Develop/MyProject

1.3 設定ファイルの作成

Claude Desktopの設定ファイルを作成します。

1.3.1. 設定ディレクトリの確認

ls ~/Library/Application\ Support/Claude/

※もしディレクトリが存在しない場合は作成します。

mkdir -p ~/Library/Application\ Support/Claude/

1.3.2 設定ファイルの作成

touch ~/Library/Application\ Support/Claude/claude_desktop_config.json

1.3.3 設定内容の記述

open -a TextEdit ~/Library/Application\ Support/Claude/claude_desktop_config.json

以下の内容を記述（パスは自分のプロジェクトパスに置き換えてください）。

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/YOUR_USERNAME/path/to/your/project"
      ]
    }
  }
}

重要ポイント：

YOUR_USERNAMEとpath/to/your/projectを実際の値に置き換える
パスは絶対パスで指定する（~/は使えません）

1.4 Claude Desktopの再起動

設定を反映させるため、Claude Desktopアプリを完全に終了して再起動します。

メニューバー「Claude」→「Quit Claude」で終了
または Command + Q で終了
再度Claude Desktopを起動

1.5 動作確認

Claude Desktopで新しい会話を開始し、以下のように質問してみます。

プロジェクトのファイル一覧を表示してください

初回のみ、MCPサーバーの使用許可を求められます。
許可すると、Claudeがファイル一覧を表示してくれます。

[FILE] .gitignore
[FILE] package.json
[FILE] README.md
[DIR] src
[DIR] public

1.6 CLAUDE.mdの活用（推奨）

プロジェクトルートにCLAUDE.mdファイルを作成し、プロジェクト情報を記載しておくと、Claudeがプロジェクトを理解しやすくなります。

# MyProject
# プロジェクト名

## プロジェクト概要
[プロジェクトの説明]

## 技術スタック
- Framework: Astro
- Language: TypeScript
- Styling: Tailwind CSS

## プロジェクト構造
src/
├── components/
├── layouts/
├── pages/
└── ...

## 開発ルール
- [コーディング規約]
- [命名規則]

## 実装状況
- ✅ 完了した機能
- ⚠️ 部分実装
- ❌ 未実装

この状態で以下のような質問をしましょう。

CLAUDE.mdを読み込んで、プロジェクトの概要を理解してください

このように依頼すると、Claudeがプロジェクト全体を把握してから作業を開始できます。

2. オプション設定

2.1 Git連携の追加

Gitの履歴確認やコミット操作も行いたい場合は、まずは「uv」をインストールします。

brew install uv

「claude_desktop_config.json」を以下のように「git」を追加する。

{
  "mcpServers": {
    "filesystem": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-filesystem",
        "/Users/YOUR_USERNAME/path/to/your/project"
      ]
    },
    "git": {
      "command": "uvx",
      "args": [
        "mcp-server-git",
        "--repository",
        "/Users/YOUR_USERNAME/path/to/your/project"
      ]
    }
  }
}

3. 実際の使い方のコツ

開発時に以下のような指示を出すと効果的です。

CLAUDE.mdを読み込んでプロジェクトを理解し、現在の実装状況を教えてください

ユーザー認証機能を実装したいです。
必要なファイルの作成・修正を提案してください。

src/components/Header.astroを確認して、改善点を教えてください

4. ファイル操作の許可について

各MCPツールの初回使用時のみ許可が必要
同じ会話内では再度聞かれない
新しい会話を開始すると、再度許可が必要

5. トラブルシューティング

Q. ファイル一覧が表示されない

以下の手順で確認してください。

claude_desktop_config.jsonのパスが正しいか
Claude Desktopを再起動したか
Node.jsがインストールされているか（node –versionで確認）

Q. パスの指定方法が分からない

以下のコマンドをターミナルで実行します。

cd /your/project/directory
pwd

Q. 設定ファイルが認識されない

「claude_desktop_config.json」の内容に問題がないか確認してください。

cat ~/Library/Application\ Support/Claude/claude_desktop_config.json

あとはわからない事があっても、Claudeに聞いてみましょう！

6. まとめ

Claude Desktop + MCPサーバーを使うことで：
✅ プロプランの利用枠内で開発支援を受けられる
✅ API料金が不要
✅ ファイルの読み書き、検索が可能
✅ プロジェクト情報をCLAUDE.mdで管理すれば理解が早い
IDE統合には劣りますが、コスト面では圧倒的に有利です。プロプランユーザーなら、ぜひ試してみてください！