LANGGRAPH AGENT VIEWER GITHUB ↗
PYTHON 標準ライブラリのみ / 追加依存なし

実行中のエージェントを、
1画面で 見る

LangGraph で書いたエージェントが今どのノードを処理していて、 ローカルLLMと何をやり取りしていて、どのSQLを投げたかを、動いている最中に表示します。
サーバーは1ファイル。python viewer/server.py で立ち、ブラウザで開くだけです。

用語 — このページに出てくる名前
LangChainライブラリ群
LLMを使うアプリを組むためのオープンソースのライブラリです。 モデルの呼び出し・プロンプト・資料の検索・ツールの実行といった部品を、 共通の書き方で扱えるようにします。
LangGraphこの系列のエージェント用ライブラリ
処理をノードと矢印のグラフとして書きます。 「まず経路を決める → 資料を引く → SQLを書く → 自己採点する → 足りなければ戻る」を、 分岐とループを持つ図としてコードに書けるのが特徴です。 このリポジトリのエージェントは、この形で書いてあります。
LangChain と同じ開発元が出しているもので、モデルの呼び出しなどは LangChain の部品をそのまま使います。 このリポジトリの名前が LangChainViewer で、画面に映るのが LangGraph のグラフなのは、そのためです。
このビューアが映すもの実行中のグラフ
そのグラフが今どのノードを処理しているか、各ノードがLLMに何を投げて何が返ったか、 どのSQLを実行したかを、走っている最中に画面へ出します。 グラフは書けても、実行中に何が起きているかは通常コードからは見えません。そこを見えるようにするものです。
追加依存 0 サーバーは1ファイル 外部API課金 0円 シナリオ10本を同梱 MIT
動かしてみる → GitHub
01

WHAT YOU SEEノードが点灯し、LLMとの問答が流れる

エージェントを走らせても、ふつうは最後の回答しか出てきません。 途中で経路をどう選んだのか、資料が引けたのか、SQLが通ったのかは表に出ません。 このビューアは、その途中を全部出します。

▶ 動画 / 20秒
同梱のシナリオ10本が自動で順に走ります。 左の一覧は実行中のものにフォーカスが移り、終わると経路と所要時間が入ります。 中央のグラフは実行中のノードが点灯し、右にノードごとのログが秒数つきで流れます。
▶ 動画 / 18秒
LLMに投げたプロンプトと、返ってきた文字列をそのまま出します。 要約せず全文です。同じ内容を logs/ にも JSON Lines で残します。
画面
ノードが点灯している様子
止まったノードも色で分かります。 ここでは英語の更新要求を reject が受けて赤く点灯し、0.57秒で終了しています。 各ノードには割り当てたモデル名と容量も出ます。
02

LAYOUT画面は4分割。境界はドラッグで動く

画面
実況ビューの全体
左上＝シナリオ一覧、中央上＝グラフ、右上＝実行ログ、下段＝回答とLLMとの問答。
シナリオ一覧質問・何を確かめる質問かの説明・結果（経路と秒数）。クリックで1本だけ繰り返す /live?i=3 に切り替わります
グラフLangGraph が出力した構造をそのまま描画。実行中のノードが点灯し、 通らなかった枝は淡いまま残ります
実行ログ経路の判断理由、検索のヒットとスコア、組み立てたSQL、結果行数、 自己採点のスコアと理由。すべて秒数つき
回答とLLM問答下段は左右に分割。左が最終回答、右がLLMとの問答。 境界をドラッグすると比率が変わり、ウィンドウの縦を伸ばせば回答欄も伸びます
更新のしくみServer-Sent Events。ノードが1つ終わるたびにサーバーが1イベント送ります。 ポーリングしません
依存http.server の ThreadingHTTPServer だけ。 JS のライブラリも読み込みません（グラフは CSS で描画）
03

THE AGENT可視化している中身 — 資料を読む経路と、数える経路

