【Firebase Studio】環境構築不要！Genkit×MCPでGA4分析AIアプリを作る全工程とプロンプト完全ガイド

最終更新日: 2026年3月4日

皆さん、こんにちは。okamoです。

過去の記事で、VSCode+CopilotでのMCP活用やBigQuery連携について紹介しました。

今回は視点を変えて、Google が発表した Firebase Studio を使ってみました。 最大の特徴は「ローカル環境構築が不要」であること。ブラウザを開き、AIに指示を出すだけでサンプルアプリが作れてしまいます。

この記事では、Firebase Studio での開発イメージをお伝えするため、Genkit と MCP を組み合わせた「GA4分析AIエージェント」サンプルアプリを構築した際の手順と、試行錯誤のプロセス（使用したプロンプト）をすべて公開します。

完成したもの

まずは結果からご覧ください。Firebase Studio (Firebase App Hosting 環境) 上で、自然言語でデータ分析ができるエージェントアプリが完成しました。（Firebase App Hosting上で、npxコマンド経由のstdioタイプMCPサーバーを起動しています）

完成したAIデータ分析エージェント

今回の検証での最大の教訓は**「Firebase Studio + Genkit でエージェントアプリを作るなら、MCPを無理に使うより独自ツールを定義したほうが早くて安定する」**という点でした。

ソースコードとAIとの対話ログ（プロンプト履歴）はすべて GitHub で公開しています。

👉 GitHubリポジトリ: okamoto53515606/firebase-studio-sample1

Firebase Studio Sample1 — 開発ドキュメント

ここからは、実際にこのアプリをゼロから構築した手順を解説します。

概要

Next.js + Genkit + BigQuery + GA4 を使った AI データ分析エージェントです。 チャットUIから自然言語で質問すると、AIが BigQuery にSQLを発行したり、GA4からアクセス解析データを取得して回答します。

アーキテクチャ

ユーザー → チャットUI (Next.js) → API Route → Genkit Agent
                                                   ├── BigQuery ツール (直接)
                                                   └── GA4 ツール (MCP経由ラッパー )

📝 事前準備

セットアップ中に、いくつかのAPIキーや設定値をメモしておく必要があります。 お手元にテキストエディタ（メモ帳など）を開いておくと便利です。

項目名メモするタイミング
Gemini API Key手順3
プロジェクトID（studio-〜）手順9
サービスアカウント手順11
BigQuery プロジェクトID手順12
GA4 プロパティID手順13

手順1〜2: GCPコンソールにログイン

まず、Google Cloud Platform (GCP) コンソールにログインします。

👉 https://console.cloud.google.com/

GCPコンソール

手順3: Gemini API Key を取得する

AIエージェントが使用する「Gemini API Key」を取得します。

  1. Google AI Studio にアクセスします。
  2. 「APIキーを作成」ボタンをクリックします。

APIキーを作成

  1. 作成されたキーをコピーして必ずメモしておいてください。

APIキーをコピー

手順4〜9: Firebase Studio でサイトを公開する

いよいよ Firebase Studio を使います。まずは「Hello World」を表示するだけのサイトを立ち上げます。

  1. Firebase Studio にアクセスします。
  2. 最初のプロンプト入力欄に、以下の内容をコピー＆ペーストしてエンターキーを押します。
App Name: MyHomepage
Core Features:
hello worldを表示するだけのアプリ

Firebase Studio 初期画面

  1. 生成されたブループリントの右上にある「Customize」をクリックします。

Customizeボタン

  1. ここで、詳細な要件を日本語で追記することで、余計なライブラリを含まないシンプルな構成にします（下記の画像を参考に書き換えてください）。その後「Prototype this App」をクリック。

日本語の依頼文に書き換える

  1. 準備ができたら、右上の「Publish」ボタンをクリックします。

Publishボタン

  1. 課金設定（Billing）が求められた場合、「Create a Cloud Billing account」から設定を行います。※今回の範囲であれば無料枠内で試せることが多いです。

Billing設定

  1. 「Link Google Cloud Billing account」をクリック。

Billingリンク

  1. 「Set up services」をクリックして、必要なAPIを有効化します。

Set up services

  1. 最後に「Publish now」をクリックしてデプロイを開始します。

Publish now

  1. 処理完了後、表示されたURLをクリックしてサイトを確認します。

Visit your app

  1. 無事「hello world」が表示されました！

Hello World

手順10: コード画面・ターミナルの操作

ここからは開発モードです。右上の < /> アイコンをクリックしてコードエディタを開きます。

コード画面へ

App overview を閉じ、GEMINI タブの「＋」ボタンから「New Chat」を開始します。Prototyper から通常の Gemini チャットに切り替えることで、コーディングの指示が通りやすくなります。

New Chat

左上のハンバーガーメニューから「Terminal」→「New Terminal」を開きます。

新規ターミナル

これでコマンド操作が可能になります。

ターミナル画面

手順11〜13: 権限設定（IAM）

Firebase Studio のアプリが BigQuery や GA4 のデータを読み取れるように、サービスアカウントに権限を付与します。

1. サービスアカウントの確認

GCPコンソールの「IAMと管理」→「サービスアカウント」で、firebase-app-hosting-compute@... という名前のアカウントを探し、メールアドレスをメモします。

サービスアカウント確認

2. BigQuery 権限の付与

