フルスタックアプリを構築するAIエージェントの作り方

※このブログは2025年12月1日に公開された英語ブログ「How to Build an AI Agent that Builds Full-Stack Apps」の拙訳です。

「Lovable.dev」スタイルのAIエージェント構築用オープンソーススターターキット

AIエージェントが単一のプロンプトからアプリケーション全体を構築する事例がますます増えています。Lovable.devやManusといったプラットフォームがこの分野を開拓しています。それらの多くはデータ層の基盤としてTiDB Cloudを採用しています。そこで我々も、GitHubで公開するオープンソースの開発キットを構築することにしました。これは、皆さんがAI駆動型開発プラットフォームを構築するための出発点としてご利用いただけます。

---

このエージェントは何ができますか？

このエージェントは、プロンプト (いわゆる「バイブ・コード」) から、Webアプリケーションの構築に必要なすべてをエンドツーエンドで完結させる、AIチャットアプリ兼コード生成プラットフォームです。主な機能は以下の通りです。

• プロンプトからWebアプリを丸ごと生成：作りたいものを説明するだけで、適切なファイル構成、依存関係、セットアップまで、エージェントが自動的にひな形を構築します。
• TiDB Cloudデータベースの自動プロビジョニング：生成される各プロジェクトには、専用のTiDB Cloudクラスタが割り当てられ、データベース、スキーマ、接続文字列まで完全に設定された状態で提供されます。また、同一プロジェクト内でのそれぞれの指示は、TiDB Cloudの「ブランチ」として個別にバージョン管理されるため、安全かつ追跡可能な反復開発が可能です。
• プロジェクトのバージョン管理：生成されたアプリとデータベースの認証情報 (ユーザー名、パスワード、ブランチ情報) はすべて保存されるため、過去のバージョンへの再アクセスや安全なロールバックが可能です。何より、選択したプロジェクトのバージョンとデータベースが常に同期しているのが大きな特徴です。
• 即座に実行・プレビュー：生成されたプロジェクトは、UIから直接テストしたり、プレビューURLですぐに確認したりできます。
• 世代間でのコンテキスト保持：エージェントは過去の指示を記憶してそれを基に構築を行うため、一過性ではなく、対話を重ねながら段階的にブラッシュアップしていくことが可能です。
• アイドル時のオートスケールダウン：生成された各アプリはTiDB Cloudを利用しているため、使用していない時は自動的にリソースをゼロまで縮小し、コストを最適化します。

アーキテクチャ概要

このアーキテクチャは、以下の要素を組み合わせることで、自然言語のプロンプトを本番環境に対応したWebアプリへと変換します。

• 推論とコード生成のためのCodex (gpt-5.1-codex) またはClaude Code
• ブランチ可能なデータ環境を提供するTiDB Cloud
• 型安全なSQLを実現するKysely
• 実行とデプロイのためのVercel
• バージョン管理のためのGitHub

このスタックの中心に位置するのが、システム全体の中枢神経として機能するTiDB Cloudです。これは、プラットフォーム自体のコントロールプレーン用データベースとして機能するだけでなく、エージェントが生成するあらゆるアプリに対して、オンデマンドでブランチ可能なデータ環境を提供します。

仕組み：エージェントのエンドツーエンドフロー

このプロセス全体は、主に二つの要素に分解できます：エージェントが業務を遂行するために必要なツールと、アプリケーションを構築するために従う段階的なワークフローです。

パート1：エージェントのツールキット

エージェントが生成やデプロイを行うには、まずエージェント自身が統合管理するすべての外部システムに対して認証を行う必要があります。これらの認証情報はコントロールプレーンを構成します。これは、エージェントが環境のプロビジョニング、コード生成、データ管理、そしてアプリケーションのリリースを一元的に行うためのインターフェースとなります。

エージェントには以下の情報が必要です。

• GitHubトークン：リポジトリの作成、生成されたコードのプッシュ、ブランチ管理に使用します。GitHubはコードチェックポイントの信頼できる情報源となります。
• Vercelトークン：一時的なサンドボックスの作成、ビルド成果物のアップロード、Webアプリケーションのデプロイに使用します。Vercelは実行レイヤーとして機能します。
• CodexまたはClaude CodeのAPIキー：推論と計画を可能にします。モデルはシステムの「頭脳」として機能します。
• TiDB CloudのAPIキー：エージェントがプログラムによってTiDB Cloudクラスタの作成、管理、ブランチ作成を行うことを可能にします。これにより、隔離されたデータ環境と安全な反復開発の基盤が提供されます。

これらの認証情報を組み合わせることで、エージェントは計画 → プロビジョニング → 生成 → マイグレーション → デプロイ → 反復というライフサイクル全体を完全に自動化できます。

パート2：アプリケーション構築ワークフローの実践

では、エージェントが実際のシナリオでツールキットをどのように活用するか見てみましょう。最初のプロンプトから最終的なデプロイまで、エージェントはアイデアを動作するアプリケーションへと変換するため、精密な自動化された手順に従います。

ステップ1：プロンプト

ユーザーが「Todoリストアプリを作って」といったリクエストを作成することから始まります。

ステップ2：計画

