Streamdown: открытый Markdown-рендерер для AI-стриминга от Vercel — обзор и возможности

Streamdown — это новая open-source библиотека от Vercel, предназначенная для рендеринга Markdown в реальном времени при потоковой передаче данных от AI. Она решает ключевую проблему: традиционные рендереры не справляются с незавершёнными фрагментами контента, которые поступают частями. Streamdown обрабатывает такие чанки корректно, позволяя отображать ответы AI без задержек и ошибок. Библиотека уже используется в компоненте AI Elements и доступна как пакет npm streamdown.

Что такое Streamdown и как он работает

Streamdown — это drop-in решение, которое обрабатывает Markdown в реальном времени по мере поступления данных от AI. В отличие от традиционных рендереров, Streamdown корректно работает с незавершёнными чанками — фрагментами Markdown, которые могут обрываться на полуслове. Это критично для стриминга, где контент приходит частями.

Библиотека поддерживает GitHub Flavored Markdown (GFM): таблицы, списки задач, а также расширенный синтаксис, такой как интерактивные блоки кода с подсветкой Shiki и встроенной кнопкой копирования. Для математических выражений используется LaTeX через remark-math и KaTeX. Streamdown также обеспечивает безопасную обработку недоверенного контента, ограничивая изображения и ссылки.

Какие проблемы решает Streamdown при стриминге AI-ответов?

Основная проблема, которую решает Streamdown — это рендеринг частично полученных данных. Когда AI отправляет ответ по частям, традиционные библиотеки, такие как react-markdown или marked, ожидают полный контент и могут выдавать ошибки или некорректно отображать незакрытые элементы. Например, если AI отправил Заголовок, а затем паузу, обычный рендерер может интерпретировать это как два отдельных элемента. Streamdown же понимает, что это заголовок второго уровня, и отображает его правильно, продолжая обработку по мере поступления данных.

Кроме того, Streamdown обеспечивает безопасность: он ограничивает ссылки и изображения, предотвращая XSS-атаки, что особенно важно при работе с недоверенными данными от AI. Это делает библиотеку надёжным выбором для продакшн-приложений.

Предыстория и контекст

Проблема рендеринга Markdown при стриминге AI-ответов давно беспокоит разработчиков. Существующие библиотеки, такие как react-markdown или marked, предполагают, что весь контент доступен сразу. При потоковой передаче они могут выдавать ошибки или некорректно отображать частично полученные элементы, например, незакрытые заголовки или списки.

Vercel, как платформа для развёртывания AI-приложений, столкнулась с этой проблемой при создании собственных инструментов. Streamdown стал результатом внутренней разработки, которую компания решила открыть для сообщества. Это часть стратегии Vercel по упрощению создания AI-интерфейсов, включая фреймворк AI SDK и компоненты AI Elements.

Как Streamdown отличается от других Markdown-рендереров?

Главное отличие — способность обрабатывать потоковые данные. Streamdown не ждёт полного ответа от AI, а начинает рендеринг сразу, корректно обрабатывая незавершённые чанки. Например, если AI отправил Заголовок, а затем с текстом, Streamdown поймёт, что это заголовок второго уровня, и отобразит его правильно, в то время как другие библиотеки могут интерпретировать это как два отдельных элемента.

Кроме того, Streamdown предоставляет предварительно настроенные классы для типографики Tailwind, что упрощает интеграцию в современные веб-приложения. Разработчики могут использовать его как самостоятельный пакет или в составе AI Elements.

Технические детали и возможности

Streamdown написан на TypeScript и доступен через npm. Он поддерживает: - Подсветку синтаксиса Shiki с возможностью копирования кода; - Математические формулы через KaTeX; - Безопасную обработку HTML, ссылок и изображений; - Кастомизацию через тему и плагины.

Библиотека имеет нулевые зависимости от React, что позволяет использовать её в любом JavaScript-окружении. Для React-приложений доступен компонент , который можно встроить в проект одной строкой.

Как установить Streamdown и начать использовать?

Установка Streamdown проста: выполните npm install streamdown в вашем проекте. Затем импортируйте библиотеку и используйте её для рендеринга потокового Markdown. Для React-приложений подключите компонент , где stream — это асинхронный поток данных. Библиотека автоматически обработает чанки и отобразит контент по мере поступления.

Кого затронет и как

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

В России и СНГ библиотека может быть полезна стартапам, работающим с AI на базе открытых моделей, а также компаниям, интегрирующим AI в свои продукты. Однако стоит учитывать, что Streamdown зависит от экосистемы Vercel, хотя и может использоваться независимо.

Что будет дальше

Vercel планирует развивать Streamdown как часть AI SDK. Ожидается добавление поддержки дополнительных форматов, улучшение производительности и расширение документации. В ближайшее время выйдет версия 1.0 с обратной совместимостью. Разработчики могут влиять на roadmap через GitHub-репозиторий.

Итог

Streamdown решает реальную проблему рендеринга Markdown при AI-стриминге, предлагая готовое open-source решение. Для разработчиков это возможность ускорить создание интерфейсов, а для Vercel — ещё один шаг к доминированию в инфраструктуре AI-приложений. Следить за проектом стоит всем, кто работает с потоковыми AI-ответами.