🤖
MCPサーバー（Serena、Context7、 Playwright）を活用してバイブコーディングをしてみる

2025/08/28に公開
 1. はじめにMCP界隈で話題のMCPサーバー、Serena、Context7、Playwrightをまだ利用したことがなかったので、試しに使ってみました。

今回はGemini CLIと連携して簡単なTODOアプリをつくってみます。

 2. 使用するMCPサーバー本記事では、以下の3つのMCPサーバーを利用します。

 Serena
プロジェクト内のコード構造をAIに提供するMCPサーバーです。

LSP (Language Server Protocol) を利用し、関数やクラスの定義、参照関係といったコードの構造情報を正確に把握します。これにより、AIによる高精度なコード解析やリファクタリングを可能にします。
https://github.com/oraios/serena

 Context7
最新の外部ライブラリドキュメントをAIに提供するMCPサーバーです。

AIが利用するライブラリの最新API仕様やコード例をWeb上から検索し、コンテキストとして注入します。LLMの学習データが古いことに起因する、不正確な情報の生成を防ぎます。
https://github.com/upstash/context7

 Playwright
ブラウザ操作を自動化し、アプリケーションの動作を検証するMCPサーバーです。

自然言語の指示に基づき、E2Eテストなどを実行します。実装した機能が意図通りに動作するかを、コード実行後に即座に確認できます。
https://github.com/microsoft/playwright-mcp

 3. TODOアプリの仕様TODOアプリの仕様は以下の通りです。今回は、基本的な機能を持つシンプルなシングルページアプリケーションを作成します。

 機能要件
タスクを新規作成できる。
タスクの一覧を参照できる。
各タスクを完了状態にできる。完了したタスクは見た目で区別される。
完了したタスクを未完了状態に戻せる。
タスクを削除できる。

 画面構成
画面は単一ページで構成され、以下の要素を持ちます。
新規タスクを入力するテキストボックス
タスクを追加するボタン
未完了タスクの一覧
完了済みタスクの一覧

 4. 開発環境の構築はじめに、TODOアプリを開発するための環境を構築します。

 4-1. プロジェクト作成（Vite + React）
まず、Viteを利用してReactとTypeScriptのプロジェクトを作成します。ターミナルで以下のコマンドを実行してください。
npm create vite@latest my-todo-app
frameworkはReact、variantはTypeScriptを選択します。

これでmy-todo-appという名前の、ReactとTypeScriptを利用するプロジェクトが作成されます。

プロジェクトが作成されたら、my-todo-appに移動します。
cd my-todo-app

 4-2. uvのインストール
Serenaの実行には、高速なPythonパッケージ管理ツールであるuvが必要です。以下のいずれかの方法でインストールしてください。
方法1：公式推奨の方法
uvをPython環境から独立したツールとしてインストールします。公式ドキュメントで最も推奨されている方法です。
macOS / Linux の場合:
curl -LsSf https://astral.sh/uv/install.sh | sh
Windows (PowerShell) の場合:
powershell -c "irm https://astral.sh/uv/install.ps1 | iex"
方法2：pipを利用する方法
Pythonのパッケージとしてインストールすることも可能です。
pip install uv
いずれかの方法でインストール後、ターミナルを再起動し、以下のコマンドでバージョンが表示されれば成功です。
uv --version

 4-3. MCPサーバーの設定
次に、今回利用する3つのMCPサーバーをGemini CLIに認識させるための設定を行います。

