Google AI Studio でフルスタック アプリを開発する

Google AI Studio がフルスタック開発に対応し、クライアントサイドのプロトタイプにとどまらないアプリケーションを構築できるようになりました。サーバーサイドのランタイムを使用すると、シークレットの管理、外部 API への接続、リアルタイムのマルチプレーヤー エクスペリエンスの構築が可能になります。

サーバーサイドのランタイム

Google AI Studio アプリケーションにサーバーサイド コンポーネント(Node.js)を含めることができるようになりました。 この機能には次のような利点があります。

  • サーバーサイド ロジックの実行: クライアントに公開すべきでないコードを実行します。
  • npm パッケージへのアクセス: Antigravity Agent は、広範な npm エコシステムのパッケージをインストールして使用できます。
  • シークレットの処理: API キーと認証情報を安全に使用します。

npm パッケージを使用する

npm install を手動で実行する必要はありません。パッケージを必要とする機能を追加するようエージェントに指示するだけで、インストールとインポートを処理してくれます。

: > 「axios を使用して外部 API からデータを取得する」

シークレットを安全に管理する

サーバーサイド コードとシークレット管理により、世界とやり取りするアプリを構築できるようになりました。

Gemini API キー

Gemini API を使用する新しいアプリを作成すると、AI Studio は GEMINI_API_KEY をサーバーサイドのシークレットとして自動的に構成します。手動での設定は不要です。このキーは、[設定] パネルの [シークレット] で確認できます。アプリの Gemini API 呼び出しは、このキーを使用してサーバーサイド コードから行われるため、ブラウザに公開されることはありません。

サードパーティ API キー

他のサービスについては、API キーを手動で追加できます。

  • サードパーティ API: Stripe、SendGrid、カスタム REST API などのサービスに接続します。
  • データベース: 外部データベース(Supabase、Firebase、 MongoDB Atlas など)に接続して、セッションを超えてデータを保持します。

実際のアプリを構築する場合、API キーを必要とするサードパーティ サービス(Twilio、Slack、データベースなど)に接続する必要があることがよくあります。次の手順でキーを手動で追加できます。

  1. [Add a secret]: Google AI Studio の [設定] メニューに移動し、 [シークレット] セクションを探します。
  2. キーを保存する: API キーまたはシークレット トークンをここに追加します。
  3. コードでアクセスする: エージェントは、これらの シークレットに安全にアクセスするサーバーサイド コード(通常は環境変数経由)を記述し、クライアントサイド ブラウザに 公開されないようにします。

また、新しいシークレットが必要な場合や、プロジェクトの環境変数で新しいキーが検出された場合は、チャットにカードが表示され、キーを追加するように求められます。

データベースと認証のための Firebase との連携

Google AI Studio では、Firebase との連携により、データベースや認証をアプリに簡単に追加できるようになりました。Antigravity Agent は、次のサービスを自動的にプロビジョニングして設定できます。

  • Firestore データベース: クライアントサイドとサーバーサイドの開発でデータを保存、同期するための柔軟でスケーラブルな NoSQL クラウド データベース。
  • Firebase Authentication: ユーザーが [Google でログイン] フローを使用して アプリケーションに安全にログインできるようにします。

エージェントに「アプリにデータベースを追加する」または「Google ログインを設定する」と指示するだけで、必要な構成とコード生成が自動的に行われます。

Firebase は無料で開始できます。割り当てを増やしたり、有料機能を使用したりする準備ができたら、有料アカウントにアップグレードできます。

Google Workspace API

Google AI Studio を使用すると、Google Workspace API に接続するアプリを構築できるため、ユーザーはアプリ内で実際のデータ(メール、スプレッドシート、ドキュメント、カレンダーの予定など)を操作できます。Google Cloud プロジェクトの設定、OAuth の構成、API の手動管理は不要になりました。

仕組み

Workspace との連携は、次の 2 つの方法で追加できます。

  • チャット パネルで説明する: 下部のチャット パネルで、エージェントに必要なものを伝えるだけです。たとえば、"領収書を Google スプレッドシートに記録する経費トラッカーを作成する""未読の Gmail メッセージを要約するダッシュボードを作成する" などです。
  • [連携] パネルから選択する: ビルドモードの右側のサイドバーで [連携] パネルを開き、接続する Workspace アプリを有効にします。

Workspace アプリを追加すると、AI Studio は自動的に次の処理を行います。

  1. アプリに必要な Google API を接続します。
  2. API を呼び出すサーバーサイド コードを生成します。
  3. 安全な [Google でログイン] フローを追加して、アプリのエンドユーザーが自分のデータへのアクセスを承認できるようにします。

