Agent Chat UI - Оживляем ваших LangGraph агентов в браузере

Представьте ситуацию: вы увлеченно разрабатываете сложного AI-агента с помощью LangGraph. Пишете код, настраиваете логику, но в какой-то момент сталкиваетесь с тем, что отладка и демонстрация его работы превращаются в настоящий квест. Как понять, что происходит "под капотом"? Как удобно показать коллегам или заказчикам, что ваш агент действительно умён, а не просто выдает текст в консоль?

Знакомая боль, не правда ли? Именно здесь на сцену выходит герой сегодняшнего обзора — Agent Chat UI. Это не просто очередная обертка для чата, а продуманный инструмент, который превращает взаимодействие с вашими LangGraph агентами в интуитивно понятный и визуально приятный процесс.

Что это за зверь и кому он пригодится?

Agent Chat UI — это Next.js приложение, созданное командой LangChain. Его основная задача — предоставить красивый и функциональный чат-интерфейс для любого LangGraph сервера, который возвращает сообщения в стандартном формате. Проще говоря, если вы создали своего AI-агента с помощью LangGraph (будь то на Python или TypeScript), Agent Chat UI позволит вам "общаться" с ним в браузере, как с обычным чат-ботом.

Кому это будет полезно?

• Разработчикам LangGraph: Отладка, тестирование, быстрое прототипирование — вот где Agent Chat UI раскрывается на полную. Вы сразу видите, как агент обрабатывает запросы.
• AI-инженерам: Для демонстрации работы своих агентов, создания MVP или даже как часть конечного продукта.
• Всем, кто хочет визуализировать работу сложных AI-систем: Если ваш агент выполняет несколько шагов или взаимодействует с внешними инструментами, этот UI поможет понять его "мыслительный процесс".

Ключевые возможности: От разработки до продакшена

Agent Chat UI не просто позволяет отправлять сообщения. Он предлагает целый набор функций, которые значительно упрощают работу с AI-агентами.

1. Мгновенное подключение и настройка

Начать работу с Agent Chat UI проще простого. Вы можете развернуть его локально или использовать уже готовый деплой на agentchat.vercel.app. Вам нужно лишь указать URL вашего LangGraph сервера, ID ассистента/графа и, при необходимости, LangSmith API Key. Все это можно сделать прямо в UI или заранее настроить через переменные окружения.

npx create-agent-chat-app
# или
git clone https://github.com/langchain-ai/agent-chat-ui.git
cd agent-chat-ui
pnpm install
pnpm dev

После запуска приложение будет доступно по адресу http://localhost:3000. В браузере вы увидите форму, где можно ввести данные для подключения. А если хотите пропустить этот шаг, просто настройте .env:

NEXT_PUBLIC_API_URL=http://localhost:2024
NEXT_PUBLIC_ASSISTANT_ID=agent

Это очень удобно для быстрой отладки или если вы хотите встроить UI в свой dev-окружение.

2. Полный контроль над видимостью сообщений

Не все, что говорит ваш агент, должно быть показано пользователю. Иногда это промежуточные шаги, внутренние рассуждения или просто технические детали. Agent Chat UI дает вам гибкие инструменты для управления тем, что видит пользователь.

• Отключение стриминга: Если вы не хотите, чтобы сообщения отображались в реальном времени по мере генерации LLM, достаточно добавить тег langsmith:nostream в конфигурацию модели. Сообщение появится только после полной генерации.

  from langchain_anthropic import ChatAnthropic
  
  model = ChatAnthropic().with_config(
      config={"tags": ["langsmith:nostream"]}
  )
  

• Полное скрытие сообщений: Для случаев, когда сообщение вообще не должно появляться в чате, вы можете добавить тег langsmith:do-not-render к модели и префикс do-not-render- к id сообщения перед сохранением его в состояние графа. Это гарантирует, что сообщение никогда не будет показано.

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

Это незаменимо для создания чистых и понятных пользовательских интерфейсов, где отладочная информация не мешает восприятию.

3. Рендеринг артефактов: Больше, чем просто текст

Обычный чат хорош, но что, если ваш агент генерирует не только текст, но и, например, графики, таблицы, изображения или другие структурированные данные? Agent Chat UI умеет рендерить "артефакты" в специальной боковой панели. Это позволяет вашему агенту быть не просто текстовым генератором, а полноценным помощником, способным представлять информацию в удобном формате.

Представьте, что ваш агент анализирует данные и строит диаграмму. Вместо того чтобы описывать ее текстом, он может передать данные, которые UI визуализирует в отдельном окне.

Пример использования useArtifact хука:

