assistant-ui — открытая React-библиотека для AI-чата уровня ChatGPT

assistant-ui — это open-source библиотека на TypeScript и React, которая помогает быстро собрать чат с ИИ, готовый к продакшену. Позиционирование простое: дайте вашему React-приложению интерфейс уровня ChatGPT, не строя его с нуля. Проект развивается при поддержке Y Combinator, распространяется по лицензии MIT и на GitHub у него больше 12 тысяч звёзд.

Библиотека не привязана к одной модели или одному бэкенду. Из коробки она работает с Vercel AI SDK, а через отдельные пакеты — с LangGraph, протоколами AG-UI и A2A, Google ADK, OpenCode и собственными HTTP-бэкендами. Дальше разберём, что именно входит в комплект и как это выглядит в коде.

Установка

Самый быстрый путь — CLI-команда. Она либо создаёт новый проект на Next.js, либо добавляет стилизованные компоненты в уже существующий:

npx assistant-ui@latest create   # новый проект
npx assistant-ui@latest init     # добавить в существующий проект

Можно поставить пакеты напрямую:

npm install @assistant-ui/react @assistant-ui/ai-sdk ai

Команда init копирует в ваш проект стартовую тему на выбор: Base UI (по умолчанию) или Radix UI. Это не обёртка над чужим дизайном, а обычные файлы компонентов — дальше вы правите их как свой код.

Быстрый старт

Минимальный чат выглядит так:

"use client";

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/ai-sdk";
import { Thread } from "@/components/assistant-ui/elements/thread.aui";

export function Chat() {
  const runtime = useChatRuntime();
  return (
    <AssistantRuntimeProvider runtime={runtime}>
      <Thread />
    </AssistantRuntimeProvider>
  );
}

Хук useChatRuntime сразу подключает Vercel AI SDK. Если бэкенд другой — меняете хук на useLangGraphRuntime, useDataStreamRuntime или свой кастомный рантайм. Сам компонент Thread при этом не меняется.

Архитектурная идея в том, что UI отделён от логики через понятие рантайма. Рантайм отвечает за состояние диалога, стриминг и отправку сообщений. React-слой только рисует то, что рантайм ему отдаёт. Поэтому подключение LangGraph или собственного сервера не требует переписывания интерфейса.

Что входит в комплект

Композируемые примитивы. Интерфейс чата собирается из мелких строительных блоков: Thread, Message, Composer, ThreadList, ActionBar и их внутренних частей. В анатомии компонентов есть ThreadPrimitive.Viewport, MessagePrimitive.Root и MessagePrimitive.Parts, ActionBarPrimitive, BranchPickerPrimitive, ComposerPrimitive.Input, кнопки отправки и прикрепления файлов. Можно раскрасить каждый пиксель самостоятельно, а можно взять готовую тему shadcn/ui, которую CLI скопирует в проект.

Продакшен-UX из коробки. Библиотека сразу даёт то, что в чате считается обязательным, а не приятным:

• стриминг ответа;
• автопрокрутка;
• повторные попытки при ошибках;
• вложения;
• разметка markdown;
• подсветка кода;
• диктовка голосом;
• горячие клавиши;
• доступность (accessibility).

Всё это не приходится писать руками — компоненты уже умеют.

Generative UI. Вызовы инструментов (tool calls) и JSON-данные от модели рендерятся как обычные React-компоненты. Пример из README: модель вызывает get_weather, а пользователь видит не сырой JSON, а карточку погоды. Библиотека также умеет собирать человеко-подтверждения прямо в потоке диалога (approval-карточки) и открывает модели безопасные фронтенд-действия.

Сильный TypeScript. Типизация проходит сквозь всё: API рантайма, схемы инструментов, части сообщений и адаптеры. Это уменьшает количество сюрпризов при сборке и рефакторинге.

Бэкенды и модели

Интеграции распределены по отдельным пакетам:

Модельная поддержка из коробки широкая: OpenAI, Anthropic, Google Gemini, Mistral, Perplexity, AWS Bedrock, Azure, Fireworks, Ollama. Через AI SDK доступны и сообщественные провайдеры, а кастомный HTTP-бэкенд подключается без труда.

Стоит отдельно отметить assistant-cloud — опциональный managed-сервис от создателей. Он берёт на себя персистентность нитей диалога, телеметрию и хранение файлов. Сама библиотека остаётся open-source, а облако подключается только при желании.

Кастомизация

В отличие от монолитного компонента чата, который приходится ломать через CSS-переопределения, assistant-ui предлагает собирать интерфейс из примитивов и приносить собственные стили. CLI поставляет стартовый набор в варианте Base UI (по умолчанию) или Radix UI — дальше вы контролируете всё остальное.

Это подходит и для брендинга корпоративного продукта, и для нестандартных сценариев вроде чата с approval-карточками для агентных workflow.

Кто использует в проде

В README перечислены компании, которые уже запустили assistant-ui в production: Mastra, LangChain, Athena Intelligence, Browser Use, Stack, Inconvo, Iterable, Helicone, Gram, Coreviz — и, по словам авторов, ещё многие другие. Среди них заметные игроки агентной экосистемы: LangChain и Mastra — фреймворки для агентов, Browser Use — инструмент браузерной автоматизации, Helicone — наблюдаемость за LLM.

На сайте проекта есть галерея примеров и два демо-ролика на YouTube — короткий обзор и развёрнутый разбор возможностей.

Лицензия и поддержка

Лицензия MIT. Опционально предлагается Assistant Cloud для управляемого хранения истории нитей и аналитики. Проект поддержан Y Combinator.

Полезные ссылки:

• Документация
• Примеры
• Discord-сообщество
• Запись звонка с командой

Если вы строите AI-чат внутри React-приложения и не хотите писать стриминг, вложения и ветвление диалога с нуля, assistant-ui — один из самых зрелых open-source вариантов на сегодня. Библиотека даёт готовый UX, но оставляет полный контроль над стилями и бэкендом.