Проектирование стриминговых интерфейсов

Стриминговый ответ - самая недопроектированная поверхность в современном софте. Большинство команд написали TypeScript-хук с fetch, подключили его к div и назвали это продуктовым дизайном. Результат: печатная машинка, которая притворяется интерфейсом.

Стриминг - это не просто текст, который появляется на экране. Это модель взаимодействия с ритмом, паузами, поведением скролла, элементами прерывания и сигналами доверия. Команда, которая проектирует только ввод, выпустила половину продукта. Область вывода - вторая половина, и именно здесь большинство AI-продуктов теряют пользователя.

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

Стриминговый UI - это поверхность, а не цикл fetch

Стриминговый UI - это вся область, из которой пользователь читает ответ, пока работает модель. Видимый текст - лишь одна часть. Каденция, курсор, поведение скролла, структурные обязательства, элементы прерывания и состояние после стрима - все остальное.

У этой поверхности есть измеримые свойства. Time-to-first-token. Каденция токенов. Структурное обязательство. Задержка прерывания. Сигнал завершения. Возможности после стрима. Проигнорируйте любое из них, и стрим станет побочным эффектом API, а не спроектированным компонентом.

Cursor, Claude, v0, Lovable, Linear AI, Raycast AI. Никто из них не считает стриминг сырым выводом токенов. Каждый выпускает структурированную поверхность. Это и есть планка.

Пять слоев отличной стриминговой поверхности

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

Time-to-first-token - момент, когда пустота превращается в обратную связь. Ритм токенов - то, как ощущается стрим после запуска. Структурное обязательство - то, как поверхность справляется со списками, таблицами и кодом без перерасчета верстки. Прерывание и редактирование - аварийный выход пользователя. Завершение - момент, когда стрим заканчивается и результат становится интерактивным. Пропустите любой слой, и стрим начнет гнить с него.

Слой 1: Time-to-first-token

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

Варианты конкретны. Скелетон-заглушка, заранее резервирующая область вывода. Мигающий курсор. Индикатор набора из точек. Стриминговый префикс, когда известная фраза вроде «Вот» появляется за 300 мс до контента.

Три точки в ChatGPT работают, потому что честны. Градиентный пульс в Claude - апгрейд: мягкая анимированная полоса, сигнализирующая, что поверхность жива, без обязательств в виде фейкового контента. Cursor рисует тонкую линию курсора и чип статуса, который называет происходящее. Во всех случаях пользователь смотрит на что-то в пределах 200 мс.

Пустота - это провал. Пустая область, висящая 600 мс, учит пользователя, что AI - это то, что нужно пережидать. Выпускайте курсор раньше, чем модель.

Слой 2: Ритм токенов

Сырые потоки токенов дергаются. Модель, которая выдает четыре токена, потом двадцать, потом один, выглядит как глючащий терминал, даже если сама доставка в порядке. Ритм - это дизайнерское решение.

Решение - сглаженная каденция. Буферизуйте входящие токены 30-60 миллисекунд, затем рендерите с постоянной скоростью. Пользователь читает 250-400 слов в минуту, поэтому цель - стрим, который идет на уровне скорости чтения или чуть выше, без всплесков. Claude внедрил эту дисциплину рано.

UI-примитивы стриминга от Vercel в v0 несут ту же идею: цикл рендера, который отделяет сеть от визуального обновления. Поток токенов от API - один слой. Визуальный поток - другой. Они никогда не должны совпадать.

Курсор важен. Курсор, который следует за последним отрисованным токеном с мягким затухающим следом, фиксирует взгляд. Без него глаз пользователя прыгает в поисках места, где идет стрим. Курсор в композере Cursor - не совпадение названий.

Слой 3: Структурное обязательство

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

Наивная версия - markdown как стриминг. Рендерер парсит каждый чанк, верстка перетекает при каждом коммите, список перенумеровывается, блок кода посреди стрима меняет шрифт, страница прыгает. Каждый reflow - налог на внимание.

Правильная версия фиксирует структуру в тот момент, когда ее можно определить, а затем стримит контент в зафиксированную верстку без reflow. Список резервируется, как только появляется первый дефис. Блок кода резервирует моноширинную панель на тройном бэктике. Таблица сразу фиксирует число колонок. Стриминг диффов в Cursor - хрестоматийный случай. Панель диффа резервирует верстку, сначала приходят пути файлов, отдельные строки стримятся в заранее выделенные ряды. Selection-aware стриминг в v0 несет тот же паттерн на стороне холста.

