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

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

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

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

一般的な AI モデルは、特定のプロジェクト構成や古い情報を扱うのが苦手なことがよくあります。このツールキットは、そのギャップを埋めるものです。

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

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 つのプロンプトを使用して任意のエディタにインストールできます。

npx skills add firebase/agent-skills --agent=antigravity

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

npx skills add firebase/agent-skills --agent=codex

npx skills add firebase/agent-skills --agent=cursor

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

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

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

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

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

• 曖昧: 「データベース エラーを修正して。」
• 具体的: 「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 で提供されるツールについて学習する。