Google AI Studio がフルスタック開発をサポートするようになり、クライアントサイドのプロトタイプを超えたアプリケーションを構築できるようになりました。サーバーサイド ランタイムを使用すると、シークレットの管理、外部 API への接続、リアルタイム マルチプレイヤー エクスペリエンスの構築を行うことができます。
サーバーサイド ランタイム
Google AI Studio アプリケーションにサーバーサイド コンポーネント（Node.js）を含めることができるようになりました。この機能には次のような利点があります。
- サーバーサイド ロジックを実行する: クライアントに公開すべきでないコードを実行します。
- npm パッケージにアクセスする: Antigravity Agent は、広大な npm エコシステムのパッケージをインストールして使用できます。
- シークレットを処理する: API キーと認証情報を安全に使用します。
npm パッケージの使用
npm install を手動で実行する必要はありません。パッケージを必要とする機能を追加するようエージェントに指示するだけで、インストールとインポートが処理されます。
例: > 「axios を使用して外部 API からデータを取得します。」
シークレットの安全な管理
サーバーサイド コードとシークレットの管理により、世界とやり取りするアプリを構築できるようになりました。
- サードパーティ API: Stripe、SendGrid、カスタム REST API などのサービスに接続します。
- データベース: 外部データベース（Supabase、Firebase、MongoDB Atlas など）に接続して、セッションを超えてデータを保持します。
実際のアプリを構築する際には、API キーを必要とするサードパーティ サービス（Twilio、Slack、データベースなど）に接続する必要があることがよくあります。次の手順でキーを手動で追加できます。
- シークレットを追加する: Google AI Studio の [設定] メニューに移動し、[シークレット] セクションを探します。
- キーを保存: API キーまたはシークレット トークンをここに追加します。
- コードでのアクセス: エージェントは、これらのシークレットに安全にアクセスするサーバーサイド コード（通常は環境変数を介して）を記述できます。これにより、シークレットがクライアントサイドのブラウザに公開されることはありません。
必要に応じて、新しい Secret が必要な場合や、プロジェクトの環境変数で新しい鍵が検出された場合は、鍵の追加を促すカードがチャットに表示されます。
OAuth の設定
シークレット管理の主なユースケースの 1 つは、他のウェブサイトやアプリに接続するための OAuth を設定することです。OAuth 認証を必要とするサードパーティ製アプリへの接続に関する手順がプロンプトに含まれている場合、エージェントはそのアプリの OAuth を設定する方法に関する手順を提供します。これらの手順には、OAuth アプリケーションを構成するために必要なコールバック URL が含まれています。コールバック URL は、[設定] パネルの [統合] でも確認できます。
マルチプレーヤー エクスペリエンスの構築
フルスタック ランタイムにより、リアルタイムのコラボレーション機能が有効になります。
- リアルタイムの状態: エージェントに「ライブチャット」、「共同編集可能なホワイトボード」、「マルチプレーヤー ゲーム」などの機能の構築を依頼できます。
- 同期セッション: サーバーが状態を管理し、複数のユーザーが同じアプリケーション インスタンスをリアルタイムで操作できます。
プロンプトの例: > 「プレーヤーが互いのカーソルを見ることができるマルチプレーヤー ゲームにしてください。」
マルチプレーヤー アプリのテストに関するヒント
アプリをデプロイする前に、マルチプレイヤー モードを 2 つの方法でテストできます。
- Google AI Studio のビルドモードでアプリを複数のタブで開きます。ビルドモードで開発する場合、アプリは開発コンテナにあります。アプリを複数のタブで開くと、アプリを使用して複数のプレーヤーをシミュレートできます。
- 右上の [共有] メニューを使用してアプリを他のユーザーと共有します。 次に、[共有] メニューの [統合] タブにある [共有 URL] を使用して、アプリを共有したプレーヤーとアプリを使用します。
ベスト プラクティス
- シークレットのセキュリティ: 機密性の高い鍵には常にシークレット マネージャーを使用します。ファイルにハードコードしないでください。
- 関心の分離: UI ロジックはクライアントサイドのフレームワーク（React / Angular）に、ビジネス ロジックとデータ処理はサーバーサイドに保持します。
- エラー処理: 外部 API 呼び出しからのエラーをサーバーサイド コードで確実に処理し、アプリがクラッシュしないようにします。