月: 2024年5月

Gemini API × Reactで簡単なチャットボット的なアプリを作ってみました。 Reactアプリの環境構築をする create-react-appでReactのアプリの環境を構築します。typescriptを利用できるように--templateでtypescriptを指定します。 [crayon-67169c3f4511a914518827/] Gemini APIを利用する際に必要なaxiosのライブラリをインストールしておきます。 [crayon-67169c3f4511d350422490/] Gemini APIからAPI Keyを発行する https://aistudio.google.com/ Google AI Studioにログインし、「Create API Key」からAPI Keyを取得します。Keyは一度のみ表示されるので、コピーして保存しておきましょう。 Keyを保存したら、.envファイルを作成し以下のように環境変数を設定します。 creare-react-appで作ったプロジェクトはprocess.env.REACT_APP_から始まる変数を読み込みができるようになっています。 [crayon-67169c3f4511e913575379/] Gemini APIの疎通確認 実際にGemini APIとの疎通ができるか確認してみます。POSTする内容はGoogle AI StudioにあるAPI keyの下のcurlコマンドを参考します。 URLのkeyのところは先ほど設定した環境変数であるprocess.env.REACT_APP_GEMINI_API_KEYを指定します。まずは疎通確認のため、送信するテキストを「こんにちは」に固定します。 [crayon-67169c3f45120482678481/] これで実行して、コンソールにレスポンスのデータを表示するようにすると以下のように「こんにちは」に対しての回答が格納されていることがわかります。 テキストを入力したらGemini APIを通して返ってくるようにする 現状だと、「こんにちは」の固定文字になっているため、ユーザーが入力したテキストを送れるようにします。 HTMLにinputタグを追加し、onChangeで入力したらinputTextに値を格納するようにします。その流れで処理を実行している間はisLoading変数をtrueにして「現在、問い合わせ中です...」という文言を表示するようにしました。 また、react-markdownライブラリをインストールして、レスポンスデータをHTMLに変換して、表示するようにしました。 [crayon-67169c3f45121778955072/] 上記を実装すると、こんな感じになりました。 デザインをあてて完成 最後にデザインを当てます。せっかくなのでGeminiを使ってみました。 GeminiにHTMLのコードを渡して、チャット形式の良い感じのCSSを当ててと聞いて反映させると以下のようになりました。

Gemini API × Reactでサクッと簡単なアプリを作ってみた