AIコーディングエージェントはアプリケーションを書けますが、そのコードを支えるサービスもプロジェクトに合っている必要があります。14カテゴリーにわたる29のツールを厳選したこのセットは、すべて導入すべき一覧ではなく、選択肢のメニューとして使うのが適しています。選定の基準は三つです。無料または低コストで始められること、成長に合わせて本番アプリケーションを支えられること、そしてエージェントがサービスを直接操作できる手段があることです。
エージェントが操作できるツールを選ぶ
この考え方の中心にあるコーディングエージェントは、AnthropicのClaude CodeとOpenAIのCodexです。どちらもデスクトップアプリとコマンドラインインターフェースを備えており、アプリの画面上でも、ターミナルからのタスク実行でも使えます。また、どちらも最先端のモデルで動いています。AnthropicのClaude Opus 5.5とOpenAIのGPT-6 Astraです。
周辺ツールについては、それぞれModel Context Protocol（MCP）サーバー、コマンドラインインターフェース（CLI）、エージェント向けプラグインのいずれかがあるかを確認します。MCPサーバーはサービスの機能をAIエージェントに公開し、CLIはエージェントがターミナルのコマンドでサービスを扱えるようにします。こうした連携が重要になるのは、作業がコードの生成にとどまらず、デプロイ、サービスの設定、問題の調査にまで及ぶときです。連携機能がプロジェクトに必要な操作を具体的にカバーしているかも確かめておきます。
まずサイトの種類から決める
このセットで汎用的なホスティングの選択肢となるのは、CloudflareとVercelの二つです。どちらもデプロイ用のツール、変更を試すためのプレビュー環境、ユーザーの近くでコードを実行する仕組みを提供しています。Cloudflareはさらに、より幅広いインフラサービスをそろえています。プロジェクトにおけるWebサイトの役割を定めれば、どちらを選ぶかも判断しやすくなります。
ランディングページやドキュメントサイトなど、コンテンツが中心のサイトには、AstroとCloudflare Pagesの組み合わせが推奨されます。Astroが軽量なページを生成し、Cloudflare Pagesがそれをホスティングします。主な役割が複雑なユーザー操作の管理ではなくコンテンツの公開であれば、この構成でアーキテクチャを比較的シンプルに保てます。
▲ コンテンツサイトとインタラクティブなアプリ
インタラクティブなWebアプリには別の組み合わせが必要です。Vercel上のNext.jsに、画面づくり用のshadcn/uiコンポーネントとTailwind CSSを組み合わせます。Next.jsがアプリケーションのフレームワークを、shadcn/uiが再利用できるUIコンポーネントを、Tailwind CSSがスタイリング用のユーティリティを担います。この組み合わせは、画面の状態が変化し、ユーザーアカウントや決済フローを持つプロジェクトに向いています。コンポーネントの組み立てやスタイリングはコーディングエージェントに任せられますが、アーキテクチャを決めるのはエージェントを使えるかどうかではなく、こうした要件です。
永続データと認証の役割を分ける
データベースは、ユーザー情報やアプリケーションの状態など、アプリが保持し続ける必要のある情報を保存します。四つのデータベースの選択肢は、それぞれ異なるデータのニーズに対応します。
| サービス | 検討する場面 |
|---|---|
| MongoDB | 柔軟なドキュメント型データモデルに合うレコード |
| Supabase | PostgreSQLによるマネージドなリレーショナルデータ |
| Neon | データベースのブランチ機能を含むサーバーレスPostgreSQL |
| Tiger Data | 分析データ、監視データ、または時間とともに記録される計測値などの大量の時系列データ |
これらは、プロジェクトが実際に扱うデータに照らして比較する候補であり、すべてのアプリに四つとも必要なわけではありません。MongoDBとSupabaseはエージェント向けのツールも提供しています。NeonはサーバーレスのPostgreSQLによる開発の流れを重視し、Tiger DataはTimescaleDBとPostgreSQLを基盤に時系列データの処理を担います。
ユーザーの登録やログインが必要なら、Clerkが認証、つまりログイン、セッション、アカウント管理の層を担います。ソーシャルログインやアカウント画面用の既製UIコンポーネントを備えるほか、コーディングエージェント向けにMCPにも対応しています。ユーザーアカウントのないコンテンツサイトであれば、この層自体が不要な場合もあります。
運用機能はワークロードに応じて加える
いくつかのカテゴリーは、アプリのホスティングやデータベースではまかなえない役割を担います。それぞれを切り分けておくと、どのサービスを加え、どれを外すかを判断しやすくなります。
▲ アプリ運用で分かれる役割
メールについては、まずプロダクトが自動で送るメッセージと、読者に向けて送るメッセージを区別します。ResendとCloudflare Emailは、認証メールやアプリの通知といったトランザクションメールの選択肢です。Kitはマーケティングメール、見込み客の獲得、ニュースレターに使います。違いを決めるのは送信に使うツールではなく、メッセージの目的です。
DigitalOcean Dropletsは常時稼働する仮想マシン、つまり動き続けるクラウドサーバーです。長時間動くワーカー、定期実行ジョブ、そしてリクエストに応じてコードを実行するサーバーレスサービスの実行制限に収まらないバックグラウンド処理に向いています。データベースのレコードではなくファイルを扱う場合は、Cloudflare R2が写真、動画、生成画像などを保存するオブジェクトストレージを提供します。S3互換のAPIを備え、データ転送量の料金がかかりません。
決済はStripeが担い、チェックアウト、サブスクリプション、請求管理ポータルまで対応します。プロダクトで単発または定期の支払いを受け取る必要があるときに構成へ加えるもので、課金のないプロジェクトには必要ありません。
AIモデルを呼び出すアプリでは、開発に使うコーディングエージェントと、ユーザー向けに提供するモデルを区別する必要もあります。アプリ内のテキスト生成、推論、会話機能にはAnthropicとOpenAIが選択肢になり、画像生成にはGeminiとGPT Image 2が選択肢になります。複数のモデル提供元に対応しておけば、ある提供元が使えなくなったときや、コストを重視するタスクに別のモデルが適しているときにも対応できます。
PostHogとSentryは、本番運用における二つの異なる問いに答えます。PostHogはプロダクトの利用状況を追跡し、コーディングエージェントを通じて分析ダッシュボードを作成したり確認したりできます。Sentryはアプリケーションのエラーやパフォーマンスの問題を追跡し、エージェントが障害を調べてスタックトレースを診断するのを助けます。ユーザーが何をしたかという分析と、何が壊れたかというエラー報告を混同しないことが大切です。
最後に、GitHub IssuesとLinearは、開発者とエージェントの双方から作業を見えるようにします。GitHub Issuesはコードリポジトリと密接に結びついたバグやタスクに、Linearはより広い計画や連携して進める取り組みに向いています。両者のエージェント向けツールを使えば、作業の進行に合わせてタスクを読み取り、ステータスを更新できます。
すべてをそろえず、短いリストをつくる
実践的な手順は、まずプロジェクトのワークロードを見極め、ホスティングとアプリケーションフレームワークを選び、そのうえで必要なデータ、認証、運用のサービスだけを加えることです。候補ごとに、始めるときのコスト、想定する本番利用を支えられるか、そしてMCPサーバー、CLI、プラグインによってコーディングエージェントが必要な作業を行えるかを確認します。29のツールをすべて採用するのではなく、Claude CodeやCodexに具体的なプロジェクトに合った組み合わせを提案させましょう。そうすれば、エージェントと相性のよい開発の流れを保ちながら、構成をアプリの要件に結びつけておけます。