Repolode
Предложить
vercel

vercel/streamdown

Прямая замена react-markdown для отображения потокового Markdown от AI-моделей, в том числе незавершённых блоков.

Открыть на GitHubСайт
Звёзды
5,711
Форки
315
Открытые issues
44
Последний коммит
13 часов назад

Что это?

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

Streamdown можно использовать как прямую замену react-markdown. Среди его возможностей — GitHub Flavored Markdown (таблицы, списки задач, зачёркивание), рендеринг математических формул LaTeX через KaTeX, диаграммы Mermaid с кнопкой для их отображения и подсветка кода на основе Shiki. За безопасность отвечает rehype-harden, а мемоизация рендеринга сокращает объём работы при обновлениях.

Streamdown используется в компоненте Message из AI Elements для AI SDK, а также доступен как отдельный npm-пакет. Для стилизации нужны Tailwind и CSS custom properties в стиле shadcn/ui; их настройка описана в руководстве.

Ключевые возможности

  • 01Прямая замена react-markdown
  • 02Обрабатывает незавершённый и незакрытый Markdown при потоковой передаче
  • 03Таблицы, списки задач и зачёркивание в GitHub Flavored Markdown
  • 04Рендеринг математических формул LaTeX через KaTeX
  • 05Диаграммы Mermaid с кнопкой для их отображения
  • 06Подсветка синтаксиса кода с помощью Shiki

Сценарии использования

  • Отображение ответов LLM в чате React- или Next.js-приложения
  • Показ ответов, сгенерированных AI, с кодом, таблицами и формулами
  • Отображение диаграмм Mermaid, созданных AI-ассистентом

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

  1. 1

    Установите пакет

    npm i streamdown
  2. 2

    Добавьте строку @source для Tailwind в globals.css

  3. 3

    Отображайте Markdown в потоковом режиме с помощью компонента Streamdown в приложении React

Что важно знать

  • Лицензия не указана явно в метаданных проекта.
  • Для корректного отображения стилей необходимы Tailwind CSS и пользовательские свойства CSS в стиле shadcn/ui.

Темы

#markdown#react#streaming#llm#streaming-markdown#syntax-highlighting#katex#ai

Частые вопросы

Что такое streamdown?
Прямая замена react-markdown для отображения потокового Markdown от AI-моделей, в том числе незавершённых блоков. Streamdown — React-рендерер Markdown для контента, который поступает по токенам, например ответов AI-моделей. Обычные Markdown-рендереры часто показывают сломанное форматирование, пока текст ещё генерируется: например, незакрытый блок кода или недописанную таблицу. Streamdown умеет обрабатывать незавершённые и незакрытые блоки Markdown, поэтому содержимое остаётся читаемым по мере поступления.
streamdown можно использовать бесплатно? Какая у него лицензия?
streamdown распространяется с открытым исходным кодом под лицензией Other. Перед использованием в коммерческих продуктах проверьте условия лицензии.
streamdown всё ещё поддерживается?
Активно поддерживается. Последний коммит в streamdown — 19 окт. 2026 г..
Для чего можно использовать streamdown?
Отображение ответов LLM в чате React- или Next.js-приложения Показ ответов, сгенерированных AI, с кодом, таблицами и формулами Отображение диаграмм Mermaid, созданных AI-ассистентом
Как установить streamdown?
Установите пакет: npm i streamdown Добавьте строку @source для Tailwind в globals.css Отображайте Markdown в потоковом режиме с помощью компонента Streamdown в приложении React
Где скачать streamdown?
Исходный код и инструкции по установке — на GitHub: https://github.com/vercel/streamdown

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты

thesysdev / open-intelligent-ui

Демонстрационный проект с открытым исходным кодом на Next.js, воссоздающий Intelligent UI из ChatGPT: ответы модели выводятся потоком в виде интерактивных карт, диаграмм, форм и работающих инструментов на базе OpenUI.

ИИ и машинное обучение#generative-ui#react#nextjs
60848TypeScriptMITОбновлён позавчера