BigQuery のデータがあるプロジェクトの IAM 設定で、上記サービスアカウントに以下のロールを付与します。

  • BigQuery ジョブユーザー
  • BigQuery データ閲覧者
  • BigQuery メタデータ閲覧者

BigQuery IAM設定

3. GA4 権限の付与

GA4 管理画面の「アカウントのアクセス管理」で、サービスアカウントを「閲覧者」として追加します。

GA4 IAM設定

また、Firebase Studio のプロジェクト側で Google Analytics Data API (analyticsdata.googleapis.com) を有効にすることを忘れないでください。これを忘れると API エラーになります。

手順14: 環境変数の設定

Firebase Studio のターミナルで .env ファイルを作成・編集し、Gemini API キーや各IDを設定します。

GEMINI_API_KEY=xxxxxxxxxxxxxxx
BIGQUERY_PROJECT_ID=your-project-id
GA_PROPERTY_ID=123456789

手順15〜20: AI への指示と開発の記録（プロンプト全公開）

ここからが開発の本番です。私は以下の6段階（注: プロンプト7はまだ未適用）のプロンプトで指示を出し、アプリを構築していきました。 特にMCP連携におけるエラーと解決策は、同様の開発をする際の参考になるはずです。

AIへの指示プロンプトを作成する際には、Genkit公式のMCPドキュメントを参考にしています。AIモデルに正確なコードを書かせるためには、公式ドキュメントのURLや内容をプロンプトのコンテキストに含めると効果的です。

👉 参考ドキュメント (Genkit MCP): Model Context Protocol | Genkit

👉 全プロンプト（claudeやgeminiとの全やりとりの生ログ）の保存先: GitHub/prompt_history

段階的なプロンプト実行フロー

1. プロンプト1: ベースアプリ作成（BigQuery エージェント）

📄 ファイル: gemini-prompt.md

Hello World アプリを改修し、Genkit + BigQuery を使った AI データ分析エージェントの基盤を作成します。 executeBigQuery などのツール定義や、チャットUI (src/app/page.tsx) がこの段階で生成されます。

2. プロンプト2: GA4 MCP 連携追加

📄 ファイル: gemini-prompt-ga4-mcp.md

@genkit-ai/mcp を導入し、GA4 MCP サーバー (mcp-server-ga4) に接続します。これにより、AIがGA4のデータにもアクセスできるようになります。

3. プロンプト3: GA4 MCP スキーマクラッシュ修正

📄 ファイル: gemini-prompt-ga4-mcp-fix-b.md

GA4 MCP ツールの JSON Schema の一部（properties が未定義のオブジェクト）が Genkit と相性が悪く、クラッシュする問題を修正します。スキーマを補完するパッチ関数 (patchSchema) を追加します。

4. プロンプト4: 画面（UI）が動作しない問題の修正

📄 ファイル: gemini-prompt-ui-fix.md

CLIテストでは動くものの、チャットUI経由だと動かない不具合を修正します。 APIへのパラメータの渡し方の修正や、MCPホストの接続維持（シングルトン化）を行います。

5. プロンプト5: GA4 INVALID_ARGUMENT エラー修正

📄 ファイル: gemini-prompt-ga4-params-fix.md

LLM が生成する GA4 API へのパラメータ形式が正しくない問題を修正するため、システムプロンプトに正確なパラメータ形式（[{name: "..."}] 等）を追記します。

6. プロンプト6: GA4 ツールが選択されない問題の修正（最終的なMCP構成）

📄 ファイル: gemini-prompt-ga4-routing-fix.md

ここが重要な転換点です。 MCPツールを直接LLMに見せると複雑すぎてうまく使ってくれないため、「シンプルなラッパーツール」を定義する方式に変更しました。

  • getGA4PageViews, getGA4ActiveUsers などの目的特化型ツールを作成。
  • 内部で複雑なMCP呼び出しを行うことで、LLMの負担を減らし動作を安定させました。

7. プロンプト7: MCP 依存を除去し GA4 Data API 直接呼び出しに変更（注: このプロンプトはまだ未適用です）

📄 ファイル: gemini-prompt-remove-mcp.md

プロンプト2〜6での試行錯誤の結果、「ラッパーツールを書くなら MCP を経由する意味が薄い」という結論に至りました。 このプロンプトでは、MCP 依存を完全に削除し、@google-analytics/data ライブラリを使って直接 API を叩く構成に書き換えます。実用的なアプリとしてはこれが正解の構成です。（今回はMCPの動作確認もしたかったので、まだ未適用です。）

まとめ: 教訓と展望

Firebase Studio を使えば、環境構築の手間を最小限に抑えて AI アプリを開発・公開できます。ターミナルも使えるため、細かな修正も可能です。

一方で、「Genkit × MCP」はまだ発展途上 だと感じました。特に実用的なアプリを作る場合、汎用的な MCP サーバーをそのまま繋ぐよりも、自分のアプリのユースケースに合わせた独自ツール (ai.defineTool) を定義する方が、現時点では制御しやすく無難 です。

今回の検証に使ったすべてのコードと、AI との対話ログは GitHub に置いています。Firebase Studio での開発の参考にしてください。

👉 GitHub: okamoto53515606/firebase-studio-sample1

タグ: Firebase, Genkit, MCP, GA4, BigQuery, Google AI Studio, GCP
トップページへ

コメント (0)

コメントを投稿するにはログインが必要です。