langchain-ai/agent-chat-ui

🦜💬 Web app for interacting with any LangGraph agent (PY & TS) via a chat interface.

Agent Chat UI – これは何ですか

Agent Chat UI は、任意の LangGraph サーバー（LangChain風のエージェントグラフを実行するバックエンド）と会話できる小さな Next.js Webアプリです。UIをLangGraphエンドポイントに接続し、使用したいアシスタント/グラフのIDを指定すると、ユーザーの入力がサーバーに送信され、LLMが生成した返信がストリーミングで戻ってきます。

このプロジェクトは、いくつかの利便性を備えたLangGraphエージェント用のフロントエンドクライアントです：

クイックスタートフォーム（または環境変数のオーバーライド）で、サーバーURL、アシスタントID、およびオプションのLangSmith APIキーを設定できます。
特殊なタグ（langsmith:nostream、langsmith:do-not-render）を使用して、ストリーミングメッセージを非表示にするか、永続的に抑制できます。
アーティファクト（生成されたファイル、可視化など）を表示するサイドパネルを提供するカスタムReactフックを搭載しています。
APIパススループロキシ（サーバーサイドでLangSmithキーを注入）や、より高いセキュリティを求めるカスタム認証を含む、プロダクションデプロイのガイドラインも提供しています。

クイックスタート（ローカル開発）

# 新規プロジェクトを作成する（またはリポジトリをクローン）
npx create-agent-chat-app
# または
git clone https://github.com/langchain-ai/agent-chat-ui.git && cd agent-chat-ui

# デペンデンシーをインストール（pnpmが推奨）
pnpm install

# 開発サーバーを起動
pnpm dev   # → http://localhost:3000

アプリがロードされると、短いフォームが表示されます。以下の項目を入力してください：

デプロイURL – お使いのLangGraphサーバーのHTTPアドレス。
アシスタント/グラフID – 会話したいエージェントの名前またはUUID。
LangSmith APIキー – サーバーがLangSmithキーを必要とする場合（例：組み込みのAgent Builderデプロイを使用する場合）のみ必要です。
Agent Builderで構築されたもの – サーバーがLangSmithのAgent Builderで作成された場合にオンにします。正しい認証スキームが自動的に選択されます。

続行をクリックすると、チャットビューに移行します。

設定フォームをスキップして実行する

3つの環境変数を設定する（または.env.exampleに基づいて.envファイルに追加）ことで、インタラクティブなフォームをスキップできます：

NEXT_PUBLIC_API_URL=http://localhost:2024   # LangGraphエンドポイント
NEXT_PUBLIC_ASSISTANT_ID=agent            # グラフ/アシスタントID
NEXT_PUBLIC_AUTH_SCHEME=                  # 例：Agent Builder用に"langsmith-api-key"

これらの変数が存在すると、UIは即座に接続します。

UIが表示する内容を制御する

ストリーミング出力を非表示にする

チャットモデルの設定にタグ langsmith:nostream を追加します。UIは on_chat_model_stream イベントを監視しており、このタグによりイベントが抑制され、ユーザーは最終的なメッセージのみを表示します。

# Pythonの例
model = ChatAnthropic().with_config({"tags": ["langsmith:nostream"]})

// TypeScriptの例
const model = new ChatAnthropic().withConfig({ tags: ["langsmith:nostream"] })

メッセージを完全に非表示にする

メッセージの id に do-not-render- を前置し、タグ langsmith:do-not-render も追加します。UIは、IDがこのプレフィックスで始まるメッセージをフィルタリングするため、チャットペインにコンテンツが表示されません。

result = model.invoke([messages])
result.id = f"do-not-render-{result.id}"
return {"messages": [result]}

const result = await model.invoke([messages])
result.id = `do-not-render-${result.id}`
return { messages: [result] }

アーティファクトのレンダリング

LangGraphグラフは thread.meta.artifact に追加データを返すことができます。UIは useArtifact というフックを提供し、以下の機能を提供します：

コラプシブルなサイドパネルにコンテンツをレンダリングするReactコンポーネント（Artifact）。
パネルの可視性を制御する状態（open, setOpen）。
保存した任意のデータを含む生の context オブジェクト。

最小限の使用例は以下の通りです：

import { useArtifact } from "../utils/use-artifact"

export function Writer({title, content, description}) {
  const [Artifact, {open, setOpen}] = useArtifact()
  return (
    <>
      <div => setOpen(!open)} className="cursor-pointer rounded-lg border p-4">
        <p className="font-medium">{title}</p>
        <p className="text-sm text-gray-500">{description}</p>
      </div>
      <Artifact title={title}>
        <p className="whitespace-pre-wrap p-4">{content}</p>
      </Artifact>
    </>
  )
}

これにより、生成されたファイル、チャート、またはカスタムUIをチャットと併せて表示できます。

プロダクションデプロイ

公開されたLangGraphエンドポイントにUIを直接接続すると、すべてのユーザーのLangSmithキーが漏洩するリスクがあります。このリポジトリには、そのリスクを回避する2つの推奨方法が含まれています。

1. APIパススルー（最も簡単）

langgraph-nextjs-api-passthrough パッケージをインストール（既にバンドル済み）。
Next.jsアプリをデプロイ（例：Vercel）。組み込みの /api ルートが、LangGraphサーバーへのリクエストをプロキシし、サーバーサイドでLangSmithキーを注入します。

デプロイプラットフォームに以下の環境変数を設定します：

NEXT_PUBLIC_ASSISTANT_ID=agent
LANGGRAPH_API_URL=https://my-agent.default.us.langgraph.app   # お使いのLangGraphデプロイ
NEXT_PUBLIC_API_URL=https://my-website.com/api                # このUI + /api のURL
LANGSMITH_API_KEY=lsv2_…                                      # シークレット、NEXT_PUBLIC_ で始まらない

重要：パススルーは呼び出し元の認証を行いません。独自のゲート（例：Vercelエッジミドルウェア）を追加するか、以下の高度なカスタム認証オプションを使用してください。

2. カスタム認証（より安全）

LangGraphのカスタム認証ドキュメント（PythonまたはTypeScript）に従い、LangGraphサーバーがBearerトークンなどの認証スキームを必要とするように設定します。

UIで useTypedStream（またはその下位の useStream）を変更し、リクエストヘッダーにトークンを添付します：

const streamValue = useTypedStream({
  apiUrl: process.env.NEXT_PUBLIC_API_URL,
  assistantId: process.env.NEXT_PUBLIC_ASSISTANT_ID,
  defaultHeaders: { Authentication: `Bearer ${myToken}` },
  // …その他のオプション
})

これにより、クライアントがLangSmithキーを一切暴露せずに、LangGraphサーバーに直接接続できます。

だれがこのツールを使うべきか？

デモや内部テスト用に即座に使えるチャットUIを必要とする、LangGraphエージェントを開発している開発者。
カスタムUIをゼロから構築せずに、LLM駆動のアシスタントをエンドユーザーに公開したいプロダクトチーム。
ストリーミング制御やアーティファクトレンダリングを実験したい研究者で、フロントエンドコードを最小限に抑えたい人。

TL;DR

git clone または npx create-agent-chat-app → pnpm dev。
UIをLangGraphサーバー（URL + アシスタントID）に接続。オプションでLangSmithキーを提供。
タグ（langsmith:nostream、langsmith:do-not-render）を使ってメッセージを非表示にする。
useArtifactフックを使って追加データをレンダリングする。
プロダクションでは、組み込みのAPIパススルー（シークレットなLangSmithキー付き）または LangGraph側でカスタム認証を設定する。