1. この記事で得られること
- Vue3, LangGraph, FastAPI を使って、Agentic RAG チャットボットの全体アーキテクチャと実装手順がわかる。
- 検索・計画・実行を自律的に繰り返す Agentic RAG の仕組みと特徴を理解できる。
- サンプルコードを参照しながら、自分のプロジェクトに応用する際のポイントがつかめる。
2. 背景
ユーザーの問い合わせに対して Web 検索や RAG を用いた社内情報検索が行えるチャットボットを開発したところ、単なる一問一答に留まってしまい、十分な対応力を発揮できませんでした。そこで LangGraph を活用し、検索結果をもとに追加調査や分析、さらには報告書の自動生成まで実行可能な Agentic RAG 技術を組み込んだ AI エージェントを試作してみました。
Agentic RAG について
Retrieval Augmented Generation（RAG）を利用すると社内に限定された情報をもとに LLM が回答をすることが可能となります。しかし、静的なワークフローに縛られ、多段階推論や複雑なタスク管理に必要な適応性を欠いています。従来の静的な RAG が固定ワークフローや限定的推論能力に課題を抱えるのに対し、Agentic RAG は自律エージェントによる動的・反復的な検索戦略とツール連携で複雑タスクにも適応します。
詳細は Agentic Retrieval-Augmented Generation: A Survey on Agentic RAG を参照してください。
3. 作成したチャットボットの概要
- 社内情報を効果的に活用し、柔軟な思考が可能な Agentic RAG チャットボットです。LangGraph を基盤とした AI Agent が自律的に作業計画やタスクを立案し、Web 検索や Vector DB を用いた RAG により最適な回答を提供します。従来の一問一答にとどまらず、回答後も会話や追加分析が継続できる点が特徴です。RAG は Web 検索のように、Agent が呼び出すツールのひとつとして位置付けられます。
- Plan & Execution の Agent パターンも導入しており、Agent が自ら検索計画を作成して適切な検索ツールを実行します。それにより、多角的かつ体系的に情報を収集して回答することができます。
4. 画面イメージ
左側がチャットボットです。右側には AI Agent の思考プロセスがリアルタイムに表示されます。
※ 日本語モードに切り替えると日本語で使用できます。
5. チャットボットの特徴
- 動作を LLM 任せにすると収束しないことがあるため、計画のステータスを厳格に管理します。確実に収束するよう、計画数の最大値も設定します。
- AI Message や Tool Message の中から必要なメッセージだけを抽出して利用します。Agent が参照するメッセージを最小限に抑えることで、コストを削減できます。
- Plan & Execute パターンを導入して計画を作成することで、多面的かつ体系的に情報を収集できます。
- 複数の内容を含む複雑な依頼にも対応可能で、回答が構造的になります。
例：A 社の技術情報収集 → B 社の技術情報収集 → A・B 社の技術情報の比較 - LangGraph を使用しています。複雑なフローを構築できるため、細かい要件に合わせたカスタマイズが可能です。
- arxiv にある論文を検索するツールを Tool calling function の一つとして登録しています。ユーザーの依頼を基に Agent が arxiv 用の検索クエリーを作成して検索を行います。
- Agent の思考過程、回答がストリーミングにより表示されます。
- 回答が Markdown により見やすい形式で表示されます。
6. Graph Flow
以下は LangGraph を使用して作成された Agent の Graph です。ユーザーからの質問・依頼を基に、「ユーザーに不明点を確認するのか」、「LLM 自身が直接回答するのか」、「検索を使用して調査を行うのか」を判断します。
-
ユーザーに質問 (依頼内容に不明点がある場合) [ask_human]
-
LLM 自身が回答 [ans_llm_solo]
-
検索
- 計画作成 (複数可) [create_plan]
- 計画を基にツールを呼び出す（ツール：Tavily search Web 検索、RAG、Arxiv 論文検索、LLM 自身の回答）[select_tool]
- 回答が得られなければ計画を再作成 [create_revised_plan]
- 最終回答の作成 [create_final_answer]
7. ソースコード
ソースコードはフロントエンド用、バックエンド用の 2 つに分かれています。
フロントエンドのコード(GitHub)
ガイド: README_ja.md に従ってセットアップを行ってください。
バックエンドのコード(GitHub)
ガイド: README_ja.md に従ってセットアップを行ってください。
Discussion