任意の LangGraph エージェントとの相互作用のために Agent Chat UI 経由で事前構築済みチャット UI を使用できます。deployed 版の使用は最も素早く始める方法で、ローカルのグラフと配備されたグラフの両方とやり取りすることを可能にします。
LangGraph : Prebuilt エージェント : ユーザインターフェイス
作成 : クラスキャット・セールスインフォメーション
作成日時 : 06/17/2025
* 本記事は langchain-ai.github.io の以下のページを独自に翻訳した上で、補足説明を加えてまとめ直しています :
* サンプルコードの動作確認はしておりますが、必要な場合には適宜、追加改変しています。
* ご自由にリンクを張って頂いてかまいませんが、sales-info@classcat.com までご一報いただけると嬉しいです。
LangGraph : Get started : Prebuilt エージェント : ユーザインターフェイス
任意の LangGraph エージェントとの相互作用のために Agent Chat UI 経由で事前構築済みチャット UI を使用できます。deployed 版 の使用は最も素早く始める方法で、ローカルのグラフと配備されたグラフの両方とやり取りすることを可能にします。
UI でエージェントを実行する
まず、LangGraph API サーバを ローカルで セットアップするか、エージェントを LangGraph Platform で配備します。
次に、Agent Chat UI に進むか、レポジトリを複製して dev サーバをローカルで実行します :
Tip : UI has out-of-box support for rendering tool calls, and tool result messages. To customize what messages are shown, see the Hiding Messages in the Chat section in the Agent Chat UI documentation.
human-in-the-loop を追加する
Agent Chat UI は human-in-the-loop ワークフローを完全にサポートしています。それを試すには、(deployment ガイドの) src/agent/graph.py のエージェントコードをこの エージェント実装 で置き換えます :
Generative UI
Agent Chat UI の generative UI を使用することもできます。
Generative UI は React コンポーネントを定義し、LangGraph サーバの UI にそれらを配置することを可能にします。For more documentation on building generative UI LangGraph agents, read these docs.
以上