gemini-2.0-flash

Gemini API を使ったチャットボット

2025年2月15日

はじめに近年、AI の急速な進化により、自然言語処理（NLP）の分野では高性能な生成系モデルが次々と登場しています。Google Generative AI は、その一例として、対話やコンテンツ生成に活用できる先進的なモデルです。この記事では、Google Generative AI を用いてシンプルなチャットボットを構築する方法を、サンプルコードを交えながら解説します。対象は、プログラミング初心者から上級者まで幅広い読者を想定しています。まずは、基本的な構成や仕組みを理解し、次に実際のコードの解説、そして応用的な機能追加やセキュリティ対策について学んでいきます。この記事を読み終える頃には、以下の内容が身につくことを目標とします。１．Google Generative AI の概要 Google Generative AI は、自然言語生成（NLG）をはじめとする高度な生成系タスクに対応する AI モデルです。以下の特徴があります。 Google Generative AI を活用することで、ユーザーからの質問や依頼に対して、柔軟で自然な応答を返すチャットボットを構築することが可能になります。２．システム全体のアーキテクチャここで実装するチャットボットは、シンプルなクライアント・サーバーモデルに基づいています。このような構造により、フロントエンドはシンプルなユーザーインターフェイスを提供し、バックエンドが実際の AI 処理を担う役割分担がなされています。３．サンプルコードの全体像以下は、今回のサンプルコード全体です。まずは全体像を確認し、その後各パートごとに詳細に解説していきます。 GitHub：https://github.com/ar-note/gemini_apiサンプルサイト：https://gemini-api-delta-jade.vercel.appアプリURL：https://gemini-api-delta-jade.vercel.app/api バックエンド（api/index.js）フロントエンド（index.html）このサンプルコードをもとに、バックエンドとフロントエンドの各パートについて詳細に解説していきます。４．バックエンドの実装（api/index.js）バックエンドは、サーバーレス関数として実装され、クライアントからのリクエストを受け付けて Google Generative AI を呼び出す役割を果たします。ここでは主な実装ポイントを解説します。 CORS の設定 Web アプリケーションにおいて、異なるオリジン間でリソースを共有する場合、CORS（クロスオリジンリソースシェアリング）の設定が不可欠です。以下のコードでは、全てのオリジンからのリクエストを受け入れる設定をしています。特にプリフライトリクエスト（OPTIONS メソッド）に対しては、すぐにステータスコード 200 を返すことで、実際のリクエストがスムーズに行われるようにしています。 API キーとプロンプトの受け取りクライアント側からは、ユーザーが入力した API キーとプロンプトが JSON 形式で送信されます。まず、これらの値が正しく存在するかをチェックし、不足している場合は 400 番のエラーを返す処理を実装しています。 Google Generative AI の呼び出し受け取った API キーを用いて、Google Generative AI のインスタンスを生成します。利用するモデル名は 'gemini-2.0-flash' と記述していますが、実際の利用環境に合わせて更新してください。この処理で、ユーザーのプロンプトに応じた生成コンテンツが取得され、そのテキストを JSON 形式でクライアントに返しています。エラーハンドリング try-catch ブロックを利用して、API 呼び出し中にエラーが発生した場合の処理を行っています。エラーメッセージはログに出力し、500 エラーと共にクライアントに返す実装です。５．フロントエンドの実装（index.html）フロントエンドは、シンプルな HTML と JavaScript により構成されています。以下にその主な機能について説明します。 UI の作成とスタイル HTML 内では、ユーザーが API キーとプロンプトを入力できるフォーム、送信ボタン、そして結果表示用の領域が用意されています。CSS により、シンプルかつ使いやすいレイアウトが実現されています。 localStorage を利用した API キーの管理ユーザーの利便性を向上させるため、ブラウザの localStorage を利用して API キーを保存・復元する仕組みを実装しています。これにより、再度ページを読み込んだ際に、以前入力した API キーが自動的に反映されるようになります。 AJAX による API 呼び出し送信ボタンがクリックされると、入力されたプロンプトと […]