Firebase Data Connect のスキーマ、クエリ、ミューテーションに AI アシスタントを使用する

Gemini in Firebase を使用すると、クライアントサイド コードに含めるスキーマ、クエリ、ミューテーションの作成を支援できます。

アプリを説明してデータモデルを要約したり、生成するクエリやミューテーションを自然言語で説明したりすると、Firebase の Gemini が同等の GraphQL を提供します。

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

  • Firebase コンソールで、出力を実行してテストし、スキーマとオペレーションを本番環境にデプロイして、ローカル開発環境に同期します。
  • ローカルでは、Data Connect VS Code 拡張機能で、ローカルの PostgreSQL データベースとエミュレータを使用して Gemini Code Assist を設計、実行、テストします。

クエリとミューテーションの詳細については、Data Connect スキーマ、クエリ、ミューテーションをご覧ください。

AI assistance for Data Connect によるデータの使用方法

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

AI assistance for Data Connectを設定

Data Connect で AI 支援を設定するには、Gemini in Firebase を設定するで説明されているように Gemini in Firebase を有効にして、Gemini in Firebase で GraphQL クエリとミューテーションを生成するに進みます。

Gemini in Firebase を使用して GraphQL スキーマ、クエリ、ミューテーションを生成する

Data Connect の AI アシスタントは、さまざまなコンテキストやワークフローで利用できます。

Firebase コンソールで新しいアプリとその初期スキーマとオペレーションを作成する

新しい Firebase プロジェクトを作成して新しいアプリを開発するように設定すると、Firebase コンソールでスキーマとオペレーションの生成に AI アシスタンスが自動的に提供されます。

この設定フローでは、アプリを説明してから AI アシスタントを使用できます。

  • 完全な Data Connect スキーマを生成します
  • 有用なクエリとミューテーションのコアセットを生成し、クライアント コードと統合できます。

コンソールで作成したこれらのリソースをローカル開発環境に同期して、クライアントとの統合を続行します。

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

Firebase コンソールで実行する新しいクエリとミューテーションを追加する

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

  1. プロジェクトで Data Connect を開き、[サービス] でデータソースを選択します。

  2. [データ] をクリックします。

  3. [GraphQL の作成を支援] pen_spark アイコンをクリックします。

  4. 表示されたテキスト フィールド内で、生成するクエリまたはミューテーションを自然言語で記述し、[生成] をクリックします。

    たとえば、Data Connect (web) Codelab でビルドする」で参照されている映画データソースを使用している場合に、「2022 年の上位 5 本の映画を評価の降順で返す」と尋ねると、次のような結果が返されます。

    query TopMovies2022 {
      movies(where: {releaseYear: {eq: 2022}}, orderBy: [{rating: DESC}], limit: 5) {
        id
        title
        rating
        releaseYear
      }
    }
    
  5. 回答を確認します:

    • 回答が正しいと思われる場合は、[挿入] をクリックして、回答をコードエディタに挿入します。
    • 回答を改善できる場合は、[編集] をクリックしてプロンプトを更新し、[再生成] をクリックします。
  6. 回答を承認したら、必要に応じて [パラメータ] セクションで次の設定を行います。

    • 変数: クエリまたはミューテーションに変数が含まれる場合は、ここで定義します。JSON を使用して定義します(例: {"title":"The Matrix", "releaseYear":"1999"})。
    • 認可: クエリまたはミューテーションを実行する認可コンテキスト(管理者、認可済み、未認可)を選択します。
  7. コードエディタで [実行] をクリックして、結果を確認します。

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

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

ローカル プロトタイピング中に初期スキーマとオペレーションを作成する

Visual Studio Code と Data Connect VS Code 拡張機能を使用すると、ローカル プロトタイピング作業で Gemini Code Assist から AI アシスタントを利用できます。

この拡張機能を使用すると、アプリの説明を入力して、次の操作を行うことができます。Gemini Code Assist

  • 完全な Data Connect スキーマを生成します
  • 有用なクエリとミューテーションのコアセットを生成し、クライアント コードと統合できます。

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

ローカル プロトタイピングで Firebase MCP サーバーを使用する

Firebase CLI で提供される Firebase MCP サーバーを使用すると、AI を活用した開発ツールで Firebase プロジェクトを操作できるようになります。Firebase MCP サーバーは、Cursor、Visual Studio Code Copilot、Windsurf Editor など、MCP クライアントとして機能できる任意の AI アシスタント IDE と連携できます。

