はじめに
この度、OpenAI API を活用したモダン言語でのチャットボットを開発しました！
このチャットボットは、TypeScript と React を使用して構築されており、マークダウン形式でのリッチテキスト応答をサポートしています。
デザイン等はこちらのQiitaの記事を参考にさせていただいています！
チャットボットの主な機能
•OpenAI API を活用した応答
•複数のGPTモデルに対応（o1-preview,gpt-4o, gpt-4o-mini, gpt-3.5-turbo）
→マウスホバーで各モデルの詳細や単価について表示されます。
•マークダウン形式でのリッチテキスト表示
•レスポンシブデザイン（ウィンドウサイズ切り替え対応）
•リアルタイムのローディング表示
•自動スクロール
これらの機能により、より自然で快適なチャット体験ができるようになっています。
技術スタック
このチャットボットは、以下の技術スタックで開発されています
•TypeScript
•React
•Webpack
•CSS Modules
•Axios
•Marked (マークダウンパーサー)
モダンな言語での開発に挑戦しました！
プロジェクトの構造
プロジェクトのファイル構造は以下の通りです
/
├── dist/ # ビルド出力ディレクトリ
├── docs/ # ドキュメント関連ファイル
│ └── images/ # スクリーンショットなどの画像
├── src/ # ソースコードディレクトリ
│ ├── index.tsx # Reactアプリケーションのエントリーポイント
│ ├── components/ # Reactコンポーネント
│ │ └── Chatbot.tsx # チャットボットメインコンポーネント
│ ├── config/ # 設定ファイル
│ │ └── models.ts # モデル設定
│ └── styles/ # コンポーネント固有のスタイル
│ └── Chatbot.css # チャットボットのスタイル
├── .env.example # 環境変数テンプレート
├── .env # 環境変数（非公開）
├── .gitignore # Git除外設定
├── package.json # プロジェクト設定・依存関係
├── package-lock.json # 依存関係のロックファイル
├── README.md # プロジェクト説明
├── requirements.md # 要件定義
├── tsconfig.json # TypeScript設定
└── webpack.config.js # Webpack設定
AIにチェックしてもらいながら、必要最小限の構成にしています！
UI構成
チャットボットのUIは、以下の要素で構成されています
•ヘッダー: モデル選択、ウィンドウサイズ制御
•メイン: チャット履歴表示（マークダウン対応）
•フッター: メッセージ入力、送信制御
操作性
使いやすさを追求し、以下の操作性を実現しました
•Enterキーでのメッセージ送信
•自動スクロールによる最新メッセージの表示
•ローディング状態の視覚的フィードバック
インストールと起動方法
このチャットボットを試してみたい方は、以下の手順でインストールと起動が可能です
1.リポジトリをクローン
2.依存関係のインストール
3.環境変数の設定
◦.env.example をコピーして .env を作成
◦OpenAI APIキーを設定
4.開発サーバーの起動
5.アプリケーションは http://localhost:8080 で起動します
詳細はGitHubのREADMEを参照してください。
今後の展望
このチャットボットは、今後さらに以下の機能拡張を予定しています
•チャット履歴の永続化
•プロンプトテンプレート機能
•ファイル添付機能
•最新モデルの対応
•モデルの単価などの自動更新機能
ライセンスと貢献
このプロジェクトは ISCライセンス で公開しています。
ぜひ、Webアプリケーションに組み込んでいただけますと幸いです。
セキュリティ
APIキー は .env ファイルで管理し、GitHubにはコミットしないでください。
本番環境では適切な環境変数管理を行ってください。
まとめ
このチャットボットは、OpenAI API の力を借りて、自然で快適なチャット体験ができます
今後も開発を続けて行きます！
コメント