AI アシスタンスを使用して Firebase サービスを統合する

Antigravity、Claude Code、Codex、Cursor などの AI 搭載開発ツールを使用して、ウェブアプリの Firebase 設定を効率化します。Firebase エージェント スキルを Firebase CLI および Firebase MCP サーバーと組み合わせて使用することで、AI コーディング エージェントを、コードの作成、Firebase Security Rules の構成、ライブリソースの管理が可能な Firebase の専門家に変えることができます。

このガイドでは、AI コーディング エージェントを使用して ウェブアプリの Cloud Firestore、Firebase Authentication、Firebase Hosting を設定する方法について説明します。iOS、Android、Flutter アプリについては、近日中に情報が公開される予定です。

Firebase エージェント スキルとツールを使用する理由

AI コーディング エージェントは、特定のプロジェクト構成や古い情報に苦労することがよくあります。このツールキットは、専門的な手順（エージェント スキル）と 2 種類の補完的なエージェント実行ツール（CLI と MCP サーバー）を組み合わせることで、このギャップを埋めます。

• Firebase エージェント スキル: コーディング エージェントにドメインの専門知識とワークフローを提供します。スキルは、指示レイヤとして、コードの記述など、Firebase を使用する際のベスト プラクティスをエージェントに示します。スキルは、Firebase CLI と Firebase MCP サーバーを使用するタイミングと方法もエージェントに教えます。
• エージェント実行ツール:
  • Firebase CLI（コマンドライン ツール）: プロジェクトのライフサイクルと環境タスクのツールを提供します。エージェントは、ターミナル環境で CLI コマンドを実行して、Firebase プロジェクトでのサービスの設定、サイト全体またはバックエンド リソースのデプロイ、ローカル エミュレータの起動などを行うことができます。
  • Firebase MCP サーバー（プログラム ツールとリソース）: リアルタイムの検査とデータ オペレーション用のツールを提供します。構造化されたツール呼び出しにより、エージェントは Cloud Firestore ドキュメントのクエリと更新、Firebase Authentication ユーザーの管理、Security Rules の検証、ライブログやドキュメントのコンテキストへの直接取得などをプログラムで行うことができます。

Firebase CLI と Firebase MCP サーバーとともに Firebase エージェント スキルを使用すると、AI コーディング エージェントに次の機能が追加されます。

• 実践: コードを書くだけでなく、エージェントは、サービスの初期化、Firebase Authentication ユーザーの管理、新しい Firebase Security Rules のデプロイ、Cloud Firestore データの直接操作を行うことができます。
• 最新の状態を維持する: バージョン対応の公式プロンプトを使用して、エージェントに設定タスクを指示します。
• 精度の向上: プロジェクトの環境とスキーマにアクセスして、より関連性の高い正確なヘルプを提供します。
• トークン費用の削減: エージェント スキルは、特定のタスクで必要な場合にのみ詳細なドキュメントを読み込むため、セッションのオーバーヘッドを最小限に抑えることができます。

対象となる Firebase サービス

このガイドでは、主にエージェント スキル、Firebase CLI、Firebase MCP サーバーがどのように連携して、次のサービスと機能を迅速に設定できるかについて説明します。

• Cloud Firestore: NoSQL データベースをプロビジョニングします。
• Firebase Authentication: 安全なユーザー ログインを設定します。
• Firebase Security Rules: アプリの Security Rules を生成して改良します。
• Firebase Hosting: 静的ウェブアプリのデプロイ用にプロジェクトを設定します。

利用可能な機能の完全なリストについては、Firebase エージェント スキルの完全なリストをご覧ください。

全般的なワークフロー

次の手順では、Firebase エージェント スキルを使用して ウェブアプリで Firebase サービスを設定して使用する方法の一般的なワークフローについて説明します。バックグラウンドでは、エージェント スキルは Firebase CLI と Firebase MCP サーバーを使用してこれらのタスクを完了します。

ステップ 1: Firebase エージェント スキルをインストールする

ほとんどの場合、Firebase エージェント スキルは、次の 1 つのプロンプトを使用して任意のエディタにインストールできます。

claude plugin marketplace add firebase/agent-skills
claude plugin install firebase@firebase

npx skills add firebase/agent-skills

ステップ 2: Firebase MCP サーバーに接続する

多くの Firebase エージェント スキルはタスクに Firebase CLI を使用しますが、AI コーディング エージェントを Firebase MCP サーバーに接続することもおすすめします。この接続により、エージェントが Firebase 環境とやり取りする機能が強化され、より深い統合とアクセスが可能になります。

