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

Antigravity、Claude Code、Codex、Cursor などの AI 搭載の開発 ツールを使用して、ウェブアプリの Firebase 設定を効率化します。AntigravityFirebase エージェント スキルを 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 を使用してログインページを作成し、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' エラーが発生します。Cloud Firestorefirestore.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 サーバーが提供する利用可能なすべてのプロンプト、ツール、リソースの完全なリストを確認する。
• CLI が提供するツールについて詳しく学習するFirebase。