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 に機能強化や変更をリクエストして、ブループリントを直接編集できます。
[カスタマイズ] をクリックして、ブループリントを直接編集します。必要に応じて変更を加え、[Save] をクリックします。
チャットペインの [Describe...] フィールドに、明確にするための質問とコンテキストを追加します。画像をアップロードすることもできます。
ブループリントを承認したら、[このアプリのプロトタイプを作成する] をクリックします。
Gemini は、ブループリントからコードを生成し、確認用のウェブ プレビューを返します。
アプリで AI を使用している場合は、Gemini API キーを追加または生成するよう求められます。[自動生成] をクリックすると、Firebase Studio によって Firebase プロジェクトと Gemini API キーがプロビジョニングされます。
最初のアプリを作成したら、次のことができます。
アプリを確認して操作する: コード生成が完了すると、アプリのプレビューが表示されます。プレビューを直接操作してテストできます。詳しくは、アプリのプレビューをご覧ください。
自然言語を使用してテストとイテレーションを行う: アプリを徹底的にテストし、App Prototyping agent を使用して、満足できるまでコードとブループリントをイテレーションします。
Prototyper mode, you can also use the following helpful features: では
[アノテーション] をクリックして、プレビュー ウィンドウに直接描画します。使用可能な図形ツール、画像ツール、テキストツールと、オプションのテキスト プロンプトを使用して、App Prototyping agent で変更する内容を視覚的に記述します。
[選択] をクリックして特定の要素を選択し、App Prototyping agent の手順を入力します。これにより、特定のアイコン、ボタン、テキストの一部、その他の要素をすばやくターゲットにできます。 画像をクリックすると、Unsplash からストック画像を検索して選択することもできます。
コード内で直接デバッグとイテレーションを行う:
[コードに切り替え] をクリックして Code ビューを開きます。ここで、アプリのすべてのファイルを表示し、コードを直接変更できます。Prototyper mode at any time. に戻すことができますCode ビューでは、次の便利な機能も使用できます。
Firebase Studio の組み込みのデバッグ機能とレポート機能を使用して、アプリを検査、デバッグ、監査します。
Firebase で Gemini を使用した AI アシスタント: コード内のインラインまたはインタラクティブ チャット（どちらもデフォルトで利用可能）。インタラクティブ チャットでは、問題の診断、解決策の提供、ツールの実行により、アプリの迅速な修正を支援できます。チャットにアクセスするには、ワークスペースの下部にあるスパークル アイコンGemini をクリックします。
Firebase App Hosting でアプリを公開する: [公開] をクリックして、アプリを App Hosting に公開します。
アプリと AI 機能をモニタリングして最適化する: App Hosting のオブザーバビリティでウェブアプリのパフォーマンスと使用状況をモニタリングし、Genkit の Firebase テレメトリーで生成 AI フローをモニタリングします。詳細については、ウェブアプリをモニタリングするをご覧ください。