Data Connect で AI アシスタントを使用する

Gemini in Firebase を使用して、クライアントサイドコードのスキーマ、クエリ、ミューテーションを作成します。

アプリ、データモデル、または必要なクエリやミューテーションを自然言語で記述すると、Firebase が Data Connect の同等のものを生成します。

この AI アシスタンスは、次の開発コンテキストで使用できます。

Firebase コンソールで、スキーマとオペレーションを生成、テスト、デプロイできます。
ローカル環境では、Firebase CLI と Data Connect VS Code 拡張機能を使用して、エミュレータでアプリを生成、テスト、開発できます。
AI を搭載した開発ツールは、Firebase MCP サーバーを使用して、アプリを生成、テスト、開発できます。

Data Connect のData Connect スキーマ、クエリ、ミューテーションの構文について詳しくは、ガイドをご覧ください。

AI assistance for Data Connect がデータを使用する方法

詳細については、Gemini in Firebase がデータを使用する方法をご覧ください。

AI assistance for Data Connect を設定する

Data Connect で AI アシスタンスを使用するには、Firebase で Gemini を有効にします。手順については、Set up Gemini in Firebase をご覧ください。

Gemini in Firebase でスキーマ、クエリ、ミューテーションを生成する

多くのワークフローで Data Connect の AI アシスタンスを使用できます。

AI assistance for Data Connect

Firebase コンソールで

Data Connect サービスを作成すると、Firebase コンソールに「Gemini を使ってみる」というエクスペリエンスが表示されます。

アプリのアイデアを記述すると、AI アシスタンスによって次のものが生成されます。

アプリのアイデアに基づく完全なスキーマ。
オペレーションとデータミューテーションの例。

[データ] ページで、[**GraphQL の文書作成サポート**][pen_spark] ボタンを使用して、自然言語に基づいてオペレーションを生成して実行できます。ユースケースの例をご覧ください。

このワークフローについては、スタートガイドをご覧ください。デプロイされたスキーマとオペレーションを使用して、ローカル開発環境で作業を続行できます。

ローカル環境で

Firebase CLI と Data Connect VS Code 拡張機能から AI アシスタンスを利用することもできます。

アプリのアイデアを firebase init dataconnect に提供すると、次のものが生成されます。

アプリのアイデアに基づく完全なスキーマ。
オペレーションの例とシードデータのミューテーション。

Data Connect VS Code 拡張機能には、次の機能があります。

オペレーションコードレンズの生成/絞り込み。GraphQL コメントを Data Connect オペレーションに変換します。
Gemini Code Assist と Firebase MCP サーバーとのシームレスな統合。

このワークフローについては、ローカルプロトタイピングのスタートガイドをご覧ください。

AI を搭載した開発ツールで Firebase MCP サーバーを使用する

Firebase MCP サーバーは、Gemini CLI、Gemini Code Assist、Cursor、Visual Studio Code Copilot、Claude Desktop、Windsurf Editor など、MCP クライアントとして機能できる任意の AI アシスタントツールと連携できます。

Firebase MCP サーバーは、AI を搭載した開発ツールが Data Connect と連携しやすくするための追加のコンテキストと機能を提供します。次のことができます。

新しいプロジェクトディレクトリと生成された SDK を設定します。
コンパイルエラーに基づいてスキーマとオペレーションを構築して反復処理します。
ローカルエミュレータまたはバックエンドサービスに対してオペレーションを実行します。
既存のサービスに関する情報を収集します。

Firebase MCP サーバーを使用するには:

こちらのガイドに沿って MCP クライアントを設定します。
Data Connect に関連するサポートをリクエストします。プロンプトの例:
1. 「ピザ配達アプリの Data Connect プロジェクトを設定して。」
2. 「Data Connect のコンパイルエラーを修正して。」
3. 「ホームページに、アクティブなチャットルームとフレンドリストを表示する必要があります。Data Connect クエリを生成して。」
4. 「ローカルの Data Connect エミュレータにはどのようなユーザーがいますか？」
5. 「Data Connect サービスはどの Google Cloud リージョンにありますか？」

オペレーション生成のユースケースの例

以降のセクションでは、ユースケースの例について説明します。

