HTMXとGemini APIを用いたシンプルチャット

概要

• Googleの生成AIであるGeminiのAPIをHTMXを使って作成したシンプルなチャットアプリです。

  

• フロントエンドは、HTML, CSS, 少量のJavaScriptとHTMXを使用。

• バックエンドは、Node.jsのフレームワークの express.jsを使用。

• バックエンドからGeminiのAPIを呼び出しています。

  • 「◯◯だよー。」と言わせるようにしています。
  • マルチターンの会話（チャットなど）を構築するために、gemini-pro モデルを使用し、startChat() を呼び出してチャットを初期化しています。
  • 次に、sendMessage() を使用して新しいユーザー メッセージを送信するようにしています。

• 少量のJavaScriptは、以下のために使っています。これが不要なら、フロントエンドは完全にJavaScriptなしとなるのですが。

  • [送信]ボタンをクリックしたあとのテキストエリアのクリア
  • [送信]ボタンをクリックしたあとのページ下部への自動スクロール
  • テキストエリアでEnterキーを入力したら自動で高さを増やす

• Vercelにデプロイしています。

使用方法

• ChatGPTのように、聴きたいことなどを入力して[送信]ボタンをクリックします。
• 入力欄は最初1行ですが、Enterキーを押すことにより複数行の入力ができます。

環境変数

• Gemini APIを使うためのAPIキーの作成
  • Google Developers ConsoleにGoogleアカウントでサインアップします。既にアカウントを持っている場合は、そのアカウントでログインします。
  • https://aistudio.google.com/app/apikey でAPIキーを作成します。
• .envファイルを作り、APIキーを設定します。

API_KEY=******
PORT=3000

開始方法

• ソースコード一式を取得したら、環境変数を設定したあと、以下のコマンドを実行し、localhost:3000 にアクセスしてください。

% npm install 又は pnpm install
% npm run start

お願い

• 改善提案などありましたら、ぜひお願いいたします。
• Xアカウント
  • https://twitter.com/pitang1965
  • https://twitter.com/shijukarakun