Next.js+Langchainによるチャットボットを作ってみました!

Posted date at 2025-01-03

AI

Next.js

ChatGPT

title.webp

 私が参加しているプログラミング学習コミュニティJISOU渡邊さんのYoutube動画でRAGの仕組みについて学び、ハンズオンで作成したアプリに社内規定を読み込ませてみましたので、簡単に内容と結果を共有します。詳細は渡邊さんのYoutube動画やQuiitaの記事を見てください。

 


🚀アプリケーションとRAGの仕組み

 Youtube動画で詳細を詳しく説明されていますので、こちらではしません。RAGについて知らないor業者の説明資料レベルで止まっている方は是非ご覧になってください。なお、動画だけではなく本件のQuiitaの記事も執筆されています。

 補足で、Udemy講座にもRAGによるアプリケーション開発の講座がありましたので興味のある方はどうぞ。業者が提案してきた製品の仕組みを理解していることは大切だと思います。

 


🚀アプリケーションに行ったこと

🐡読み込ませたデータ

 社内規定のPDFファイル(計41ファイル)※企業型年金規定を除く(画像だったため)。

🐡渡邊さんの動画から自分で実装したこと

 ・PuppeteerによるWebスクレイピングから、PDFLoaderによるPDF文書の読み取りに切り替えた。 

 ・ReactMarkDownを使用してマークダウン形式を変換して表示するようにした(太字、リストなど)。

 ・プロンプトを変更した(社内規定に書いてないことはちゃんと書いてないと回答してなど)。

🐡アプリケーションは以下の「アプリを別タブで開く」から

 現在$4.26です。ご自由に使用していただいてかまいません。※無くなり次第おしまいです。

 


🚀解答の様子

 試しにいくつか質問してみました。たまにハルシネーションに近い回答もしますが、かなり高い精度で正しい回答をしてくれます。

🐡当社の個別の名称で確認

 ドキュメント内に記載のあった社員名を特定できるか試しました(※社内情報のため一部見え消しにしています)。ちゃんと回答してくれています。

0.png

🐡コンテキストにないことへの回答

 読み込んだコンテキストに書かれていないことへの回答もしっかりしてくれています。

1.png

🐡その他の回答

 ドキュメントの読み込み確認のために、いくつか質問してみました。

5.png

3.png

4.png


🚀実運用に向けて

 社内で運用するにあたっては、以下の機能が必要だと考えています。

  • フィードバック機能(AIの回答に満足したかどうかを聞き結果を保存する)。
  • 質問履歴を保存する機能(誰が何を質問して、AIが何を回答したのか)。
  • ドキュメントを更新する機能(アプリの設定画面のボタンクリックで、Googleドライブに保存したデータでDBを更新するなど)。

 


🚀まとめ

 冬休みもあと2日となりました。1日6~9時間ペースで開発と学習をしています。残り2日間やり切りたいと思います。

←ホームに戻る