今回はGemini CLIを利用するため、プロジェクトのルートディレクトリに.gemini/settings.jsonファイルを作成し、以下の内容を記述します。
{
  "mcpServers": {
    "serena": {
      "command": "uvx",
      "args": ["--from", "git+https://github.com/oraios/serena", "serena", "start-mcp-server", "--context", "ide-assistant", "--project", "."]
    },
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    },
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

 4-4. MCPサーバーの起動確認
MCPサーバーの設定が完了したら、Gemini CLIを起動し、サーバーが正しく認識されているかを確認します。

プロジェクトのルートディレクトリで、Gemini CLIを起動してください。
gemini
起動するとSERENA LOGSという画面が立ち上がります。

この画面は閉じても大丈夫です。
起動後、チャット内で以下のコマンドを入力します。
/mcp list
このコマンドにより、.gemini/settings.jsonに設定したサーバーの一覧が表示されます。serena, context7 playwright の3つが表示されれば、正しく設定が読み込まれています。

 4-5. Serenaによるプロジェクトの初期解析
MCPサーバーの起動が確認できたら、AIとの対話を本格的に始める前に、Serenaにプロジェクト全体を解析させます。これは、AIが今後の開発でコードの文脈を正確に理解するための、下準備となります。
AIに以下のように指示を出します。
プロンプト例:
Serenaを利用して、このプロジェクトの全体像を把握してください。
プロジェクトの主要なファイル構成について教えてください。
また、今後すべて日本語での対話をお願いします。
この指示により、Serenaはプロジェクト全体のファイル構造をスキャンし、インデックスを作成します。このプロセスが完了すると、プロジェクトのルートに.serenaディレクトリが生成されます。これが、Serenaがプロジェクトを解析した証です。
ちなみに日本語での対話をお願いしている理由は、なぜか英語で伝えようとしてくるのを防ぐためにいれています。

 5. TODOアプリの開発手順環境構築が完了したので、ここからAIに指示を出し、TODOアプリの機能をステップごとに実装していきます。

 5-1. AIへの仕様のインプット
開発を始めるにあたり、まずAIに対して、これから作成するTODOアプリの仕様を伝えます。これにより、AIと開発のゴールについて共通認識を持つことができます。
プロンプト例:
これからTODOアプリを開発します。

まず、開発方針として、この開発では以下のMCPサーバーを積極的に活用します。
- Serena: コードの構造理解と編集
- Context7: 最新のライブラリ情報の参照
- Playwright: 動作検証
これらのツールを適切な場面で利用しながら、ステップ・バイ・ステップで進めていきましょう。

次に、作成するアプリの仕様は以下の通りです。

**機能要件:**
- タスクを新規作成できる。
- タスクの一覧を参照できる。
- 各タスクを完了状態にできる。完了したタスクは見た目で区別される。
- 完了したタスクを未完了状態に戻せる。
- タスクを削除できる。

**画面構成:**
- 新規タスクを入力するテキストボックス
- タスクを追加するボタン
- 未完了タスクの一覧
- 完了済みタスクの一覧

仕様を理解しましたら報告のみを行い、次の指示を待ってください。
このプロンプトにより、AIはプロジェクトの全体像と最終的なゴール、そして開発の進め方を理解します。この共通認識があることで、以降のステップでより的確なコード生成やツール利用が期待できるはずです。

 5-2. UIコンポーネントの作成
まず、アプリケーションの見た目を構成する静的なUIコンポーネントを作成します。ロジックは含めず、見た目の部品を先に準備する工程です。

ここでは、タスクの入力フォームであるTodoInputと、タスク1件を表示するTodoItemの2つのコンポーネントを作成します。
1. タスク入力フォームの作成
はじめに、新規タスクを入力し、追加するためのフォーム部分を作成します。AIに以下のように指示します。
プロンプト例:
`src/components/TodoInput.tsx` というファイルを作成してください。
内容は、テキスト入力欄と「追加」ボタンを持つ、Reactコンポーネントとします。
スタイリングはCSS Modulesを利用してください。
作業が完了したら、報告のみを行い、次の指示を待ってください。
この指示により、AIは指定されたパスにファイルを生成し、基本的なフォームコンポーネントのコードを出力します。
[コードブロック：生成されたTodoInput.tsxのコード]
[スクリーンショット：生成されたTodoInput.コンポーネントのブラウザ表示]
2. タスク表示アイテムの作成
次に、タスク1件分の表示を担当するコンポーネントを作成します。
プロンプト例:
`src/components/TodoItem.tsx` を作成してください。
内容は、タスクの完了状態を示すチェックボックス、タスク名を表示するテキスト、削除ボタンを持つReactコンポーネントとします。
こちらもCSS Modulesでスタイリングしてください。
作業が完了したら、報告のみを行い、次の指示を待ってください。
同様に、AIは指示に従ってTodoItemコンポーネントを生成します。
[コードブロック：生成されたTodoItem.tsxのコード]
[スクリーンショット：生成されたTodoItemコンポーネントのブラウザ表示]

 5-3. 状態管理とロジックの実装
UIコンポーネントの準備ができたので、次にアプリケーションの状態を管理し、操作するためのロジックを実装します。今回は、状態管理のロジックをカスタムフック（useTodos）として作成します。
AIには以下のように、タスクIDを生成するために外部ライブラリuuidの利用と、その際にContext7を活用することを指示します。
プロンプト例:
`src/hooks/useTodos.ts` というファイルを作成し、`useTodos` カスタムフックを実装してください。

要件は以下です。
- タスクIDは、`uuid`ライブラリを使って生成してください。`context7`ツールを利用して、このライブラリの最新の正しい使い方を調べ、それを反映してください。
- `useState` を使って `todos` の配列を管理する。
- `todo` の型は `{ id: string; text: string; completed: boolean; }` とする。
- タスクを追加する `addTodo` 関数を実装する。
- タスクの完了状態を切り替える `toggleTodo` 関数を実装する。
- タスクを削除する `deleteTodo` 関数を実装する。
作業が完了したら、報告のみを行い、次の指示を待ってください。
この指示により、AIはuuidライブラリの使い方を調べるためにContext7を利用します。

Context7を利用するために以下のように承諾を求めてきますので許可します。
Context7は、uuidの最新バージョンのドキュメントを参照し、現在推奨されている正しい使い方をAIに提供します。その結果、開発者はライブラリの仕様を自分で調べる手間なく、AIの支援だけで、正確かつモダンなコードを実装できます。

 5-4. コンポーネントの結合
最後に、これまで作成したUIコンポーネントと状態管理ロジックを、アプリケーションのルートとなるApp.tsxファイルで結合し、TODOアプリを完成させます。
AIには、各コンポーネントとフックをどのように連携させるかを具体的に指示します。
プロンプト例:
`src/App.tsx` を編集してください。

要件は以下です。
- `useTodos` カスタムフックを呼び出す。
- `TodoInput` コンポーネントを配置し、タスクを追加できるように `addTodo` 関数を渡す。
- `todos` 配列をマップして `TodoItem` コンポーネントを一覧表示する。
- 各 `TodoItem` には、タスクの情報と、`toggleTodo` および `deleteTodo` 関数を渡す。
作業が完了したら、報告のみを行い、次の指示を待ってください。
この指示は、複数のファイルにまたがる複雑なものです。AIがこのタスクを正確に実行できるのは、Serenaが各ファイルの役割と、コンポーネント間のpropsの受け渡し、フックの依存関係といった構造を正確に解析しているためです。
これで、TODOアプリの基本的な機能がすべて実装できました。

 6. Playwrightによる動作検証アプリケーションの機能が実装できたので、次にPlaywrightを利用して、E2Eテストを行い、動作が仕様通りであることを検証します。

E2Eテストとは、ユーザーの視点で、アプリケーションの最初から最後までの操作の流れが正しく機能するかを確認するテストです。

 6-1. テストシナリオの指示
専門的なテストコードを書く代わりに、AIに自然言語でテストシナリオを指示します。
プロンプト例:
Playwrightを使って、現在開発中のTODOアプリのE2Eテストを実行してください。テスト対象のURLは `http://localhost:5173/` です。

シナリオは以下です。
1. 新規タスク「テストタスク」を追加する。
2. 「テストタスク」がリストに表示されることを確認する。
3. 「テストタスク」を完了にする。
4. 「テストタスク」が削除されることを確認する。

各ステップの実行結果を報告してください。

 6-2. テストの実行と結果
この指示を受け取ると、AIはPlaywright MCPのツールを起動します。

ここでもPlaywrightを利用するために以下のように承諾を求めてきますので許可します。
許可するとPlaywrightは、バックグラウンドでブラウザを立ち上げます。
プロンプトで指示された操作（テキスト入力、ボタンクリックなど）を自動で実行します。
AIは、Playwright MCPから返される実行結果（ページのDOM構造や操作の成否など）を解釈し、テストが成功したか、失敗したかを自然言語で報告します。
このように、Playwrightを利用することで、専門的なテストコードを記述することなく、自然言語でアプリケーションの動作検証を自動化できます。

 7. まとめ本記事では、Serena, Context7, Playwrightという3つのMCPサーバーを連携させ、TODOアプリ開発を実践しました。
今回の実践内容は小規模だったため恩恵は少ないですが、試みを通じて各ツールが以下の点で有効に機能することを確認できました。

Serena: コンポーネントやフックの連携といった複数ファイルにまたがる修正において、コードの構造をAIに正確に伝え、実装の精度を向上

Context7: 外部ライブラリuuidの導入時に、最新の正しいAPI仕様を提供し、手戻りのないスムーズな実装を支援

Playwright: 実装した機能の動作検証を自然言語の指示で自動化し、手動テストの手間を削減
これら3つのツールは、それぞれ「内部コードの構造」「外部ライブラリの仕様」「実行結果の振る舞い」という、開発における異なる側面のコンテキストをAIに提供します。これらを連携させることで、AIは開発対象をより高い解像度で理解できるようになります。
AIとの開発は、単に処理を依頼するだけでなく、どのようなコンテキストを与えればAIが最高のパフォーマンスを発揮できるかを考える「コンテキストエンジニアリング」の重要性が増していると言えますね。
1. はじめに

2. 使用するMCPサーバー

Serena

Context7

Playwright

3. TODOアプリの仕様

機能要件

画面構成

4. 開発環境の構築

4-1. プロジェクト作成（Vite + React）

4-2. uvのインストール

4-3. MCPサーバーの設定

4-4. MCPサーバーの起動確認

4-5. Serenaによるプロジェクトの初期解析

5. TODOアプリの開発手順

5-1. AIへの仕様のインプット

5-2. UIコンポーネントの作成

5-3. 状態管理とロジックの実装

5-4. コンポーネントの結合

6. Playwrightによる動作検証

6-1. テストシナリオの指示

6-2. テストの実行と結果

7. まとめ

Discussion
