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

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

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

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

汎用 AI モデルは、特定のプロジェクト構成や古い情報に対応するのに苦労することが多い。このツールキットは、そのギャップを埋めるものです。

• Firebase エージェント スキル: スキルは、コーディング エージェントに ドメインの専門知識 を提供します。最新のドキュメントと最適なワークフローが提供されるため、エージェントはアーキテクチャを構築する正しい方法と Firebase が推奨する方法を把握できます。
• Firebase MCP サーバー: MCP サーバーは、コーディング エージェントにコンテキストとアクセス権を付与します。エージェントがアクティブなプロジェクト リソース、ローカルファイル、構成をプログラムで検査するための標準プロトコルを確立します。
• FirebaseCLI: コマンドラインインターフェースはコーディングエージェントに実行可能な力。これは、エージェントがデータベースの初期化、ユーザー認証設定の管理、ユーザーに代わってコードのデプロイといった、負荷の高いタスクを実行するために使用する実行ツールです。

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

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

エージェント スキルとツールでサポートできる Firebase サービス

このガイドでは、エージェントスキル、Firebase CLI、および Firebase MCP サーバーがどのように連携して、これらのサービスと機能を迅速にセットアップできるかを中心に説明します。

• Cloud Firestore: NoSQL データベースをプロビジョニングします。
• 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
    }
  }
}

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

"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、Authentication、Firebase Hosting を設定させることができます。

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

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

2. エージェントから提供される可能性のある情報や手順（以下を含む）を確認し、それに沿って操作します。

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

AI コーディング エージェントのプロンプト作成に関する一般的なヒント

AI コーディングエージェントを最大限に活用するには、特に Firebase のような多面的な統合を扱う場合、そのやり取りを単発のコマンドではなく、コラボレーションとして捉えることが重要です。

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

Firebase MCP サーバーはエージェントにプロジェクトに関する重要なコンテキストを提供しますが、明確で具体的な自然言語プロンプトを使用すると、最良の結果が得られます。曖昧な要求は避けるべきだ。

• 曖昧: 「データベース エラーを修正して。」
• Specific: "Cloud Firestoreの'users'コレクションに書き込もうとすると'権限拒否'エラーが発生します。私の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が提供するツールについて詳しくはこちらをご覧ください。