このページは Cloud Translation API によって翻訳されました。

Firebase Studio の Firebase MCP

1. 概要

この Codelab では、Firebase Studio で App Prototyping エージェントと Firebase MCP サーバーを使用して、Firebase Realtime Database を使用するフルスタックウェブアプリを作成します。

最終的なアプリの GIF アニメーション

学習内容

アプリプロトタイピングエージェントを使用して静的ウェブアプリを生成する
Firebase MCP サーバーを設定する
Firebase MCP を使用して Firebase Realtime Database を追加する

必要なもの

任意のブラウザ（Google Chrome など）
Firebase プロジェクトの作成と管理に使用する Google アカウント

2. App Prototyping エージェントを使用してアプリを生成する

アプリプロトタイピングエージェントは、Gemini in Firebase を使用してアプリを構築します。同じプロンプトを使用した場合でも、結果が異なることがあります。行き詰まった場合は、この Codelab のいくつかのチェックポイントでラボを再開するために、ワークスペースに追加できる一連のファイルが用意されています。

Google アカウントにログインし、Google デベロッパープログラムに参加して、Firebase Studio を開きます。
[AI を使用してアプリのプロトタイプを作成する] フィールドに、アプリの説明を入力します。
```
An app for a picker wheel that allows custom input.
```
[プロンプトを改善] をクリックします。改善されたプロンプトを確認します。
[AI でプロトタイプを作成する] をクリックします。
提案されたアプリブループリントを確認します。[カスタマイズ] をクリックして編集します。
[保存] をクリックします。
ブループリントで更新の組み込みが完了したら、[このアプリのプロトタイプを作成する] をクリックします。
ブループリントに AI 要素が含まれている場合、エージェントは Gemini Gemini キーの入力を求めるプロンプトを表示します。独自の Gemini API キーを追加するか、[自動生成] をクリックして Gemini API キーを生成します。[自動生成] をクリックすると、Firebase Studio によって Firebase プロジェクトが作成され、Gemini API キーが生成されます。
アプリプロトタイピングエージェントは、ブループリントを使用してアプリの最初のバージョンを作成します。完了すると、アプリのプレビューが Gemini チャットインターフェースとともに表示されます。アプリを確認してテストします。エラーが発生した場合は、チャットで [エラーを修正] をクリックして、エージェントがエラーを修正できるようにします。

3. Firebase Studio で Firebase MCP を設定する

Firebase MCP サーバーは、Firebase Authentication、Cloud Firestore、Firebase Data Connect などの Firebase サービスからデータを設定、管理、取得するためにエージェントが呼び出すことができるツールを提供することで、アプリプロトタイピングエージェントの機能を拡張します。設定方法は次のとおりです。

Firebase Studio で、 [コードに切り替える] をクリックしてコードビューを開きます。
ターミナル（Shift+Ctrl+C）で次のコマンドを実行して Firebase アカウントにログインし、画面に表示される手順に沿って操作して、すべてのデフォルトオプションをそのままにします。
```
firebase login --no-localhost
```
エクスプローラ（Ctrl+Shift+E）で、.idx フォルダを右クリックし、[新しいファイル] を選択します。ファイルに mcp.json という名前を付けて、Enter キーを押します。

サーバー構成を .idx/mcp.json に追加します。

{
    "mcpServers": {
        "firebase": {
            "command": "npx",
            "args": [
                "-y",
                "firebase-tools@latest",
                "experimental:mcp"
            ]
        }
    }
}

Firebase MCP サーバーに接続していることを確認します。[出力] パネルに同様のログエントリが表示され、右側のチャネルとして [Gemini] が選択されているはずです。 Gemini の MCPManager ログ

4. Firebase MCP を使用して Firebase Realtime Database を追加する

目標 1: アプリに Firebase を追加する