評価の降順で上位 5 本の映画を返す
ユーザー入力に基づいて映画をデータベースに追加するミューテーションを作成する
ユーザーが指定したジャンルと評価に基づいてレビューを一覧表示するクエリを作成する

評価の降順で上位 5 本の映画を返す

AI assistance for Data Connect を使用して自然言語に基づいて GraphQL を生成するには:

プロジェクトで Data Connect を開き、[サービス] でデータソースを選択します。
[データ] をクリックします。
[GraphQL の作成を支援] pen_spark アイコンをクリックします。生成するクエリまたはミューテーションを自然言語で記述し、[生成] をクリックします。

たとえば、「Data Connect (web) Codelab でビルドする」で参照されている映画データソースを使用している場合に、「2022 年の上位 5 本の映画を評価の降順で返す」と尋ねると、次のような結果が返されます。
```
query TopMovies2022 {
  movies(where: {releaseYear: {eq: 2022}}, orderBy: [{rating: DESC}], limit: 5) {
    id
    title
    rating
    releaseYear
  }
}
```
回答を確認します:
- 回答が正しいと思われる場合は、[挿入] をクリックして、回答をコードエディタに挿入します。
- 回答を改善できる場合は、[編集] をクリックしてプロンプトを更新し、[再生成] をクリックします。
回答を承認したら、必要に応じて [パラメータ] セクションで次の設定を行います。
- 変数: クエリまたはミューテーションに変数が含まれる場合は、ここで定義します。JSON を使用して定義します（例: {"title":"The Matrix", "releaseYear":"1999"}）。
- 認可: クエリまたはミューテーションを実行する認可コンテキスト（管理者、認可済み、未認可）を選択します。
警告: ミューテーションを実行する場合は、実行する前に慎重に確認してください。データエディタでミューテーションを実行すると、リクエストが実行されます。
コードエディタで [実行] をクリックして、結果を確認します。

コードエディタで複数のクエリまたはミューテーションをテストするには、名称が付けられていることを確認します。たとえば、次のクエリの名称は GetMovie です。クエリまたはミューテーションの最初の行にカーソルを移動して、[実行] ボタンを有効にします。

query GetMovie($myKey: Movie_Key!) {
  movie(key: $myKey) { title }
}

ユーザー入力に基づいて映画をデータベースに追加するミューテーションを作成する

この例では、自然言語を使用してデータベースにデータを入力する GraphQL ミューテーションを生成する方法を示します。この例では、Firebase Data Connect ドキュメントと「Data Connect （ウェブ）Codelab でビルドする」で使用されている映画データベーススキーマを使用していることを前提としています。

Firebase コンソールから、開く Data Connect。
サービスとデータソースを選択し、[データ] タブを開きます。
[**GraphQL の文書作成サポート**]pen_spark アイコンをクリックして、ミューテーションを記述します。
```
Create a movie based on user input.
```

[生成] をクリックします。ミューテーションが返されます。たとえば、Gemini は次のようなミューテーションを返します。

mutation CreateMovie($title: String!, $releaseYear: Int!, $genre: String!, $rating: Float!, $description: String!, $imageUrl: String!, $tags: [String!] = []) @auth(level: USER) {
  movie_insert(data: {
    title: $title,
    releaseYear: $releaseYear,
    genre: $genre,
    rating: $rating,
    description: $description,
    imageUrl: $imageUrl,
    tags: $tags
  })
}

出力を確認します。必要に応じて、[編集] をクリックしてプロンプトを絞り込み、[再生成] をクリックします。
次に、[挿入] をクリックして、ミューテーションをデータエディタに挿入します。

ミューテーションを実行するには、変数を追加する必要があります。[パラメータ] セクションで [変数] を開き、テスト変数を含めます。

{"title":"My amazing movie", "releaseYear":2024, "genre": "Comedy",
"rating": 8, "description": "A new movie to test mutations",
"imageUrl": "", "tags": ["comedy","space travel"]}

[実行] をクリックします。

ヒント: Gemini に出力の展開をリクエストすることもできます。たとえば、出力にコメントとソースプロンプトを含めるには、「ユーザー入力に基づいて映画を作成します。ミューテーションを文書化し、このプロンプトを回答に含めてください」のようにします。

