agent-chat-ui: LangGraph サーバーとやり取りするための Next.js チャットインターフェース

agent-chat-ui: LangGraph サーバーとやり取りするための Next.js チャットインターフェース

何が解決されるか

これは、LangGraph サーバーとやり取りするためのすぐに使えるチャットインターフェースを提供します。これにより、LangGraph で構築された AI エージェントをデプロイまたはテストしたいときに、開発者がゼロからカスタムフロントエンドを構築する必要がなくなります。

動作の仕組み

Next.js アプリケーションとして構築されたこの UI は、デプロイメント URL、アシスタントまたはグラフ ID、および認証(LangSmith API キーまたはカスタム認証経由)を使用して LangGraph サーバーに接続します。ユーザーとサーバー間の通信を処理し、LLM のレスポンスのライブストリーミングと、サイドパネルに表示される特別なコンテンツである「artifacts」のレンダリングをサポートします。

対象者

LangGraph を使って AI エージェントを構築し、フロントエンド開発に時間を費やすことなく、エージェントのためのプロフェッショナルなチャットインターフェースが必要な開発者。

ハイライト

  • クイックデプロイメント: npx create-agent-chat-app を使って起動できるか、ホストされたデモとして利用できます。
  • メッセージコントロール: 開発者は、langsmith:nostream などのタグを使用したり、ID のプレフィックスに do-not-render- を付けることで、ユーザーに特定のメッセージを表示しないようにできます。
  • アーティファクトサポート: チャットと並べて構造化されたコンテンツ(artifacts)をレンダリングするサイドパネルシステムを含みます。
  • 本番環境対応: セキュアな API キー管理とカスタム認証スキームのための API パススルー プロキシを含む、複数の認証パスをサポートします。

Sources