Prototyper に切り替えます。チャットインターフェースで、エージェントにプロジェクトの作成を依頼します。
```
Create a Firebase project for my app.
```
エージェントが Firebase MCP ツール firebase_create_project を呼び出すことを想定しています。Gemini API キーを取得するために自動生成オプションを使用して Firebase プロジェクトをすでに作成している場合は、この手順をスキップします。画面の左上隅にあるワークスペース名の横に、プロジェクト ID が表示されます。または、エージェントにプロジェクトのリストを表示してもらい、使用するプロジェクトをメモします。
```
List my Firebase projects
```
エージェントが Firebase MCP ツール firebase_list_projects を呼び出すことを想定しています。
エージェントにこのプロジェクトへの接続を依頼します。
```
Connect my app to my project `spinsync-3y3c6`.
```
アクティブなプロジェクトを設定する .firebaserc ファイルが表示されていることを確認します。そうでない場合は、Firebase 環境を更新するようエージェントに依頼してください。
```
Update my Firebase environment to use this project.
```
エージェントが Firebase MCP ツール firebase_update_environment を呼び出すことを想定しています。ただし、エージェントがツールを呼び出さずにこれを達成する可能性もあります。最後に、Firebase 環境に正しいアクティブプロジェクトがあり、認証済みユーザーとして自分が存在することを確認します。
```
Show me my current Firebase environment.
```
エージェントが Firebase MCP ツール firebase_get_environment を呼び出すことを想定しています。
Firebase プロジェクトでウェブアプリを作成するようエージェントに依頼します。
```
Create a web app in my active Firebase project.
```
エージェントがツール firebase_create_app を呼び出してアプリ ID を返すことを想定します。エージェントがこの処理に失敗した場合は、をクリックして再試行するか、こちらの手順に沿って Firebase コンソールでこの手順を完了します。
```
Use the App ID to get the SDK configuration and add to my app.
```
エージェントがツール firebase_get_sdk_config を呼び出し、Firebase 構成でコードを更新することを想定しています。エージェントがタスクの完了を宣言した後に API キーやその他の構成が src/lib/firebase.ts に表示された場合は、アプリの安全性を確保するために、それらを移動するようエージェントに依頼してください。
```
Secure my code by moving my Firebase config to the `.env` file.
```

目標 2: Firebase Realtime Database を追加する

そのまま使用するか、Prototyper に切り替えます。チャットインターフェースで、プロジェクトに Firebase Realtime Database を設定するようエージェントに依頼します。
```
Set up Firebase Realtime Database in my active project. Give anyone
read and write access.
```
エージェントは、この会話の最後に Firebase MCP ツール firebase_init を呼び出し、ファイル変更の一環として database.rules.json にセキュリティルールを作成します。
```
{
    "rules": {
        ".read": true,
        ".write": true
    }
}
```
ここでは、データベースに対する読み取り / 書き込みアクセス権をすべてのユーザーに付与します。この Codelab の外では、常にデータベースを保護する必要があります。このトピックについて詳しくは、ドキュメントをご覧ください。
[コードに切り替え] をクリックします。ターミナル（Shift+Ctrl+C）で、Firebase Realtime Database を初期化します。
```
firebase init database
```
画面上の手順に沿って操作し、デフォルトのオプションはそのままにします。次に、データベースインスタンスのセキュリティルールをデプロイします。
```
firebase deploy --only database
```
Prototyper に切り替えます。ユーザーエントリにデフォルトのデータベースインスタンスを使用するようエージェントに依頼します。
```
Use my default Realtime Database instance for user entries.
```
エージェントが残りのソースコードを更新して、アプリをデータベースインスタンスに接続します。

目標 3: テストする

ピッカーホイールに新しいエントリをいくつか作成し、Firebase コンソールの Firebase Realtime Database ページに表示されることを確認します。

Firebase コンソールの Firebase Realtime Database

5. まとめ

これで完了です。Firebase MCP を使用して App Prototyping エージェントでフルスタックのウェブアプリを作成しました。Firebase MCP サーバーが提供する他のツールも試して、アプリの機能を拡張してください。