ビューアが映しているのは、同梱の LangGraph エージェントです。 plan が経路を決め、retrieve（資料のハイブリッド検索）と query（読み取り専用SQL）を使い、critique が自己採点して足りなければ再検索、 report が出典つきで答えます。

▶ 動画 / 16秒
数える経路。スキーマから読み取りSQLを組み立てて実行します。 SQLと結果が画面に出るので、答えの出どころが追えます。
▶ 動画 / 16秒
資料を読む経路。ベクトル類似度0.7＋語一致0.3のハイブリッド検索。 ベクトルDBは立てず .npz 1本です。出典はファイル名と節番号で返します。
画面
集計の実行画面
経路の判断理由 → 検索のヒットとスコア → 組み立てたSQL → 結果 → 自己採点、の順に並びます。
画面
資料検索の回答
回答は【結論】【根拠】【不足】【出典】の4節固定。 答えられなかったことを書く欄を設けています。
画面
GROUP BY の集計
GROUP BY で集計して上位を返したところ。結果は50行以内に収めます。
04

SAFETY GATE止めた要求も、なぜ止めたかが見える

読み取り専用の照会エージェントなので、データを書き換える要求と 個人情報を出せという要求は通しません。3層で止めています。 入力の遮断 → 行動の分類による許可制 → 出力の検査。 質問を count describe lookup mutate export_pii に分類し、前の3つだけ通します。ビューアはこの分類結果と理由も画面に出します。

▶ 動画 / 14秒
個人情報の要求は計画段階で止まります。 reject が点灯し、SQLは1文も組み立てません。
▶ 動画 / 12秒
SELECT * も止めます。 個人を特定しうる列がまとめて出るためで、SQLガードで弾いています。
画面
安全ゲートの動作
分類に使った指示文と、モデルが返した判定理由がそのまま出ます。 「言い回しではなく、実行されたら何が起きるかで選べ」と指示しているため、 「使わなくなったデータを片付けたいのですが」も mutate と判定されます。
▶ 動画 / 14秒
無い列は、近い列で代用しません。「世帯年収」を聞かれても予算列を使わず、 「その指標は保持していない」と答えます。代用されると、返ってきた数値からは間違いだと分かりません。
画面
全列の要求を拒否
英語の要求も同じ扱いです。第1層の正規表現には語を足さず、 判断はモデルの行動分類に委ねています。
05

RUN IT手元で動かす

必要なのは Python 3.12 以上と Ollama だけです。 サンプルデータはリポジトリの中のスクリプトが生成するので、用意するものはありません。

ollama pull qwen2.5:7b && ollama pull nomic-embed-text

git clone https://github.com/tobisako/LangChainViewer.git
cd LangChainViewer
python3 -m venv .venv-langgraph
.venv-langgraph/bin/pip install -r requirements-langgraph.txt

python3 tools/make_sample_data.py                  # サンプルデータを生成
.venv-langgraph/bin/python tools/build_index.py    # 資料の索引を作る
.venv-langgraph/bin/python viewer/server.py        # 起動
URL何が見えるか
/live実況。シナリオ10本が自動で順に走ります
/live?i=3シナリオを1本だけ繰り返します
/質問を1つ入れて、経路・SQL・出典・回答をまとめて見ます
画面
結果ビュー
/ の結果ビュー。任意の質問を1つ投げて確認できます。
06

WHAT'S INSIDE同梱しているもの

viewer/このビューア。標準ライブラリのみ、499行
agents/同じ課題の実装3種。LangGraph（498行）／CrewAI（122行）／AutoGen（138行）
shared/3実装で共有する層。データ・索引・検索・SQL実行器とガード・安全実装・評価セット・採点器
tools/サンプルデータ生成（乱数の種を固定）と、資料の索引作成

shared/ を共通にしてあるので、 3つの実装を同じ条件で走らせて比べられます。run_bench.py で結果がCSVに出ます。 ノードごとに割り当てるモデルも、環境変数1つで single / small / large / uncensored に切り替わります。