Структурированные подсказки Linear AI дают обязательство, ни разу не показывая пользователю состояние «загрузка». Подсказка приходит как типизированный объект, поля заполняются в порядке зависимостей, воркфлоу никогда не блокируется. Linear выпускает работу, остальные выпускают транскрипты.

Слой 4: Прерывание и редактирование

Стриминговый UI без прерывания враждебен. Пользователь смотрит, как модель пишет то, что он уже знает как неверное, и единственный выход - закрыть вкладку. Не продукт. Ситуация с заложником и счетчиком токенов.

Кнопка остановки - самый дешевый и самый эффективный элемент на поверхности. Видимая с первого токена, а не после сотого. Она есть в Claude, Cursor, ChatGPT и v0. Большинство самописных чат-интерфейсов про нее забывают.

Прерывание - это пол. Редактирование - потолок. Паттерн, которого большинство команд пока не заслужили, - живое редактирование, когда пользователь правит промпт посреди стрима, а поверхность перенаправляется. Accept и reject во время стриминга в Cursor - ближайшая выпущенная версия. Пользователь читает дифф по мере появления, принимает рабочие части, отклоняет остальные. Это настоящий цикл взаимодействия.

Regenerate в ChatGPT - контрпример. Кнопка перезаписывает предыдущий ответ, пользователь теряет версию, которая ему понравилась. Regenerate как перезапись - разрушительно. Regenerate как ветка - это дизайн. Поверхность истории в Claude выпускает ветвление.

Слой 5: Завершение и состояние после стрима

Момент окончания стрима - это дизайнерский момент. Большинство продуктов считают его ничем. Стрим останавливается, курсор исчезает, пользователь смотрит на стену текста и гадает, что делать дальше.

Материализация артефактов в Claude - золотой стандарт. Стримингующийся текст получает тихий сигнал завершения, и панель артефакта в тот же момент меняется со стримингового превью на интерактивную поверхность. Пользователь не «закончил читать», он теперь «в артефакте». Переход - вся суть.

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

Diff-to-accept в Cursor - третий паттерн. Стрим закончился, дифф остается редактируемым, accept и reject на месте, файл не коммитится, пока пользователь не скажет. Стрим закончен, решение - нет. Именно это разделение делает поверхность инструментом, а не чат-логом.

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

Разборы реальных продуктов

Cursor использует композерный стриминг плюс материализацию диффов. Композер стримит план, панель диффа стримит патч, accept и reject остаются живыми, состояние после стрима - ожидающий дифф, которым владеет пользователь. Попадание в каждый слой.

Claude дает сглаженный ритм токенов и смену панели артефакта. Градиентный пульс до первого токена, ровная каденция, материализация артефакта при завершении, история беседы с ветвлением. Поверхность ощущается спроектированной, потому что спроектирован каждый переход.

v0 дает стриминг на основе выделения с живым превью. Пользователь кликает область холста, промпт сам ограничивает контекст, стрим приходит как код и как превью, подменяющееся в iframe. Завершение передает управление кнопке деплоя.

ChatGPT - базовая линия. Стриминг токенов с обратной связью в виде трех точек, regenerate как перезапись, branch-from-here как недавнее добавление. Дефолт категории, а не планка.

Vercel AI Playground, Lovable, Anthropic Computer Use, Raycast AI и GitHub Copilot Workspace дают каждый по куску. Vercel выводит выбор модели прямо во время стрима. Lovable реализует паттерн stream-to-app: пользователь наблюдает, как приложение собирается в реальном времени. Computer Use параллельно стримит скриншоты и трассу рассуждений. Raycast стримит в микроповерхность командной палитры. Copilot Workspace дает стриминг по схеме план-затем-выполнение с контрольными точками.

Пять правил

1. Показывайте обратную связь быстрее 200 миллисекунд. Курсор, пульс, точка набора, стриминговый префикс. Что угодно, кроме пустоты.
2. Сглаживайте каденцию. Буферизуйте сетевой стрим, рендерите на скорости чтения, закрепляйте курсор. Дерганье - дизайнерский провал, а не сетевое условие.
3. Фиксируйте структуру без reflow. Резервируйте верстку, как только можно определить список, таблицу или блок кода. Никогда не перетекайте.
4. Выпускайте кнопку остановки до токена 100. Видимую. Достижимую. Один клик. Без исключений.
5. Проектируйте момент после стрима так же тщательно, как сам стрим. Завершение - это передача управления. Передача управления и есть продукт.

Антипаттерны, убивающие стримы в продакшене

Мертвый спиннер. Спиннер крутится, пока модель стримит за закрытым слоем рендера. Удалите спиннер. Выпустите стрим.

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

