Журнал «Отинофф»
agent-chat-ui интерфейс для LangGraph агента: ChatGPT-подобный чат с шагами агента и вызовами инструментов

agent-chat-ui: готовый ChatGPT-интерфейс для LangGraph-агента — быстро, но с риском

ИИ-инструменты 30 июня 2026 г.

У вас есть работающий агентный бэкенд на LangGraph с REST API, но показать его пользователям нечем — curl в терминале не подходит, а давать доступ к LangSmith неправильно. LangChain выпустил официальный ответ на эту проблему — проект agent-chat-ui. Это готовый Next.js-интерфейс, который подключается к LangGraph Server, стримит токены, показывает шаги агента и вызовы инструментов в реальном времени. По духу — тот же ChatGPT, только на вашей инфраструктуре и под вашим контролем.

Источник: Habr

Для владельца или руководителя команды это означает: вы можете дать пользователям знакомый интерфейс без написания фронтенда с нуля. Но перед внедрением стоит разобраться в архитектурных вариантах и вопросах безопасности — от этого зависит, сколько времени вы потратите и какие риски получите.

Проверьте за неделю: какой из трёх подходов к развёртыванию подходит вашему проекту, и не окажется ли ваше API открытым для сети.

Что даёт agent-chat-ui и как он работает

agent-chat-ui — это официальный репозиторий LangChain на GitHub, который представляет собой готовый Next.js-интерфейс для LangGraph Server. Он из коробки умеет:

  • подключаться к LangGraph Server по REST API;
  • стримить токены в реальном времени;
  • показывать шаги агента, вызовы инструментов и «размышления» модели;
  • работать в режиме API Passthrough — все запросы к LangGraph Server идут не напрямую с клиента, а через Next.js API routes на том же сервере.

Схема подключения простая: клонируете репозиторий, прописываете в .env адрес вашего LangGraph Server и имя агента, запускаете. Примерно так же, как в предыдущих частях цикла одной командой получали REST API вокруг графа, здесь одной командой получаете UI вокруг этого API.

Три подхода к развёртыванию: что выбрать

Прежде чем клонировать репозиторий, стоит понять разницу между подходами. От этого зависит объём работы и уровень безопасности.

Первый подход — собственная обёртка. Вы берёте REST API от LangGraph Server, пишете вокруг него обёртку через LangGraph SDK (например, на FastAPI) и поверх неё реализуете фронтенд с нуля. Вы контролируете всё: авторизацию, очереди, ограничения доступа. Ваша FastAPI-обёртка стоит между пользователем и графом.

Второй подход — готовый фронтенд напрямую. Вы подключаете agent-chat-ui к «голому» LangGraph API. Быстро и удобно, но с жёстким условием: API не должен быть доступен из сети. Только изнутри контура. Это не рекомендация — это обязательное требование такой схемы.

Третий подход — гибридный (API Passthrough). agent-chat-ui работает в режиме, когда все запросы к LangGraph Server идут не напрямую с клиента, а через Next.js API routes на том же сервере. Фронтенд смотрит наружу, LangGraph API остаётся внутри контура, LangSmith-ключ инжектируется на сервере и клиент его никогда не видит.

Сравнение подходов: таблица для выбора

Параметр Собственная обёртка Прямое подключение API Passthrough
Время на запуск Недели Часы Дни
Контроль авторизации Полный Нет Через Next.js routes
Безопасность API Высокая Требует изоляции сети Высокая
Необходимость писать бэкенд Да Нет Нет
Риск утечки LangSmith-ключа Нет Есть Нет

Что проверить до внедрения: чек-лист на неделю

  1. Определите, какой подход вам подходит. Если у вас уже есть FastAPI-обёртка — используйте первый вариант. Если хотите минимум кода и готовы изолировать сеть — второй. Если нужен баланс скорости и безопасности — третий.
  2. Проверьте, не открыт ли ваш LangGraph API в сеть. Если да — любой, кто найдёт адрес, сможет вызывать ваши агенты. Для второго подхода это критично.
  3. Убедитесь, что у вас есть LangSmith-ключ. Без него agent-chat-ui не сможет показывать трейсинг и шаги агента.
  4. Проверьте, поддерживает ли ваш LangGraph Server стриминг. Без этого интерфейс не будет показывать токены в реальном времени.
  5. Оцените, нужна ли кастомизация. agent-chat-ui — готовый интерфейс, но если вам нужно изменить внешний вид или добавить свою логику, придётся форкнуть репозиторий.

Что может пойти не так: риски и ограничения

Безопасность API. Если вы выберете второй подход (прямое подключение) и забудете закрыть API от внешней сети, любой сможет вызывать ваших агентов. Это не гипотетическая угроза — в production такие случаи регулярно приводят к утечкам данных и счетам за GPU.

Зависимость от стека. Методология развертывания описана для конкретного стека: Next.js, LangGraph, vLLM. Если у вас другая конфигурация, могут потребоваться адаптации. Например, если вы используете не LangGraph Server, а другой бэкенд, agent-chat-ui не подойдёт.

Стоимость инфраструктуры. agent-chat-ui — это Next.js-приложение, которое нужно где-то хостить. Если вы запускаете его на том же GPU-сервере, где работает модель, убедитесь, что хватит ресурсов. Если на отдельном сервере — добавятся расходы на аренду.

Ограничения кастомизации. agent-chat-ui — готовый продукт. Если вам нужно радикально изменить интерфейс или добавить нестандартную логику, проще написать свой фронтенд.

Что делать на этой неделе

  1. Клонируйте репозиторий agent-chat-ui и запустите локально для теста. Это займёт час.
  2. Проверьте, работает ли стриминг с вашим LangGraph Server.
  3. Решите, какой подход к безопасности вы будете использовать. Если сомневаетесь — выбирайте API Passthrough.
  4. Оцените, нужно ли вам кастомизировать интерфейс. Если да — заложите время на форк и доработку.
  5. Посчитайте стоимость. Если вы планируете production, учтите расходы на хостинг фронтенда и GPU-сервера.

Источники

Дополнительные рекомендации для быстрого старта

Если вы хотите ускорить процесс внедрения, вот несколько практических советов:

  • Используйте Docker для развёртывания. agent-chat-ui можно легко контейнеризировать, что упростит его запуск на любом сервере.
  • Настройте мониторинг. Добавьте логирование запросов и ошибок, чтобы быстро выявлять проблемы в работе интерфейса.
  • Протестируйте нагрузку. Перед запуском в production проверьте, как интерфейс справляется с несколькими одновременными пользователями.

Эти шаги помогут вам избежать типичных проблем и быстрее получить работающий продукт.

Генерация изображения

  • Модель: flux-schnell
  • Провайдер: replicate

Темы журнала

Что почитать дальше

Теги

Андрей Отинов

Рекомендуем