【Gemini 2.5 Flash × React Flow】文章から「構造」を抜き出す解析ツール「Collection Engine」
はじめに
こんにちは。今回は AI を使って文章から人物や用語のつながり（エンティティと関係性）を自動抽出し、インタラクティブに可視化・解析できるツール 「Collection Engine」 を開発したのでご紹介します。
長大な小説のあらすじ整理や、複雑なビジネス環境のネットワーク分析を一瞬で可視化し、AI と共に深掘りできる環境を目指しました。
アプリの概要
「文章を貼り付けて解析ボタンを押すだけ」で、AI が文脈を読み解き、意味のあるネットワークを生成します。
- AIによる深層解析: Gemini 2.5 Flash が実体と、それらの間の多彩な関係性を抽出。
- インテリジェント連鎖選択: グラフ上のノードをクリックすると、関連する「文脈の塊」を一気にフォーカス（強調＋減光）。
- 双方向フィルタリング: グラフでの選択と同期して、関係性リストや解析ログが瞬時に抽出表示されます。
- コンテキストAI検索: 抽出された関係性だけでなく、グラフ構造全体の文脈を AI に渡し、特定の要素について深い洞察を得ることができます。
主な技術スタック
- Frontend: React (Vite), TypeScript, Tailwind CSS
- Graph Engine: @xyflow/react (React Flow)
- Layout: d3-force
- Backend: FastAPI (Python)
- AI: Google Gemini 2.5 Flash
技術的な見どころ
1. Gemini 2.5 Flash による高速・高精度な抽出
プロンプトエンジニアリングを工夫し、一貫した JSON フォーマットで複雑なグラフ構造を抽出しています。
単なる単語の抜き出しではなく、文脈から推測可能な関連性もリンクとして抽出するよう指示を出しており、情報の密度が高いグラフを生成できます。
2. グラフとリストの「双方向インタラクション」
ネットワークグラフ（視覚情報）と詳細リスト（文字情報）の同期が大きな特徴です。
グラフで特定のノードを選択した際、数千件におよぶ可能性のある関係性リストを、React の useMemo で瞬時に関連するものだけにフィルタリングしています。これにより、「グラフで選んで、リストで深く読む」という自然な解析フローを実現しました。
3. D3-force による動的レイアウト
React Flow は自由な配置を可能にしますが、初期配置の自動化が課題です。
本プロジェクトでは、描画直前にバックグラウンドで d3-force シミュレートを走らせ、AI が見つけた複雑な関係性を人間が見やすい形に自動整列させてから表示しています。
使い方
- サイドバーのテキストエリアに解析したい文章を入力。
- 「AI解析を実行」ボタンをポチッ。
- 生成されたグラフ上のノードをクリックし、周辺のつながりを視覚的に確認。
- 選択された状態でリスト（データ詳細タブ）を確認し、必要な情報をピンポイントで閲覧。
- 気になる要素があれば「AI Search」で深掘り！
おわりに
Gemini 2.5 Flash の高速なレスポンスと、React Flow の柔軟な表現力を組み合わせることで、紙のノートでは難しかった「情報の組み替えと探索」が非常にスムーズになりました。
ソースコードも公開していますので、ぜひ自分専用の「思考整理エンジン」にカスタマイズしてみてください！