はじめに 生成AIにおいて、最近話題になっているGoogle Gemini Proですが、2024年始めに予定されている一般公開までは試用期間として無料利用できるようです。 ※1分あたり60リクエストまでという制限は付いております。 有料化される前に、APIを叩いて遊んでみようということで、今回はReactで簡単なチャットBOTを作成していこうと思います。 アプリ概要 ユーザーの文字入力に対して、Gemini ProのAPIから応答を得て、回答を表示する 会話の履歴が画面上に残る(※会話の履歴はAIに記憶させておりません) 実装方針 TypeScriptを利用する レイアウトの装飾はemotionによって行う APIと通信するためにaxiosを使用する 回答をマークダウン形式で表示させるためにreact-markdownを使用する Gemini Proの出力はマークダウン形式で返ってくるた
![【React】最強AI「Google Gemini Pro」のAPIを使ってチャットBOTを作成してみた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e01d15f37b8390da6cab7f5635fbd23fbbe316eb/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUUzJTgwJTkwUmVhY3QlRTMlODAlOTElRTYlOUMlODAlRTUlQkMlQjdBSSVFMyU4MCU4Q0dvb2dsZSUyMEdlbWluaSUyMFBybyVFMyU4MCU4RCVFMyU4MSVBRUFQSSVFMyU4MiU5MiVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MyU4MSVFMyU4MyVBMyVFMyU4MyU4MyVFMyU4MyU4OEJPVCVFMyU4MiU5MiVFNCVCRCU5QyVFNiU4OCU5MCVFMyU4MSU5NyVFMyU4MSVBNiVFMyU4MSVCRiVFMyU4MSU5RiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MzE0ZWVkYmE3ZWY0YTNlOWJlZTMzMDUzZGM2MTFhOTM%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwamludG8lMjBpbiUyMEtEREklRTMlODIlQTIlRTMlODIlQjglRTMlODMlQTMlRTMlODIlQTQlRTMlODMlQUIlRTklOTYlOEIlRTclOTklQkElRTMlODIlQkIlRTMlODMlQjMlRTMlODIlQkYlRTMlODMlQkMlRTYlQTAlQUElRTUlQkMlOEYlRTQlQkMlOUElRTclQTQlQkUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTg0MzU0MDQxOWQzZGQ3ODZhNzZmNjNmNTRmZjUyMGU1%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D761ce716812d1d554b360a82a97889b4)