Gemini API × Reactで簡単なチャットボット的なアプリを作ってみました。
目次
Reactアプリの環境構築をする
create-react-appでReactのアプリの環境を構築します。typescriptを利用できるように–templateでtypescriptを指定します。
1 | $ npx create-react-app gemini-chat-bot --template typescript |
Gemini APIを利用する際に必要なaxiosのライブラリをインストールしておきます。
1 | $ npm install axios |
Gemini APIからAPI Keyを発行する
Google AI Studio | Gemini API | Google for Developers | Google AI for Developers
Google AI Studioにログインし、「Create API Key」からAPI Keyを取得します。Keyは一度のみ表示されるので、コピーして保存しておきましょう。
Keyを保存したら、.envファイルを作成し以下のように環境変数を設定します。
creare-react-appで作ったプロジェクトはprocess.env.REACT_APP_から始まる変数を読み込みができるようになっています。
1 | REACT_APP_GEMINI_API_KEY=key名 |
Gemini APIの疎通確認
実際にGemini APIとの疎通ができるか確認してみます。POSTする内容はGoogle AI StudioにあるAPI keyの下のcurlコマンドを参考します。
URLのkeyのところは先ほど設定した環境変数であるprocess.env.REACT_APP_GEMINI_API_KEYを指定します。まずは疎通確認のため、送信するテキストを「こんにちは」に固定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | const response = await axios.post( `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${process.env.REACT_APP_GEMINI_API_KEY}`, { contents:[ { parts:[ { text: "こんにちは" } ] } ] }, { headers: { "Content-Type": "application/json" } } ); |
これで実行して、コンソールにレスポンスのデータを表示するようにすると以下のように「こんにちは」に対しての回答が格納されていることがわかります。
テキストを入力したらGemini APIを通して返ってくるようにする
現状だと、「こんにちは」の固定文字になっているため、ユーザーが入力したテキストを送れるようにします。
HTMLにinputタグを追加し、onChangeで入力したらinputTextに値を格納するようにします。その流れで処理を実行している間はisLoading変数をtrueにして「現在、問い合わせ中です…」という文言を表示するようにしました。
また、react-markdownライブラリをインストールして、レスポンスデータをHTMLに変換して、表示するようにしました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | import axios from "axios"; import { useState } from "react"; import ReactMarkdown from "react-markdown"; import styles from "./styles.module.css" const Chat = () => { const [responseMessage, setResponseMessage] = useState<string>(""); const [inputText, setInputText] = useState<string>(""); const [isLoading, setIsLoading] = useState<boolean>(false); const sendMessage = async () => { setIsLoading(true); try { const response = await axios.post( `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${process.env.REACT_APP_GEMINI_API_KEY}`, { contents:[ { parts:[ { text: inputText } ] } ] }, { headers: { "Content-Type": "application/json" } } ); const responseContent = response.data.candidates[0].content; const responseParts = responseContent.parts.map((part: { text: string }) => part.text).join("\n"); setResponseMessage(responseParts); setIsLoading(false); } catch (error) { console.error(`Gemini API has error occured: ${error}`); } }; return ( <div> <h1>Gemini Chat Bot</h1> <div> { isLoading ? <p>現在、問い合わせ中です...</p> : null} <ReactMarkdown>{responseMessage}</ReactMarkdown> </div> <div> <input type="input" value={inputText} onChange={(e) => setInputText(e.target.value)} /> <button onClick={sendMessage}>送信</button> </div> </div> ) } export default Chat; |
上記を実装すると、こんな感じになりました。
デザインをあてて完成
最後にデザインを当てます。せっかくなのでGeminiを使ってみました。
GeminiにHTMLのコードを渡して、チャット形式の良い感じのCSSを当ててと聞いて反映させると以下のようになりました。
