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、データベースなど)に接続する必要があることがよくあります。次の手順でキーを手動で追加できます。
- [Add a secret]: Google AI Studio の [設定] メニューに移動し、 [シークレット] セクションを探します。
- キーを保存する: API キーまたはシークレット トークンをここに追加します。
- コードでアクセスする: エージェントは、これらの シークレットに安全にアクセスするサーバーサイド コード(通常は環境変数経由)を記述し、クライアントサイド ブラウザに 公開されないようにします。
また、新しいシークレットが必要な場合や、プロジェクトの環境変数で新しいキーが検出された場合は、チャットにカードが表示され、キーを追加するように求められます。
データベースと認証のための 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 は自動的に次の処理を行います。
- アプリに必要な Google API を接続します。
- API を呼び出すサーバーサイド コードを生成します。
- 安全な [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 つの方法でマルチプレーヤー モードをテストできます。
- Google AI Studio のビルドモードでアプリを複数のタブで開きます。ビルドモードで開発する場合、アプリは開発コンテナにあります。アプリを複数のタブで開くと、複数のプレーヤーがアプリを使用している状況をシミュレートできます。
- 右上の [共有] メニューを使用して、アプリを他のユーザーと共有します。次に、[共有] メニューの [連携] タブの [共有 URL] を使用して、アプリを共有したプレーヤーとアプリを使用します。
ベスト プラクティス
- Gemini API 呼び出し:
GEMINI_API_KEYは、 サーバーサイドのシークレットとして自動的に構成されます。このキーを使用して、サーバーサイド コードから Gemini API 呼び出しを行います。これは [シークレット] パネルで確認できます。 - シークレットのセキュリティ: 機密性の高いキーには常にシークレット マネージャーを使用してください。 ファイルにハードコードしないでください。
- 関心の分離: UI ロジックはクライアントサイド フレームワーク (React / Angular)に保持し、ビジネス ロジックとデータ処理はサーバーサイドで行います。
- エラー処理: 外部 API 呼び出しからのエラーをサーバーサイド コードで確実に処理し、アプリがクラッシュしないようにします。