agent-chat-ui: готовый фронтенд для LangGraph-агента

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

Команда разработчиков собрала агентный бэкенд на LangGraph с MCP-серверами, получила REST API через LangGraph SDK и обернула всё в FastAPI-сервис. Инфраструктура работает, но показать её пользователю, привыкшему к ChatGPT, нельзя — curl в терминале не впечатляет, а давать доступ к LangSmith неправильно. Проблема решается проектом agent-chat-ui от LangChain — готовым Next.js-интерфейсом, который подключается к LangGraph Server, стримит токены и показывает шаги агента в реальном времени. Статья из блога Selectel (автор yakvenalex, 27 июня 2026) описывает, как за час получить полноценный UI для агентной системы, работающей на собственном облачном сервере с GPU на 16 ГБ VRAM. Разбираем, какие есть подходы к интеграции, как не допустить утечки API и что проверить до деплоя.

Что изменилось: готовый фронтенд для агентного бэкенда

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

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

Полный цикл теперь выглядит так: инфраструктура → локальная LLM → агентный бэкенд → MCP-инструменты → production-ready фронтенд → деплой. Для команды, которая уже подняла модель на облачном сервере с GPU на 16 ГБ VRAM, разобралась с vLLM и tool calling, собрала агентный бэкенд на LangGraph, это закрывает последний пробел между бэкендом и пользователем.

Почему это меняет стоимость и контроль

До появления agent-chat-ui у команды было два пути: писать фронтенд с нуля под свои нужды или отдавать пользователю доступ к LangSmith. Первый путь — недели разработки и тестирования. Второй — риск утечки данных и неправильного использования инструментов отладки.

agent-chat-ui даёт третий вариант: готовый интерфейс, который можно кастомизировать. Время на запуск — около часа вместо недель. Контроль остаётся у команды: все данные проходят через ваш LangGraph Server, а не через сторонний сервис.

Стоимость владения снижается за счёт того, что не нужно нанимать фронтенд-разработчика для создания базового чат-интерфейса. Команда из двух-трёх backend-инженеров может самостоятельно развернуть production-ready UI.

Три подхода к интеграции: что выбрать под свою задачу

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

Подход Что делает команда Уровень безопасности Время на запуск
Собственная обёртка через LangGraph SDK Пишет FastAPI-сервис между пользователем и графом, реализует авторизацию, очереди, ограничения доступа Высокий — полный контроль Недели
Прямое подключение готового фронтенда Подключает agent-chat-ui напрямую к LangGraph API Низкий — API не должен быть доступен из сети Часы
API Passthrough (гибрид) Запросы идут через Next.js API routes на том же сервере, LangGraph API остаётся внутри контура Средний — ключи не видны клиенту День-два

Первый подход даёт максимальный контроль: ваша FastAPI-обёртка стоит между пользователем и графом, даже если кто-то доберётся до Swagger — без нужных токенов он ничего не сделает. Но требует серьёзных затрат на разработку.

Второй подход — самый быстрый, но с жёстким условием: API не должен быть доступен из сети. Только изнутри контура. Это не рекомендация — это обязательное требование такой схемы.

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

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

Перед тем как запускать agent-chat-ui в production, проверьте пять вещей. Это займёт не больше часа, но предотвратит утечку данных и простой.

1. Доступность LangGraph Server из контура Убедитесь, что LangGraph Server не торчит наружу. Если используете прямое подключение фронтенда — API должен быть доступен только изнутри контура. Проверьте настройки сети и файрвола.

2. Режим API Passthrough Если выбрали гибридный подход, проверьте, что agent-chat-ui настроен на работу через Next.js API routes. LangSmith-ключ должен инжектироваться на сервере, а не передаваться клиенту.

3. Версия LangGraph SDK agent-chat-ui подключается к LangGraph Server через REST API. Убедитесь, что версия LangGraph SDK, которую вы используете, совместима с версией интерфейса. Проверьте документацию LangGraph SDK на langchain-ai.github.io/langgraph.

4. Имя агента в .env В .env файле agent-chat-ui нужно прописать адрес LangGraph Server и имя агента. Ошибка в имени — и интерфейс не увидит граф. Проверьте, что имя совпадает с тем, которое вы указали при сборке агента.

5. Лимиты и очереди agent-chat-ui не управляет очередями запросов. Если к вашему агенту обращаются несколько пользователей одновременно, убедитесь, что LangGraph Server справляется с нагрузкой. Иначе — добавляйте очередь на уровне FastAPI-обёртки.

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

agent-chat-ui — готовый инструмент, но не панацея. Вот что стоит учитывать до внедрения.

Безопасность при прямом подключении. Если подключить фронтенд напрямую к «голому» LangGraph API, API не должен быть доступен из сети. Это обязательное требование, а не рекомендация. Если кто-то получит доступ к LangGraph API, он сможет вызывать ваши агенты без ограничений.

Зависимость от LangChain. agent-chat-ui — официальный проект LangChain. Если LangChain изменит API или прекратит поддержку, интерфейс может перестать работать. Убедитесь, что у вас есть план отката или альтернативный фронтенд.

Отсутствие встроенной авторизации. agent-chat-ui не предоставляет механизмов аутентификации пользователей. Если вам нужно разграничение доступа — придётся добавлять его самостоятельно через FastAPI-обёртку или reverse proxy.

Лицензионные ограничения. agent-chat-ui распространяется под определённой лицензией. Проверьте, что она совместима с вашими коммерческими условиями. Репозиторий на GitHub — github.com/langchain-ai/agent-chat-ui.

Привязка к вендору. Статья опубликована в блоге Selectel — облачного провайдера. Методология рабочая, но учитывайте, что автор использует инфраструктуру Selectel. Для вашего проекта подойдёт любой облачный сервер с GPU на 16 ГБ VRAM.

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

Если ваша команда уже собрала агентный бэкенд на LangGraph, но не имеет фронтенда — вот план действий на неделю.

День 1. Клонируйте репозиторий agent-chat-ui. Настройте .env с адресом LangGraph Server и именем агента. Запустите в тестовом контуре.

День 2. Проверьте, как интерфейс стримит токены и показывает вызовы инструментов. Убедитесь, что все шаги агента отображаются корректно.

День 3. Выберите подход к безопасности. Если команда небольшая и API не торчит наружу — используйте прямое подключение. Если нужен контроль — настройте API Passthrough.

День 4. Проверьте совместимость версий LangGraph SDK и agent-chat-ui. Протестируйте под нагрузкой.

День 5. Примите решение: запускать в production или отложить. Если всё работает стабильно — деплойте. Если есть сомнения по безопасности — добавьте FastAPI-обёртку.

Источники

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

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

Темы журнала

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