MCP サーバーを使用して、スキーマ、クエリ、ミューテーションを生成し、Firebase CLI で一般的なオペレーションを実行するための入力を収集できます。

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

  1. このガイドに沿ってサーバーをインストールします。
  2. dataconnect_generate_schema ツールを呼び出してアプリを説明し、推奨されるスキーマを確認します。
  3. dataconnect_generate_operation ツールを呼び出し、スキーマに対して実行するオペレーションを記述して、推奨されるクエリまたはミューテーションの結果を確認します。

その他の Data Connect ツールについては、MCP サーバーガイドをご覧ください。

その他の AI assistance for Data Connect ユースケース

以降のセクションでは、Gemini に Data Connect を入力するミューテーションの作成を依頼し、そのミューテーションをクエリして結果を確認する例など、ユースケースの例について説明します。

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

このセクションでは、自然言語を使用して、データベースへの入力に使用できるミューテーションの GraphQL を生成する例について説明します。この例では、Firebase Data Connect ドキュメントData Connect(ウェブ)Codelab でビルドする」で使用されている映画データベース スキーマを使用していることを前提としています。

  1. Firebase コンソールData Connect を開きます。

  2. サービスとデータソースを選択し、[データ] タブを開きます。

  3. [GraphQL の作成を支援] pen_spark アイコンをクリックし、表示されたボックスにクエリを入力します。

    Create a movie based on user input.
    
  4. [生成] をクリックします。ミューテーションが返されます。たとえば、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
      })
    }
    
  5. 出力を確認します。必要に応じて、[編集] をクリックしてプロンプトを絞り込み、[再生成] をクリックします。

  6. 次に、[挿入] をクリックして、ミューテーションをデータ エディタに挿入します。

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

    {"title":"My amazing movie", "releaseYear":2024, "genre": "Comedy",
    "rating": 8, "description": "A new movie to test mutations",
    "imageUrl": "", "tags": ["comedy","space travel"]}
    
  8. [実行] をクリックします。

  9. 次に、映画が追加されたことを確認するクエリを作成します。[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
        }
    }
    
  10. クエリを挿入して実行します。追加した映画が [履歴] フィールドに表示されます。

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

このセクションでは、自然言語を使用してクエリの GraphQL を生成する例について説明します。この例では、Firebase Data Connect ドキュメントData Connect(ウェブ)Codelab でビルドする」で使用されている映画データベースを使用していることを前提としています。

  1. Firebase コンソールData Connect を開きます。

  2. サービスとデータソースを選択し、[データ] タブを開きます。

  3. [GraphQL の作成を支援] pen_spark アイコンをクリックし、表示されたボックスにクエリを入力します。

    List all movie reviews, based on user-configurable genre and ratings.
    
  4. [生成] をクリックします。クエリが返されます。たとえば、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
      }
    }
    
  5. 出力を確認します。必要に応じて、[編集] をクリックしてプロンプトを絞り込み、[再生成] をクリックします。

  6. 次に、[挿入] をクリックして、ミューテーションをデータ エディタに挿入します。

  7. このクエリをテストするには、変数が必要です。[パラメータ] セクションで [変数] を開き、テストに使用する変数を含めます。

    {"genre":"sci-fi", "minRating":4, "maxRating":9}
    
  8. [実行] をクリックします。

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

他の AI アシスタンス ツールやエージェントと同様に、プロンプトの質が高いほど、出力の有用性も高まります。

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

Gemini in Firebase や他の Firebase AI アシスタンスを使用しておらず、Cursor や Windsurf などのサードパーティの AI ツールを使用している場合は、同様の詳細なプロンプトを使用することで、Data Connect に関するより適切な推奨事項を取得できます。

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

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

  • Cursor の場合(必ず Cursor の最新の手順をご確認ください):

    1. 右上の設定アイコンをクリックします。
    2. [ルール] タブを選択します。
    3. [Project Rules] で、[Add a new rule] ボタンをクリックします。
    4. ルールをコピーして貼り付けます。
  • Windsurf で(必ず Windsurf の最新の手順を確認してください):

    1. 右上にある [カスケード] ボタンをクリックして、カスケード ウィンドウを開きます。
    2. Cascade の右上のスライダー メニューにある [カスタマイズ] アイコンをクリックし、[ルール] パネルに移動します。
    3. [+ Global] ボタンまたは [+ Workspace] ボタンをクリックして、それぞれグローバル レベルまたはワークスペース レベルで新しいルールを作成します。
    4. ルールをコピーして貼り付けます。

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

Gemini in Firebase のトラブルシューティングを参照してください。

料金

AI assistance for Data Connect は、個人ユーザー向けの Gemini in Firebase の一部として提供されています。

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

次のステップ