Автоскролл, который воюет с пользователем. Страница автоматически скроллится за стримом, пока пользователь читает более ранний абзац. Определяйте ручной скролл и ставьте автоскролл на паузу, пока пользователь не вернется к концу. Claude и Cursor с этим справляются.

Ошибка «нет кнопки остановки». Прерывание спрятано в меню настроек, или появляется только через 30 секунд, или вообще отсутствует. Нужна видимость с первого токена.

Стрим, который заканчивается и оставляет пользователя пялиться в экран. Нет сигнала завершения, нет следующего шага. Проектируйте состояние после стрима.

Деструктивный regenerate. Новый ответ перезаписывает старый, пользователь теряет понравившуюся версию. Regenerate как ветка, никогда как перезапись.

Сырой markdown как стриминг. Рендерер перерасчитывает верстку на каждом чанке, страница прыгает. Зафиксируйте структуру один раз, стримьте в зарезервированную верстку.

Исправления небольшие. Поверхности, которые их выпускают, ощущаются как 2026 год. Те, что нет, ощущаются как чат-сайдбары 2022 года, подключенные к модели 2026 года.

Аудит стриминговой поверхности

Прогоните это на любой AI-стриминговой поверхности перед релизом.

1. Первая обратная связь. Показывает ли поверхность что-то в пределах 200 миллисекунд после отправки?
2. Каденция. Сглажен ли поток токенов до скорости чтения или это сырое сетевое дерганье?
3. Структурное обязательство. Резервирует ли поверхность верстку для списков, таблиц и блоков кода до прихода контента?
4. Возможность остановки. Видна ли кнопка остановки с первого токена, в один клик?
5. Возможность редактирования. Может ли пользователь править, принимать или отклонять посреди стрима?
6. Дизайн завершения. Передает ли момент окончания стрима управление реальному следующему шагу?
7. Артефакт после стрима. Интерактивен ли вывод после стрима или это замороженный транскрипт?

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

Команды, которые так тщательно выпускают стриминговые поверхности, - те же, что относятся к промпт-поверхностям как к настоящим компонентам на стороне ввода и проектируют под AI-задержку на системном уровне. Сочетайте это с пустыми состояниями, паттернами агентского UI и сигналами доверия, чтобы стриминговый вывод заслужил прочтение.

FAQ

Что такое дизайн стриминговых UI?

Дизайн стриминговых UI - это дисциплина, определяющая, как AI-вывод появляется на экране по мере генерации моделью. Она охватывает time-to-first-token, каденцию токенов, структурное обязательство, элементы прерывания и артефакт после стрима. Стриминговый UI - это не textarea, заполняющаяся текстом. Это спроектированная поверхность с измеримыми свойствами, и выигрывающие сейчас продукты относятся к ней именно так.

Почему стриминг токенов ощущается по-разному в разных продуктах?

Потому что каденция - это дизайнерское решение, а не результат работы сети. Сырой поток токенов дергается. Буферизованный, сглаженный поток приходит на скорости чтения. Claude сглаживает каденцию циклом рендера, отделяющим сеть от визуального обновления. ChatGPT ближе к сырой доставке. Тот же класс моделей, другое ощущение поверхности.

Какая самая частая ошибка в стриминговых UI?

Выпуск стрима без видимой кнопки остановки. Пользователь смотрит, как модель пишет то, что он считает неверным, и у него нет выхода. Другие частые провалы: мертвые спиннеры, автоскролл, воюющий с пользователем, деструктивный regenerate, сырой markdown, перерасчитывающий верстку на каждом чанке, и завершение, которое ни к чему не ведет. Каждый из них исправляется небольшим изменением поверхности.

Стройте стрим так, будто это холст

Область стримингового вывода - новый холст. AI-продукты живут или умирают от того, как эта поверхность ощущается в первые 800 миллисекунд и насколько читаемой остается на протяжении 30-секундного ответа. Большинство команд относятся к ней как к печатной машинке. Команды, задающие планку, относятся к ней как к инфраструктуре.

Выпустите пять слоев. Прогоните аудит. Избегайте антипаттернов. Продукт, который получится на выходе, ощущается инструментом, а не чат-сайдбаром, который притворяется им.

Если вам нужна команда, которая выпускает стриминговые поверхности как полноценные компоненты, а не как прикрученные циклы токенов, наймите Brainy. Мы проектируем AI-native продуктовый UI от начала до конца, от первого токена до артефакта после стрима, со встроенными сигналами доверия и элементами прерывания еще до того, как первый пользователь нажмет «отправить».