対応アプリ

次の Google Workspace アプリをご利用いただけます。

アプリ 構築できるもの
Google カレンダー 予定とカレンダーの読み取り、作成、管理
Google Chat 会話とグループ スペースの読み取りと操作
Google ドキュメント ドキュメントの作成、読み取り、更新、書式設定
Google ドライブ ファイルとフォルダの整理、検索、管理
Google フォーム アンケートの作成、質問の更新、回答の取得
Gmail メール コンテンツの読み取り、送信、管理
Google Keep メモ、リスト、添付ファイルの管理
Google Meet ビデオ通話のスケジュール設定と管理
連絡先 連絡先の同期と管理
Google スプレッドシート スプレッドシート データの読み取り、書き込み、書式設定
Google スライド プレゼンテーションの作成と変更
Google ToDo リスト タスクの作成、管理、整理

認証と権限

ビルダーは、OAuth クライアントの構成、認証情報の管理、Google Cloud プロジェクトの設定を行う必要はありません。AI Studio がすべて処理します。

Workspace API が統合されたアプリは、[Google でログイン] を使用してエンドユーザーを認証します。ユーザーがアプリを開くと、ログインして、アプリに必要な特定の権限(カレンダーへの読み取り専用アクセスや、スプレッドシートの編集権限など)を付与するように求められます。アプリは、使用しているユーザーのデータにのみアクセスします。各ユーザーは、自分のアカウントへのアクセスを承認します。

プロンプトの例

Workspace との連携を開始するためのアイデアをいくつかご紹介します。

  • 「Google カレンダーを読み取り、各会議の準備メールを Gmail で作成するアプリを作成する」
  • 「Google ドキュメントを受け取り、Google スライドで 5 スライドの要約 プレゼンテーションを生成するツールを作成する」
  • 「領収書をアップロードすると、Gemini が 詳細を抽出し、Google スプレッドシートに新しい行を記録する経費トラッカーを作成する」

OAuth を設定する

シークレット管理の主なユースケースの 1 つは、OAuth を設定して他のウェブサイトやアプリに接続することです。プロンプトに OAuth 認証を必要とするサードパーティ アプリへの接続に関する手順が含まれている場合、エージェントはそのアプリケーションの OAuth の設定方法の手順を提供します。これらの手順には、OAuth アプリケーションを構成するために必要なコールバック URL が含まれます。 コールバック URL は、[設定] パネルの [連携] で確認することもできます。

マルチプレーヤー エクスペリエンスを構築する

フルスタック ランタイムでは、リアルタイムのコラボレーション機能を使用できます。

  • リアルタイムの状態: エージェントに「ライブ チャット」、「共同ホワイトボード」、「マルチプレーヤー ゲーム」などの機能を作成するように指示できます。
  • セッションの同期: サーバーが状態を管理するため、複数のユーザー が同じアプリケーション インスタンスをリアルタイムで操作できます。

プロンプトの例: > 「プレーヤーが互いのカーソルを確認できるマルチプレーヤー ゲームにする」

マルチプレーヤー アプリをテストする際のヒント

アプリをデプロイする前に、次の 2 つの方法でマルチプレーヤー モードをテストできます。

  1. Google AI Studio のビルドモードでアプリを複数のタブで開きます。ビルドモードで開発する場合、アプリは開発コンテナにあります。アプリを複数のタブで開くと、複数のプレーヤーがアプリを使用している状況をシミュレートできます。
  2. 右上の [共有] メニューを使用して、アプリを他のユーザーと共有します。次に、[共有] メニューの [連携] タブの [共有 URL] を使用して、アプリを共有したプレーヤーとアプリを使用します。

ベスト プラクティス

  • Gemini API 呼び出し: GEMINI_API_KEY は、 サーバーサイドのシークレットとして自動的に構成されます。このキーを使用して、サーバーサイド コードから Gemini API 呼び出しを行います。これは [シークレット] パネルで確認できます。
  • シークレットのセキュリティ: 機密性の高いキーには常にシークレット マネージャーを使用してください。 ファイルにハードコードしないでください。
  • 関心の分離: UI ロジックはクライアントサイド フレームワーク (React / Angular)に保持し、ビジネス ロジックとデータ処理はサーバーサイドで行います。
  • エラー処理: 外部 API 呼び出しからのエラーをサーバーサイド コードで確実に処理し、アプリがクラッシュしないようにします。

次のステップ