次に、映画が追加されたことを確認するクエリを作成します。[**GraphQL の文書作成サポート**] pen_spark をクリックし、表示されたボックスにプロンプトを入力します。

List all movies from 2024 that include all of these tags: 'space travel', 'comedy'.

Gemini から次のような回答が返されます。

query ComedySpaceTravelMovies2024 @auth(level: PUBLIC) {
  movies(
    where: {
    releaseYear: { eq: 2024 },
    tags: { includesAll: ["space travel", "comedy"] }
    }
  ) {
      id
      title
      imageUrl
      releaseYear
      genre
      rating
      description
      tags
    }
}

クエリを挿入して実行します。追加した映画が [履歴] フィールドに表示されます。

ユーザーが指定したジャンルと評価に基づいてレビューを一覧表示するクエリを作成する

この例では、自然言語を使用して GraphQL クエリを生成する方法を示します。この例では、 Firebase Data Connectドキュメントと「Build with Data Connect（ウェブ）」Codelabで使用されている映画データベースを使用していることを前提としています。

Firebase コンソールから、開く Data Connect。
サービスとデータソースを選択し、[データ] タブを開きます。
[GraphQL の文書作成サポート]pen_spark アイコンをクリックして、クエリを記述します。
```
List all movie reviews, based on user-configurable genre and ratings.
```

[生成] をクリックします。クエリが返されます。たとえば、Gemini は次のようなクエリを返します。

query ListReviewsByGenreAndRating($genre: String, $minRating: Int, $maxRating: Int) @auth(level: PUBLIC) {
  reviews(where: {
    movie: {
      genre: {eq: $genre}
    },
    rating: {ge: $minRating, le: $maxRating}
  }) {
    id
    user {
      username
    }
    movie {
      title
      genre
    }
    rating
    reviewText
    reviewDate
  }
}

出力を確認します。必要に応じて、[編集] をクリックしてプロンプトを絞り込み、[再生成] をクリックします。
次に、[挿入] をクリックして、ミューテーションをデータエディタに挿入します。
このクエリをテストするには、変数を追加する必要があります。[パラメータ] セクションで [変数] を開き、テストに使用する変数を含めます。
```
{"genre":"sci-fi", "minRating":4, "maxRating":9}
```
[実行] をクリックします。

サードパーティの AI アシスタントツール用のプロンプトを設計する

すべての AI アシスタントツールと同様に、プロンプトを改善すると、より有用な出力が得られます。

Gemini in Firebase に自然言語プロンプトを指定すると、アシスタントは入力内容をより完全に開発されたプロンプトに変換します。

Cursor や Windsurf などのサードパーティの AI ツールを使用している場合は、同様のより詳細なプロンプトを使用することで、より良いData Connect推奨事項を得ることができます。

ダウンロード、調整、IDE へのコピーが可能なプロンプトテンプレートを公開しました。

スキーマ生成用のテンプレートプロンプト
オペレーション生成用のテンプレートプロンプト

ダウンロードして変更したら、次のように使い慣れたツール（Cursor や Windsurf など）でプロンプトを作成します。

Cursor の場合（Cursor の最新の手順をご確認ください）:
1. 右上の設定アイコンをクリックします。
2. [ルール] タブを選択します。
3. [プロジェクトルール] で、[新しいルールを追加] ボタンをクリックします。
4. ルールをコピーして貼り付けます。
Windsurf の場合（Windsurf の最新の手順をご確認ください）:
1. 右上の [Cascade] ボタンをクリックして、[Cascade] ウィンドウを開きます。
2. Cascade の右上のスライダーメニューで [カスタマイズ] アイコンをクリックし、[ルール] パネルに移動します。
3. [+ グローバル] ボタンまたは [+ ワークスペース] ボタンをクリックして、グローバルレベルまたはワークスペースレベルで新しいルールを作成します。
4. ルールをコピーして貼り付けます。

トラブルシューティングAI assistance for Data Connect

Gemini in Firebase のトラブルシューティングをご覧ください。

料金

AI assistance for Data Connect は Gemini in Firebase の一部として提供されており、個人ユーザーは無料で利用できます。

詳細については、Gemini in Firebase の料金をご覧ください。

次のステップ

スキーマ、クエリ、ミューテーションについて詳しく学習する。
Gemini in Firebase について詳しく学習する。