はじめに

現在作成中の個人開発アプリにおいて、Gemini APIを使ってAIへ質問を投げかけてその回答を表示させるという実装項目があります。

Gemini APIをはじめとした生成AIチャットツールをReactアプリに組み込むのは今回が初めてであり、詰まった部分が多かったので備忘録代わりとして記事にします。

初期設定

Gemini APIを組み込む準備としてAPIキーの取得、Google Gen AI SDKのインストール、環境変数の設定が必要になります。

具体的な手順については下記の公式ドキュメントをご覧ください。

Gemini API公式に記載のある以下のコードをReact上に実装したら初期準備は完了です。

sample.tsx

import { GoogleGenAI } from "@google/genai";

const ai = new GoogleGenAI({ apiKey: "YOUR_API_KEY" });

async function main() {
  const response = await ai.models.generateContent({
  // modelの部分はGeminiのバージョンのためプロジェクトに応じて変更する
    model: "gemini-2.5-flash",
  // 訳：「AIの仕組みを数語で説明してください」
    contents: "Explain how AI works in a few words",
  });
  console.log(response.text);
}

main();

出典：https://ai.google.dev/gemini-api/docs/api-key?hl=ja

上記の例でいうとcontents: "Explain how AI works in a few words",にあたる部分がプロンプトの内容です。

出力されるlogを見てみると

AI learns from data to make predictions or decisions.
// 訳：「AIはデータから学習することで予測や意思決定を行います」

こののように、あらかじめ用意したプロンプトに応じた回答が出力されています。

任意のプロンプトを作る

任意のプロンプトを作成するためには、

プロンプトに定数を設定する
設定する定数にはテンプレート文字列を使う
という方法を使います。

先ほどの例を参照すると以下のようなイメージです。
定数promptにあたる部分がプロンプトの内容です。

sample2.tsx

import { GoogleGenAI } from "@google/genai";

const [sampleText, setSampleText] = useState<string>("");

const ai = new GoogleGenAI({ apiKey: "YOUR_API_KEY" });

async function main() {
  const response = await ai.models.generateContent({

    const prompt =`
    ここに実行したいプロンプトをテンプレート文字列記載します。
    React内の変数をプロンプトに組み込みたい場合は${sampleText}のように記載してください
    `
  
    model: "gemini-2.5-flash",
    contents: "Explain how AI works in a few words",
  });
  console.log(response.text);
}

main();

このように記載することでJavaScript/Reactで生成した変数やオブジェクトの値をGeminiのプロンプトとして使うことができます。

AIの出力結果を表示する

AIが出力した回答のテキストを表示・参照したい場合は、公式ドキュメントにあるようにresponse.textの値を参照します。
stateの値として使いたい場合は適宜setState関数を使って対応してください。

response.textの型はstring型として定義されるためuseStateを使いたい場合もstring型を定義してあげればOKです。

ただし、そのままだとstring | undefined型扱いとなりTSエラーが発生してしまいます。
!を使うなどして明示的にundefinedでないことを示してください。

sample3.tsx

const [text, setText] = useState<string>("");

async function main() {
    const prompt = await `
    (ここに任意のプロンプトが入ります)
    `;
    const response = await ai.models.generateContent({
      model: "gemini-2.0-flash",
      contents: "Explain how AI works in a few words",
    });
    
    await setText(response.text);
}
main();

注意してほしい(自分も何度かハマった)部分としては、
AIの出力結果を見たい場合、response.textを参照するのでありresponseではないということです。

responseのみを参照すると出力結果は[object object]となり意図したように出力されません。

最後に

Gemini APIは非常に使いこなせれば非常に便利である一方、最初の導入は慣れていないと時間がかかる部分です(自分はそうでした)。
この記事がGemini導入時の参考になれば幸いです。

参考資料