langchain-ai/agent-chat-ui

これは何？

主な機能

• 01messagesキーを持つPythonまたはTypeScript製の任意のLangGraphサーバーとチャットできます。
• 02画面上のセットアップフォームまたは環境変数で設定できます。
• 03ストリーミング中または恒久的に、メッセージを画面上で非表示にできます。
• 04チャットの横にあるサイドパネルにアーティファクトを表示します。
• 05LangSmith APIキーをサーバー側に保持するAPIパススルールートを備えています。

ユースケース

• 開発中に、既製のチャットUIからLangGraphエージェントをテストする。
• 社内のLangGraphエージェント向けに、チームで使えるブラウザ用フロントエンドを用意する。
• 動作するNext.jsのサンプルをフォークして、独自のチャットUIを作り始める。

クイックスタート

1. 1

   npxコマンドでプロジェクトを作成します

   npx create-agent-chat-app
2. 2

   pnpmで依存関係をインストールします

   pnpm install
3. 3

   アプリを実行して http://localhost:3000 を開きます

   pnpm dev

使う前に知っておきたいこと

• !デプロイ済みのLangGraphサーバーに接続するには、LangSmith APIキーが必要です。
• !READMEには、APIパススルーの設定では呼び出し元が認証されないため、デプロイ前にセキュリティ対策が必要だと記載されています。

トピック

よくある質問

agent-chat-ui とは？

PythonまたはTypeScriptで動作し、messagesキーを公開する任意のLangGraphサーバーと対話できるNext.jsチャットUI。 Agent Chat UIは、LangGraphサーバーに接続し、そこでホストされているエージェントとチャットできるNext.js製のWebアプリです。デプロイURLとassistantまたはgraphのIDを指定すると、メッセージを送信し、ストリーミングされる応答をチャット画面に表示します。グラフがmessagesキーを使用していれば、Python製とTypeScript製のどちらのLangGraphサーバーにも対応します。

agent-chat-ui は無料で使えますか？ライセンスは？

agent-chat-ui は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

agent-chat-ui は今もメンテナンスされていますか？

活発にメンテナンス中。agent-chat-ui の最終コミットは 2026年10月19日 です。

agent-chat-ui は何に使えますか？

開発中に、既製のチャットUIからLangGraphエージェントをテストする。 社内のLangGraphエージェント向けに、チームで使えるブラウザ用フロントエンドを用意する。 動作するNext.jsのサンプルをフォークして、独自のチャットUIを作り始める。

agent-chat-ui のインストール方法は？

npxコマンドでプロジェクトを作成します: npx create-agent-chat-app pnpmで依存関係をインストールします: pnpm install アプリを実行して http://localhost:3000 を開きます: pnpm dev

agent-chat-ui はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/langchain-ai/agent-chat-ui