エージェントモードで初めてのアプリを構築する
このガイドは、本シリーズで説明したすべてを統合する総仕上げのチュートリアルです。エージェントファースト開発、API用のFastAPI、データベース用のPython sqlite3、シンプルなHTMLフロントエンド、そして本シリーズの前半で作成したbase62エンコーダーを使用して、URL短縮サービスを一から構築します。
モデルピッカー、Planエージェント、Autopilot、変更ファイルビュー、セッションフォーク、エージェントデバッグログが連携して動作する様子を確認できます。
適切なモデルを選択する
データベーススキーマ、APIルーティング、フロントエンド、それらの統合など、複数のファイルにまたがるプロジェクトでは、思考の労力（Thinking effort）を「High（高）」に設定してください。モデルはコードを書く前に、各要素がどのように適合するかをより深く推論します。
新しいチャットセッションを開き、モデルピッカーをクリックして、思考の労力を「High」に設定します。
Planエージェントで計画を立てる
いくつかの要素が組み合わさったプロジェクトでは、まずPlanエージェントを使用します。これにより、エージェントはコードを書く前に構造化されたアウトラインを作成し、設計上の疑問点を洗い出すことを強制されます。
Planエージェントに切り替え、以下のような詳細なプロンプトを使用します。
Build a URL shortener with FastAPI, Python's built-in sqlite3, and a simple HTML frontend served by FastAPI StaticFiles. Use uv for project management with Python 3.13. Use the existing base62 encoder in main.py to generate short codes from the database row ID. The API needs two endpoints. POST /shorten accepts a JSON body with a url field and returns the short code. GET /{code} redirects to the original URL. The frontend is a single index.html with a form to submit URLs and a section that displays the shortened link. Keep it minimal.
このプロンプトでは、フレームワーク、データベースのアプローチ、具体的なエンドポイント、プロジェクト管理ツールを指定し、既存のコードを参照しています。具体的なプロンプトを与えることで、Planエージェントに明確な境界線が生まれます。
計画のレビュー
計画によって作業がフェーズ（uvを用いたプロジェクトセットアップ、base62エンコーダーのモジュール化、sqlite3データベース層の構築、APIエンドポイントの接続、HTMLフロントエンドの作成、検証など）に分割されることを期待しましょう。
また、「さらなる検討事項」セクションで、CLIを維持するか、重複URLに同じ短縮コードを割り当てるか、短縮前にURLを検証するかといった設計上の質問が提示されるかもしれません。実装を開始する前に、これらの質問に直接回答してください。
以下のように、質問に直接回答します。
Drop the CLI, we don't need it anymore. New short code each time and yes add URL validation.
曖昧さのない、3つの明確な回答。コードが書かれる前に設計上の疑問点が解決されます。
Agentモードへの引き継ぎ
計画をレビューした後、3つのオプションから選択できます。
| オプション | 機能 |
|---|---|
| 実装を開始 | デフォルトの承認設定でビルドを開始します。 |
| Autopilotで開始 | Autopilotを使用してビルドを開始します。 |
| エディターで開く | 計画をファイルとして保存し、手動で参照できるようにします。 |
すでにレビュー済みの適切なスコープの計画であれば、Autopilotは多くの場合最適な選択です。
Autopilotの動作を確認する
Autopilot実行中でも、すべてのアクションはチャットパネルにツール呼び出しとして表示されます。
典型的なビルドシーケンスは以下のようになります。
- 進捗を管理するためのTo-Doリストを作成する。
uv add fastapi uvicorn[standard]を実行して依存関係をインストールする。main.pyをbase62.pyにリネームし、エンコード・デコードロジックのみを残す。database.py、app.py、static/index.html、.gitignoreを並行して作成する。- バックグラウンドでサーバーを起動する。
- エンドポイントをエンドツーエンドでテストする検証スクリプトを実行する。
Autopilotは、マルチステップのセットアップ中に真価を発揮します。エージェントは承認を待たずに、依存関係のインストール、ファイルの作成、サービスの起動、結果の検証を行えるからです。その検証ステップは重要です。強力なエージェントの実行は、ファイルを書いて終わりではありません。タスク完了とマークする前に、アプリをエンドツーエンドで検証します。
コンテキストウィンドウを確認する
セッション中にコンテキストウィンドウのインジケーターを開き、以前の単一ファイルセッションと比較してみましょう。
- システム（ツールの定義と指示）はほぼ一定です。
- ユーザーコンテキストは、計画メッセージ、ツールの結果、サーバーログの蓄積に伴い増加します。
予算（トークン制限）がいっぱいになった場合は、/compactを実行して会話履歴を要約するか、新しいセッションを開始して前のセッションをコンテキストとして参照してください。
変更されたファイルをレビューする
ビルド完了後、変更されたファイルバーにエージェントが作成または修正したすべてのファイルが表示されます。
各ファイルを慎重にレビューしてください。
base62.py：元のファイルからクリーンに抽出されたエンコード・デコード処理。app.py：POST /shorten、GET /{code}、GET /を備えたFastAPIアプリ。database.py：URLの保存と検索を行うsqlite3ヘルパー。static/index.html：フォーム、結果セクション、JavaScript。
矢印コントロールを使用して編集内容を確認します。必要に応じて個別の変更を取り消すか、すべてが正しい場合はすべて保持を選択します。
動作するアプリを反復改善する
コアアプリが動作したら、ターゲットを絞ったフォローアッププロンプトで反復改善します。
Add a lookup section to the frontend and a GET /lookup/{code} endpoint that returns the original URL as JSON instead of redirecting. The frontend should have a second form where I paste a short code and see the original URL displayed below it.
エージェントはプロジェクト全体を再構築するのではなく、関連するファイルのみを更新するはずです。
異なる方向性のためにフォーク（分岐）する
検索機能を追加した後、テストスイートを作成する前にセッションをフォークします。
フォークしたセッションで、以下のようなプロンプトを使用します。
Add a test suite using pytest. Test the base62 encode/decode functions and the API endpoints including /lookup/{code}, using FastAPI TestClient. Use uv to add pytest and httpx as dev dependencies.
元のセッションは「エージェントセッション」サイドバーに残ったままです。機能開発用とテスト用の2つのブランチが作成されます。
実務において、これはフォークの強力な活用法です。関心事を分離し、会話の片方の枝で機能開発、もう片方でテストを行うことができます。どちらも同じ「正常動作確認済み」のチェックポイントから開始されます。
エージェントのデバッグログを読む
Autopilotの実行後、エージェントのデバッグログを開きます。
- ログビューには、イベントの順序、カスタマイズの読み込み、LLMリクエスト、ツール呼び出し、ターミナルコマンド、並列ファイル作成、検証のシーケンスが表示されます。
- 要約ビューには、モデルのターン数、ツール呼び出し、トークン数、イベント数の合計が表示されます。
- 「エージェントフローチャート」はセッションの構造を可視化します。
フォーク後の2つのセッションがある場合、ログを並べて比較できます。
また、デバッグスナップショットを添付して、#debugEventsSnapshot このセッションで何回ツール呼び出しを行いましたか？のように直接質問することもできます。
構築した成果物
あなたはエージェントファースト開発を通じて、動作するURL短縮サービスを構築しました。
- マルチファイルプロジェクトのための、思考の労力を高く設定したモデルピッカー。
- コーディング前にアーキテクチャを概説するPlanエージェント。
- 中断なしでアプリケーションを構築するAutopilot。
- 何が起きたかを精査するエージェントデバッグログ。
- 予算を監視するコンテキストウィンドウインジケーター。
- 編集内容をレビューし承認する「変更されたファイル」ビュー。
- アプリを拡張するためのフォローアッププロンプト。
- 機能開発を失わずにテストスイートへ分岐するフォーク機能。
あなたの挑戦
本シリーズで構築したURL短縮サービスを作成し、使用したプロンプトを活用して（あるいは独自のプロンプトを思いついて！）、さらに拡張してみましょう。
アイデア
- ユーザーが独自の短縮コードを選択できる「カスタムスラッグ」。
- 古いリンクを自動的に無効にする「有効期限」。
- クリック数上位のURLを表示する「アナリティクスページ」。
Planエージェントを使って作業のスコープを決め、Agentモードを使って構築し、エージェントデバッグログをチェックしてエージェントの動きを理解してください。
完了したら、コンテキストウィンドウインジケーターを開いてセッション統計を確認し、作業がコンテキスト予算にどのような影響を与えたかを確認しましょう。
それがエージェントファースト開発の基礎です。「ハーネス、モデル、コンテキスト、ツール、プロンプト」。これら5つの要素が連携して機能します。練習すればするほど、成果は向上します。
MCP、カスタム指示、スキル、およびより高度なエージェントパターンをカバーする今後のセクションにご期待ください。コーディングを楽しんでください！