プロンプトを受け取るとすぐに、モデルが要件を分析し、全体的な実行計画を生成します。

ステップ3：準備

計画が固まると、エージェントは必要なインフラを構築します。新しいTiDB Cloudクラスタ、Vercelサンドボックス、GitHubリポジトリを作成し、同時に必要な環境変数を設定します。

ステップ4：コード生成

環境が整うと、CodexまたはClaude Codeがアプリケーションのコード生成を開始します。これには、ページ、コンポーネント、APIルートの作成に加え、Kyselyのスキーマおよびマイグレーションファイルの作成も含まれます。

ステップ5：データベースマイグレーション

次に、データの整合性を確保するため、Kyselyが型安全なマイグレーションをTiDB Cloudクラスタに直接適用します。

ステップ6：デプロイ

マイグレーションの成功後、エージェントはコードをGitHubにコミットし、自動的にVercelのデプロイを実行してアプリを公開します。

ステップ7：後続の指示による反復開発

最後に、プロセスは循環型になります。例えば、「ユーザー名フィールドを追加して」という追加の指示を与えると、エージェントは新しいTiDB Cloudブランチを作成します。その後、スキーマの更新、マイグレーションの再生成と適用、UIおよびAPIコードの更新、そして再デプロイを行います。このブランチ機能により、すべての変更は隔離され、完全に元に戻すことが可能です。

魔法のような機能：すべてがうまくいく仕組み

ワークフローは単純に見えるかもしれませんが、いくつかの重要な技術が、このシステムを堅牢、安全、かつ効率的なものにしています。すべてをうまく機能させている「魔法」を見ていきましょう。

手順1：GitとTiDBブランチによるコードとデータの同期

すべての指示は、コードとデータの両方にとって軽量なチェックポイントになります。各バージョンにはGitリポジトリ名とブランチ名が、TiDB CloudクラスタIDおよびブランチ名と共に保存され、コードとデータの完璧な同期を保証します。

例：プログラムによるTiDB Cloudブランチの作成

import fetch from "node-fetch";

const SERVERLESS_API_BASE = "https://serverless.tidbapi.com/v1beta1";

async function createBranch(clusterId, newBranchName, publicKey, privateKey) {
  const url = `${SERVERLESS_API_BASE}/clusters/${clusterId}/branches`;
  const body = JSON.stringify({ displayName: newBranchName });

  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization:
        "Basic " + Buffer.from(`${publicKey}:${privateKey}`).toString("base64"),
    },
    body,
  });

  if (!response.ok) {
    const text = await response.text();
    throw new Error(`Failed to create branch: ${response.status} ${text}`);
  }

  const data = await response.json();
  return data.branchId;
}

createBranch(
  "1234567890",
  "new-feature-branch",
  process.env.TIDB_CLOUD_PUBLIC_KEY,
  process.env.TIDB_CLOUD_PRIVATE_KEY
)
  .then((branchId) => console.log("Branch created:", branchId))
  .catch(console.error);

手順2：Kyselyによる安全で型安全なスキーママイグレーション

エージェントがスキーマを変更する必要がある場合、Kyselyのマイグレーションファイルを生成します。これにより、スキーマの進化は安全で、元に戻すことができ、かつ完全に自動化されたものになります。

例：Kyselyのマイグレーションファイル

import type { Kysely } from "kysely";

export async function up(db: Kysely<any>) {
  await db.schema
    .alterTable("todo_list")
    .addColumn("username", "varchar(255)", (col) => col.notNull().defaultTo(""))
    .execute();
}

export async function down(db: Kysely<any>) {
  await db.schema
    .alterTable("todo_list")
    .dropColumn("username")
    .execute();
}

これは反復開発において極めて重要です。Kyselyはすべてのスキーマ変更に対してアップとダウンの両方のマイグレーションを生成するため、エージェントは新しい構造を適用するだけでなく、それらを安全に元に戻すこともできます。これにより、データベースへの手動の介入を必要とせず、すべての反復プロセスをクリーンかつ、完全に元に戻せる状態であることを保証します。

手順3：スケール・トゥ・ゼロによるオンデマンドな開発環境

TiDB Cloudは、アイドル時に自動的に0ドルまでスケールダウンします。これにより、以下が可能になります。

• 使い捨てなAI生成アプリ
• オンデマンドな開発環境
• 指示ごとのブランチ作成ワークフロー
• エージェントによる一時的な高負荷ワークロード

エージェントは、継続的なコストをかけることなく、多くの隔離された環境を作成できます。

まとめ

このスターターキットは単なるコードではありません。動的なAI駆動型アプリケーションを構築するための設計図です。重要なポイントは、データベースを静的な箱としてではなく、プログラム可能でAPI駆動のリソースとして扱うことです。皆様がアプリケーションを構築できるよう、プロジェクト全体を公開しました。リポジトリをフォークしてコードを活用し、何が作れるかぜひ試してみてください。

自身で構築する準備はできましたか？このプロジェクトで使用されているデータベースブランチ機能やスケール・トゥ・ゼロ機能を試すには、無料でTiDB Cloudを体験してください。開始するのにクレジットカードは不要です。