Firebase Studio には、自然言語、画像、描画ツールなどのマルチモーダル プロンプトを使用して、AI を活用したウェブアプリを迅速にプロトタイプ化して生成できるウェブベースのインターフェースが含まれています。このエージェントは Next.js アプリをサポートしており、今後は他のプラットフォームとフレームワークにも対応する予定です。
アプリ プロトタイピング エージェントは、生成 AI を使用してフルスタックのエージェント ウェブアプリを開発、テスト、反復処理、公開する、効率的なノーコード開発フローです。アプリのアイデアを自然言語で記述し、必要に応じて画像を添付すると、エージェントがアプリのブループリント、コード、ウェブプレビューを生成します。フルスタック アプリの開発と公開を支援するために、Firebase Studio は次のサービスを自動的にプロビジョニングできます。
- アプリで AI を使用している場合: Firebase Studio は、Genkit フローの機能を活用して Gemini を操作し、アプリに Gemini Developer API を追加します。独自の Gemini API キーを使用するか、Firebase Studio に Firebase プロジェクトと Gemini API キーをプロビジョニングしてもらえます。
- アプリをウェブに公開する場合: Firebase Studio はプロジェクトを作成し、Firebase App Hosting を使用してアプリを簡単に公開できるようにします。
Firebase Studio から、自然言語、画像、描画ツールを使用してアプリを調整したり、コードを直接編集したり、変更をロールバックしたり、アプリを公開したり、パフォーマンスをモニタリングしたりできます。
始める
App Prototyping agent の使用を開始する手順は次のとおりです。
Google アカウントにログインし、Firebase Studio を開きます。
[AI でアプリのプロトタイプを作成する] フィールドに、アプリのアイデアを自然言語で記述します。
必要に応じて、プロンプトに画像を追加します。これは、アプリの理想的なユーザーフローの図や、Firebase Studio に適用するカラーパターンにすることができます。画像の最大サイズは 3 MiB です。
[AI でプロトタイプを作成する] をクリックします。
アプリ プロトタイピング エージェントは、提案されたアプリ名、コア機能、スタイル ガイドラインを提供するアプリ ブループリントを返します。
ブループリントを確認します。Gemini に機能強化や変更をリクエストして、ブループリントを直接編集できます。
[カスタマイズ] をクリックして、ブループリントを直接編集します。変更を加えて、[保存] をクリックします。
チャットペインの [Describe...] フィールドに、明確な質問とコンテキストを追加します。画像を追加することもできます。
ブループリントを承認したら、[このアプリのプロトタイプを作成する] をクリックします。
Gemini は、ブループリントからコードを生成し、確認用のウェブプレビューを返します。
アプリで AI を使用している場合は、Gemini API キーを追加または生成するよう求められます。[自動生成] をクリックすると、Firebase Studio によって Firebase プロジェクトと Gemini API キーがプロビジョニングされます。
最初のアプリを作成したら、次のことができます。
テストと反復処理: アプリを徹底的にテストし、App Prototyping agent を使用して、満足できるまでコードとブループリントを反復処理します。
</>をクリックしてコードビューに入り、Firebase Studio ワークスペースでコードを編集することもできます。アプリを確認して操作する: コード生成が完了すると、アプリのプレビューが表示されます。プレビューを直接操作してテストできます。詳しくは、アプリのプレビューをご覧ください。
アプリをデバッグする:
[Switch to Code] をクリックして Code ビューを開きます。ここでは、Firebase Studio の組み込みのデバッグ機能とレポート機能を使用して、アプリの検査、デバッグ、監査を行うことができます。Prototyper
mode at any time. に戻ります。Firebase App Hosting でアプリを公開する: [公開] をクリックして、アプリを App Hosting に公開します。
アプリと AI 機能をモニタリングして最適化する: App Hosting のオブザーバビリティでウェブアプリのパフォーマンスと使用状況をモニタリングし、Genkit の Firebase テレメトリーで生成 AI フローをモニタリングします。詳細については、ウェブアプリをモニタリングするをご覧ください。