export function useArtifact<TContext = Record<string, unknown>>() {
  type Component = (props: {
    children: React.ReactNode;
    title?: React.ReactNode;
  }) => React.ReactNode;

  type Context = TContext | undefined;

  type Bag = {
    open: boolean;
    setOpen: (value: boolean | ((prev: boolean) => boolean)) => void;

    context: Context;
    setContext: (value: Context | ((prev: Context) => Context)) => void;
  };

  const thread = useStreamContext<
    { messages: Message[]; ui: UIMessage[] },
    { MetaType: { artifact: [Component, Bag] } }
  >();

  return thread.meta?.artifact;
}

После чего вы можете рендерить дополнительный контент, используя компонент Artifact из хука useArtifact:

import { useArtifact } from "../utils/use-artifact";
import { LoaderIcon } from "lucide-react";

export function Writer(props: {
  title?: string;
  content?: string;
  description?: string;
}) {
  const [Artifact, { open, setOpen }] = useArtifact();

  return (
    <>
      <div
        onClick={() => setOpen(!open)}
        className="cursor-pointer rounded-lg border p-4"
      >
        <p className="font-medium">{props.title}</p>
        <p className="text-sm text-gray-500">{props.description}</p>
      </div>

      <Artifact title={props.title}>
        <p className="p-4 whitespace-pre-wrap">{props.content}</p>
      </Artifact>
    </>
  );
}

Это открывает огромные возможности для создания интерактивных и информативных AI-приложений.

4. Готовность к продакшену: Масштабируем без проблем

Когда ваш агент готов выйти за пределы локальной машины, Agent Chat UI предлагает два основных способа подготовки к продакшену, решая вопросы аутентификации и прямого доступа к API.

• API Passthrough: Самый быстрый способ — использовать пакет langgraph-nextjs-api-passthrough. Он позволяет проксировать запросы к вашему LangGraph серверу, беря на себя аутентификацию. Это избавляет конечных пользователей от необходимости иметь свой LangSmith API ключ.

  NEXT_PUBLIC_ASSISTANT_ID="agent"
  LANGGRAPH_API_URL="https://my-agent.default.us.langgraph.app" # URL вашего LangGraph сервера
  NEXT_PUBLIC_API_URL="https://my-website.com/api" # URL вашего сайта + "/api"
  LANGSMITH_API_KEY="lsv2_..." # Ваш LangSmith API ключ (только на сервере)
  

• Custom Authentication: Для более сложных сценариев и тонкой настройки контроля доступа предусмотрена возможность использования собственной системы аутентификации. Это позволяет делать запросы напрямую с клиента, но с вашими токенами, а также реализовать гранулярные права доступа.

  const streamValue = useTypedStream({
    apiUrl: process.env.NEXT_PUBLIC_API_URL,
    assistantId: process.env.NEXT_PUBLIC_ASSISTANT_ID,
    defaultHeaders: {
      Authentication: `Bearer ${addYourTokenHere}`, // Здесь ваш токен
    },
  });
  

Такой подход дает уверенность, что ваш чат-интерфейс будет стабильно работать и в условиях высокой нагрузки, и с учетом всех требований безопасности.

Архитектура и технологии

Agent Chat UI построен на Next.js, что обеспечивает высокую производительность, отличную SEO-оптимизацию (хотя для чата это не так критично, но приятно) и удобство разработки. В основе взаимодействия лежит концепция подключения к любому LangGraph серверу. Это делает UI универсальным и не привязанным к конкретной реализации агента, если он соблюдает интерфейс messages.

Практическое применение: Где это может пригодиться?

• Образовательные платформы: Создание интерактивных уроков, где студенты могут общаться с AI-наставником.
• Поддержка клиентов: Разработка умных чат-ботов, которые могут не только отвечать на вопросы, но и визуализировать решения или предоставлять структурированную информацию.
• Внутренние инструменты компаний: Помощники для сотрудников, которые могут извлекать данные из корпоративных систем и представлять их в удобном виде.
• Игровые AI: Создание интерактивных персонажей, с которыми можно вести диалог.

В моей практике, когда дело доходит до демонстрации работы сложного агента, часто возникают проблемы с наглядностью. Agent Chat UI решает эту проблему, предоставляя "окно" в мир работы вашего ИИ.

Выводы: Стоит ли попробовать?

Безусловно, да! Если вы работаете с LangGraph и хотите иметь удобный, настраиваемый и готовый к продакшену чат-интерфейс для своих AI-агентов, Agent Chat UI — это то, что вам нужно. Он значительно упрощает отладку, тестирование и демонстрацию ваших проектов.

Это отличный пример того, как правильный UI может сделать сложную технологию доступной и понятной. Проект активный, поддерживается командой LangChain, что гарантирует его актуальность и развитие.

Попробуйте развернуть его сегодня, подключите своего агента, и вы увидите, как просто и приятно может быть взаимодействие с искусственным интеллектом!