[React × Typescript]GeminiAPIを使ってチャットbotを作ってみよう！ #TypeScript

はじめに × 雑談

初めましての人もそうじゃない人もこんにちは！

結構前からChatGPTを筆頭に生成AIが流行りはじめましたよね！
多くの企業が生成AIを導入したり個人でもChatGPTのAPIを使った開発が行われたりなど本当に世間の関心がすごいですね！

ハッカソンに出場した時なんか結構多くの人がChatGPTなどの生成AIを使った開発をしてました！かくいう私のチームもChatGPTのAPIを使って開発を行いましたが。。。
ハッカソンも終わり私もいざChatGPTのAPIを使うぞーと思った矢先、なんとChatGPTのAPI利用ってお金がかかるんですね！(間違えていたらすみません！)

はてさて困りました。私は正直個人の趣味開発でお金なんて使いたくありません！

そこで見つけたのがそう！Google社が提供しているGeminiAPIです！
どうやら制限があるみたいですが制限内なら無料で使えるぽいです！

前置きは以上にして今回はケチケチ開発者が作るGeminiAPIを使ったチャットbotを作成したいと思います！

使用PC

M1 Macbook Pro　バージョン14.5

インストール

まずReactをインストールしますフォルダ名はAITalkにさせていただきました！

npx create-react-app AITalk --template typescript
cd AITalk
npm install react-router-dom

次に

npm install @google/generative-ai

をインストールしてGeminiAPIを使えるようにします！

これでインストールは終わりました！
しかし何かアイコンやキャラクターが欲しいとは思いませんか？
そこでキャラクターが映るようにしましょう！
その準備として画像生成AIとかを使って画像ファイルを作ってください！画像形式はjpg・pngなんでもいいです！
私はGithubのデフォルトアイコンにしました！
それを AITalk/src のフォルダの中に入れておいてください！

作ってみよう！

フロント画面

それでは作っていきます！
先ほどインストールしたAITalkフォルダの中身をみてください！
その中にあるsrcフォルダの中のApp.tsxをこのように書き換えてください！

src/App.tsx

// eslint-disable-next-line import/no-duplicates
import { useState } from 'react';
import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
import startGemini from './gemini'; // gemini モジュールをデフォルトエクスポートとしてインポートする
import icon from './aa.png';
import './App.css';

function Hello() {
  const [outputText, setOutputText] = useState('');
  const [userVisible, setUserVisible] = useState(true); // ユーザー入力フィールドとボタンの表示状態を管理

  const handleButtonClick = async () => {
    // Gemini APIを呼び出し、テキストを生成
    const inputTextElement = document.getElementById(
      'inputText',
    ) as HTMLInputElement;
    const inputText = inputTextElement ? inputTextElement.value : '';
    const response = await startGemini(inputText);
    // ボタンをクリックしたら、ユーザー入力フィールドとボタンを非表示にする
    setUserVisible(false);
    // 生成されたテキストをUIに表示
    setOutputText(response);
  };

  return (
    <div>
      <div className="arona">
        {userVisible && (
          <div className="user">
            <input id="inputText" type="text" placeholder="Enter your name" />
            <button type="button" onClick={handleButtonClick}>
              Submit
            </button>
          </div>
        )}
        {outputText}
      </div>
      <div className="Hello">
        <img width="200" alt="icon" src={icon} />
      </div>
      {/* ユーザー入力フィールドとボタンの表示状態に応じて表示するか非表示にする */}
    </div>
  );
}

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Hello />} />
      </Routes>
    </Router>
  );
}

勘のいい方、技術者の方ならもうお分かりいただけたと思いますが私が今回使用したGithubアイコンのファイル名は「aa.png」になっています！(みなさんは真似しないでちゃんと名前をつけよう！)
なのでみなさんがこのコードをコピペしたら5行目の

import icon from './aa.png';

を自分の画像ファイル名に変更してください！！

そして気持ちばかりのcssデザインです！

src/App.css

/*
 * @NOTE: Prepend a `~` to css file paths that are in your node_modules
 *        See https://github.com/webpack-contrib/sass-loader#imports
 */

button {
  background-color: white;
  padding: 10px 20px;
  border-radius: 10px;
  border: none;
  appearance: none;
  font-size: 1.3rem;
  box-shadow: 0px 8px 28px -6px rgba(24, 39, 75, 0.12),
    0px 18px 88px -4px rgba(24, 39, 75, 0.14);
  transition: all ease-in 0.1s;
  cursor: pointer;
  opacity: 0.9;
}

button:hover {
  transform: scale(1.05);
  opacity: 1;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  height: fit-content;
  width: fit-content;
  margin: 10px;
}

a:hover {
  opacity: 1;
  text-decoration: none;
}

.Hello {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}
.arona{
  position: relative;
  width: 500px;
  height: 200px;
  background-color: gray;
  right: -230px;

}
.user{
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Chat処理

先ほどフロント側の画面ができました！
次にGeminiAPIを利用して返信するコードを書いていきます！
新しくgemini.tsファイルをsrcフォルダの中に作成して以下のコードを入れてください！

src/gemini.ts

import { GoogleGenerativeAI } from '@google/generative-ai';

// 環境変数の読み込み
const API_KEY = 'APIキー';

// インスタンスの作成
const genAI = new GoogleGenerativeAI(API_KEY);

// Geminiモデルを使用してテキストを生成するための関数
async function startGemini(prompt: string) {
  // gemini-pro モデルを使用
  const model = genAI.getGenerativeModel({ model: 'gemini-pro' });

  // プロンプトに基づいてテキストを生成
  const result = await model.generateContent(prompt);

  // 生成されたテキストを取得
  const response = await result.response;

  // テキストを抽出
  const text = response.text();

  return text;
}

export default startGemini;

ここでは4行目にある'APIキー'の中に実際のGeminiAPIキーを入れてください！

GeminiAPIキーは
https://aistudio.google.com/app/apikey
から入手することができます！

実行しよう！

ということで完成です！(ぱちぱち👏)
ターミナル上でこのコマンドを使ってください

npm start

これでうまく実行できたはずです！

あとはみなさんの好みに合わせてcssでデザインをいじったりキャラクターを可愛くしたり好きなようにカスタマイズしちゃってください！

最後に

今回はGeminiAPIを使ったチャットボットを作成しました！
いやーやっぱりどの記事もChatGPTのAPIを使ったものが多くて調べるのが大変でしたね(笑)
いや僕の技術不足なだけですねw

本当にGoogleさんには頭が上がりません！無料で優秀なAPIが使えますもん！

個人的にはお金をかけたくないのでGeminiAPIを使った記事が増えることを願って今回はここで終わります！

最後まで読んでいただきありがとうございました。
またどこかの記事でお会いしましょう！

[React × Typescript]GeminiAPIを使ってチャットbotを作ってみよう！