Firebase Studio の Firebase MCP

1. 概要

プレビュー版: Firebase Studio と Firebase MCP はプレビュー版です。そのため、SLA または非推奨ポリシーの対象ではなく、下位互換性のない方法で変更される可能性があります。

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

学習内容

• App Prototyping エージェントを使用して静的ウェブアプリを生成する
• Firebase プロジェクトに接続する
• Firebase MCP サーバーを設定する
• Firebase MCP を使用して Firestore を追加する

必要なもの

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

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

アプリ プロトタイピング エージェントは、Gemini in Firebase を使用してアプリを構築します。同じプロンプトを使用した場合でも、結果が異なることがあります。

1. Google アカウントにログインし、Google デベロッパー プログラムに参加して、Firebase Studio を開きます。
2. [AI を使用してアプリのプロトタイプを作成する] フィールドに、アプリの説明を入力します。

   An app for a picker wheel that allows custom input.
   

3. [プロンプトを改善] をクリックします。改善されたプロンプトを確認します。
4. [AI でプロトタイプを作成する] をクリックします。
5. 提案されたアプリ ブループリントを確認します。[カスタマイズ] をクリックして編集します。
6. [保存] をクリックします。
7. ブループリントで更新の組み込みが完了したら、[このアプリのプロトタイプを作成する] をクリックします。
8. ブループリントに AI 要素が含まれている場合、エージェントは Gemini Gemini キーの入力を求めるプロンプトを表示します。独自の Gemini API キーを追加するか、[自動生成] をクリックして Gemini API キーを生成します。[自動生成] をクリックすると、Firebase Studio によって Firebase プロジェクトが作成され、Gemini API キーが生成されます。
9. アプリ プロトタイピング エージェントは、ブループリントを使用してアプリの最初のバージョンを作成します。完了すると、アプリのプレビューが Gemini チャット インターフェースとともに表示されます。アプリを確認してテストします。エラーが発生した場合は、チャットで [エラーを修正] をクリックして、エージェントがエラーを修正できるようにします。

3. （省略可）コードを取得する

行き詰まった場合は、サンプル ファイルを使用して、この時点からサンプルアプリをより詳しく確認してください。

1. フォルダ内のファイルをダウンロードします。
2. Firebase Studio で、 [コードに切り替え] をクリックしてコードビューを開きます。
3. ダウンロードしたファイルを Firebase Studio のエクスプローラ ペインにドラッグします。ファイルで既存のファイルを置き換えることを許可します。
4. ターミナル（Shift+Ctrl+C）で次のコマンドを実行して、パッケージをインストールします。

   npm install
   

5. Firebase Studio の [ソース管理] ペインを開き、コードの変更を説明するメッセージ（「GitHub からコードをインポートしました」など）を入力して、[コミット] をクリックします。
6. [Switch to Prototyper] をクリックして、アプリのサンプル バージョンを使用して Codelab を続行します。

注: アプリ プロトタイピング エージェントを使用するには、プロンプトを使用してワークスペースを開始する必要があります。つまり、この Codelab では、これらのファイルを使用して新しいワークスペースを作成するのではなく、既存のファイルを置き換えるだけです。

4. Firebase プロジェクトに接続する

これで完了です。アプリはローカルで動作しています。バックエンドを付与するには、次に Firebase プロジェクトに接続します。

1. App Prototyping エージェントに Firebase プロジェクトへの接続を依頼します。

   Connect to a Firebase project.
   

   エージェントが新しいプロジェクトを作成するか、既存のプロジェクトに接続します（以前に自動生成オプションを使用して Gemini API キーを取得した場合は、画面の左上隅にあるワークスペース名の横にプロジェクトが表示されます）。次に、必要な Firebase 構成を生成し、src/lib/firebase.ts を介してアプリに統合します（図を参照）。

   import { initializeApp, getApp, getApps } from 'firebase/app';
   
   const firebaseConfig = {
     "projectId": "foo-bar-baz",
     "appId": "1:630673270654:web:3eda41879acd38fa96ce14",
     "storageBucket": "foo-bar-baz.firebasestorage.app",
     "apiKey": "AIzaSyDGoMZQia334izw8JedslMTUD0fNpmFca0",
     "authDomain": "foo-bar-baz.firebaseapp.com",
     "measurementId": "",
     "messagingSenderId": "630673270654"
   };
   
   // Initialize Firebase
   const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
   
   export default app;
   

   上記のプロンプトでタスクを一度に完了できない場合は、エージェントに再度依頼してください。必要に応じて、手順を分割してください。

   Create a new Firebase project.
   

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

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

1. [コードに切り替える] をクリックして、コードビューを開きます。
2. ターミナル（Shift+Ctrl+C）で次のコマンドを実行して Firebase アカウントにログインし、画面に表示される手順に沿って操作して、すべてのデフォルト オプションをそのままにします。

   firebase login --no-localhost
   

3. エクスプローラ（Ctrl+Shift+E）で、.idx フォルダを右クリックし、[新しいファイル] を選択します。ファイルに「mcp.json」という名前を付け、Enter キーを押します。
4. サーバー構成を .idx/mcp.json に追加します。

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

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

6. Firebase MCP を使用して Firestore を追加する

目標 1: Firestore を追加する

1. Prototyper に切り替えます。チャット インターフェースで、アプリで Firestore を使用するようにエージェントに依頼します。

   Use Firestore for user entries. Give anyone read and write access.
   

   エージェントの対応:
   • Firebase MCP ツール firebase_init を呼び出して Firestore を初期化します。これにより、Firestore ルール（図のとおり）とインデックス ファイルが作成されます。
   • ローカル ストレージではなく Firestore を使用するようにアプリケーション コードを更新する

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       match /{document=**} {
         allow read, write: if true;
       }
     }
   }
   

   ここでは、データベースに対する読み取り / 書き込みアクセス権をすべてのユーザーに付与します。この Codelab 以外では、常にデータベースを保護する必要があります。このトピックについて詳しくは、ドキュメントをご覧ください。
2. [コードに切り替え] をクリックします。ターミナル（Shift+Ctrl+C）で、現在の Firebase プロジェクトで Firestore API を有効にしたことがない場合は、Firestore を初期化します。

   firebase init firestore
   

   画面上の手順に沿って操作し、デフォルトのオプションはそのままにします。前の手順のセキュリティ ルールを上書きしないでください。次に、データベース インスタンスのセキュリティ ルールをデプロイします。

   firebase deploy --only firestore
   

   これにより、Firestore データベース インスタンスがプロビジョニングされます。

目標 2: 試してみる

1. アプリを再読み込みし、ルーレットでエントリを作成、削除して、Firebase コンソールの Firestore ページでこれらの更新を確認します。

2. Firestore とチャットしてデータベースをクエリすることもできます。

   List my Firestore collections.
   

   Gemini が Firebase MCP ツール firestore_list_collections を呼び出すことを想定します。

7. まとめ

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

詳細

• Firebase MCP ツール
• GitHub の Firebase MCP
• Firebase のヒントとアドバイス 2
• Firebase Studio ワークスペースの詳細