Облачная LLM на 16 ГБ VRAM — часть 3: интерфейс в стиле ChatGPT для LangGraph-агентов
Готовый Next.js-проект agent-chat-ui подключается к LangGraph Server через адрес API и идентификатор графа. Без отдельной разработки он поддерживает стриминг ответов, историю диалогов, отображение вызовов инструментов, остановку генерации, загрузку файлов и отладку состояния агента. В доработанной версии интерфейс переведен на русский, дополнен удалением чатов и выбором между генералистом, агентом-диспетчером и узкопрофильным кулинарным экспертом.
Для защиты LangGraph Server используется Bearer-авторизация, однако общий токен из переменной NEXT_PUBLIC_AUTH_TOKEN попадает в браузер и подходит только для демонстрации или локальной разработки. В рабочей схеме запросы направляются через API Passthrough в Next.js: серверный прокси обращается к LangGraph внутри закрытого контура, а секрет не передается клиенту. Полноценный продакшен дополнительно требует отдельных учетных записей, токенов с ограниченным сроком жизни и разграничения прав.
Бэкенд разворачивается через LangGraph CLI и Docker Compose, фронтенд собирается на Next.js и запускается через PM2. Nginx принимает внешний трафик по HTTPS, а файрвол оставляет открытыми только порты 80 и 443; LangGraph API и PostgreSQL остаются недоступны извне. Итоговый стек объединяет локальную LLM через vLLM, MCP-инструменты, несколько LangGraph-агентов и готовый пользовательский интерфейс на собственной инфраструктуре.
Коротко
- Agent Chat UI подключается к LangGraph Server и сразу дает стриминг ответов, историю чатов, вызовы инструментов и загрузку файлов.
- Переключение между несколькими агентами строится вокруг параметра assistantId, который одновременно меняет граф и связанную с ним историю.
- Статический Bearer-токен в NEXT_PUBLIC-переменной виден пользователю и не считается полноценной продакшен-авторизацией.
- В продакшене Next.js проксирует запросы к LangGraph внутри сервера, а наружу через Nginx и UFW доступны только HTTP- и HTTPS-порты.
FAQ
Зачем использовать готовый Agent Chat UI вместо разработки собственного интерфейса для LangGraph-агентов с нуля?
Он быстро превращает агентный API в привычный чат со стримингом, историей и отображением инструментов. Это подходит для прототипов, внутренних сервисов и проверки гипотез.
Почему нельзя считать общий Bearer-токен из NEXT_PUBLIC_AUTH_TOKEN безопасной системой доступа для рабочего сервиса?
Next.js встраивает такую переменную в клиентский код, поэтому токен можно увидеть в браузере. Кроме того, он общий, статичный и не позволяет различать пользователей или отзывать доступ выборочно.
Как закрыть LangGraph API от прямого доступа из интернета при размещении интерфейса на публичном домене?
Браузер должен обращаться к Next.js API Passthrough, а серверный маршрут — проксировать запросы на внутренний адрес LangGraph. Файрвол при этом оставляет наружу только порты 80 и 443.
Читайте также
ИИ-агенты для бизнеса в России: обзор 10 локальных платформ и решений
Сколько железа нужно ИИ-агенту: как считали ресурсы для on-premise LLM и почему калькуляторы ошиблись в 5 раз
Три четверти сотрудников рекламных агентств готовы уйти из-за тендеров
Waze получит несколько новых функций на базе искусственного интеллекта- Как я обучил русский RAG-сплиттер, который режет документы по индексам, а не по тексту
- Agent Chat UI как готовый фронтенд для LangGraph: Официальный проект agent-chat-ui позволяет быстро подключить к LangGraph Server интерфейс на Next.js без самостоятельной реализации стриминга и работы с тредами. Из коробки доступны потоковая выдача ответа, история диалогов, остановка генерации, загрузка файлов, показ вызовов инструментов и отладочная панель.
[Инструменты / AI-интерфейсы]
Зарегистрированные пользователи видят только два тезиса.
Зарегистрироваться
Практическое руководство завершает сборку self-hosted AI-сервиса: к LangGraph-агентам подключают интерфейс в стиле ChatGPT, добавляют переключение между графами, защиту API и деплой с доменом и SSL.