AI を活用した方法

ほとんどの場合、AI コーディング エージェントに Firebase MCP サーバーの設定を依頼できます。ただし、問題が発生した場合や、Firebase MCP サーバーがリストに表示されない場合は、手動による方法に切り替えてください。

手動の方法

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

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

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

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

"servers": {
  "firebase": {
    "type": "stdio",
    "command": "npx",
    "args": ["-y", "firebase-tools@latest", "mcp"]
  }
}

"mcp": {
  "servers": {
    "firebase": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "firebase-tools@latest", "mcp"]
    }
  }
}

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

ステップ 3: Firebase サービスを初期化する

エージェントのスキルとツールを設定すると、自然言語を使用して AI コーディング エージェントに Cloud Firestore、Firebase Authentication、Firebase Hosting を設定させることができます。

1. エージェントにサービスのセットアップをリクエストします。たとえば、次のようなプロンプトを使用できます。

   • このアプリのデータベースとして Cloud Firestore を設定します。
   • Authentication を使用してログインページを作成し、Security Rules を更新して、承認されたユーザーのみが自分のデータを読み書きできるようにします。
   • Firebase Hosting を設定し、アプリを本番環境にデプロイします。

2. エージェントから提供される可能性のある情報や手順ガイド（以下など）を確認します。

   1. プラン: エージェントが既存のコードベースに基づいて戦略を提案します。
   2. 接続: エージェントがローカルコードを既存の Firebase プロジェクトにリンクするか、新しい Firebase プロジェクトの作成をサポートします。
   3. リソースを初期化する: エージェントは、必要な Firebase ライブラリと構成をコードベースに追加します。
   4. ファイルを更新する: エージェントは、必要なファイル（firestore.rules（データベース内のデータの読み取り、書き込み、クエリを実行できるユーザーを定義する）や firebase.json（デプロイするサービスとその構成方法を Firebase CLI に通知する）など）を作成して更新します。
   5. 実行: エージェントが追加の構成手順またはデプロイ手順を案内します。

AI コーディング エージェントにプロンプトを送信する際の一般的なヒント

AI コーディング エージェントを最大限に活用するには、特に Firebase などの多面的な統合を扱う場合は、1 回限りのコマンドではなく、コラボレーションとしてやり取りを扱います。

具体的な背景情報を提供する

Firebase MCP サーバーは、プロジェクトに関する重要なコンテキストをエージェントに提供しますが、明確で具体的な自然言語プロンプトを使用すると、最適な結果が得られます。あいまいなリクエストは避けてください。

• 曖昧: 「データベース エラーを修正して。」
• 具体的: 「Cloud Firestore の 'users' コレクションに書き込もうとすると、'permission denied' エラーが発生します。firestore.rules を確認し、認証されたユーザーが自分のドキュメントに書き込めるようにする修正を提案してください。」

繰り返して改良を重ねる

AI コーディング エージェントが、複雑なタスクに対して最初の試行で完璧なコードを生成することはめったにありません。回答が正しくない場合は、会話を続けます。

• エラー メッセージを提供する: ターミナル エラーやコンソール ログをチャットに貼り付けます。
• 調整を依頼する: 「このコードは古い v8 SDK を使用しています。Firebase v9 モジュラー SDK を使用して書き換えます。」
• 説明をリクエストする: 「それらの Firebase Security Rules がユーザーデータをどのように保護しているかを説明してください。」

実行前に確認する

AI コーディング エージェントは強力ですが、間違いを犯したり、「ハルシネーション」（間違った名前の関数やサービスを生成する）を起こしたりすることがあります。

• コードを確認する: 本番環境にデプロイする前に、生成されたコード（特に Firebase Security Rules と構成ファイル（firebase.json など））を必ず確認してください。
• ローカルでテストする: 可能な場合は、変更を公開する前にローカルでテストするようエージェントに依頼してください。

MCP 接続を使用する

Firebase MCP サーバーを使用すると、エージェントがプロジェクト構造を直接認識できるため、特定のファイルを参照して、カスタマイズされた実装に関するアドバイスを得ることができます。

• 例: 「src/web/index.html ファイルを見て、標準の Firebase 初期化スクリプトを追加する場所を教えて。」

次のステップ

• 利用可能なすべての Firebase エージェント スキルの完全なリストを確認する。
• Firebase MCP サーバーが提供する利用可能なプロンプト、ツール、リソースの完全なリストを参照する。
• Firebase CLI で提供されるツールの詳細を確認する。