106.9K+Скачать
Перейти к руководству
Streamdownавтор vercel

Streamdown Навык.

Рендерите потоковый Markdown с диаграммами, кодом и явно заданным управлением контентом.

  • Потоковый Markdown
  • React
Скачать OpenDesignОткрыть руководство по использованию
Обзор исходных материалов · streamdownSKILL.md
Задача Рендерите потоковый Markdown с диаграммами, кодом и явно заданным управлением контентом. Результаты Рендерер Streamdown, подключённый к Markdown-контенту приложения. Перед началом Начните с формата сообщений React-приложения, версии Tailwind и нужных возможностей Markdown. Выберите плагины и управление контентом до подключения потокового состояния активного ответа.
Редакционное описание · исходные материалы проверены 2026-11-02 · не сгенерированный пример

01 Возможности

Рендерите потоковый Markdown с диаграммами, кодом и явно заданным управлением контентом

Настройте Streamdown для ответов ИИ, подсветки синтаксиса, Mermaid, формул и CJK-текста с Tailwind и средствами безопасности контента.

Процесс на основе источникаНе тест выполнения

Принцип работы

Streamdown помогает агенту встроить React-рендерер Markdown для постепенно поступающего контента. Он охватывает потоковый и статический режимы, подсветку кода, диаграммы, математические обозначения и CJK-текст. Навык также объясняет управление отрисованным контентом: копирование, ссылки и обработку пользовательских элементов.

Практическая ценность — в деталях интеграции, которые легко упустить. Источник отмечает сканирование файлов пакетов Tailwind, стили KaTeX для формул и связь потокового курсора с флагом isAnimating. Необязательные плагины добавляют по реальным потребностям интерфейса.

Ожидаемые результаты

  • Рендерер Streamdown, подключённый к Markdown-контенту приложения.
  • Настройки плагинов и Tailwind, соответствующие установленным пакетам.
  • Явные решения о подтверждении ссылок, разрешённых элементах и интерактивных элементах управления.
Смотреть пример задания

От задания до проверки

  1. 01
    Выберите возможности контента

    Определите, нужны ли ответам код, Mermaid, формулы или CJK. Для постепенно поступающих ответов выберите потоковый режим, для готовых документов — статический.

  2. 02
    Настройте рендер и стили

    Установите выбранные пакеты и включите их дистрибутивные файлы в сканирование Tailwind. В Tailwind v4 используются директивы @source, в v3 — записи content в конфигурации. Добавляйте пути только установленных плагинов. Для формул импортируйте KaTeX CSS, затем подключите рендерер к текущей структуре сообщений.

  3. 03
    Проверьте поток и безопасность

    Задайте состояние анимации активного ответа и проверьте пользовательский HTML, обработку URL и подтверждение ссылок. Изучите и неполные ответы, и готовый контент.

02 Когда использовать

Когда использовать

Начните с формата сообщений React-приложения, версии Tailwind и нужных возможностей Markdown. Выберите плагины и управление контентом до подключения потокового состояния активного ответа.

Хорошо подходит

  • Постепенные ответыЧат ИИ рендерит форматированные ответы по мере поступления токенов.
  • Форматированные документыReact-представлению документов нужен Markdown с выбираемой поддержкой диаграмм или формул.

Ограничения

  • Бэкенд принадлежит приложениюПриложение по-прежнему отвечает за свой эндпоинт ИИ и жизненный цикл сообщений.
  • Совместимость версийДокументированные примеры нужно адаптировать к установленным в приложении версиям SDK.
  • Проверка интеграцииСтили плагинов и управление контентом необходимо проверить в целевом приложении.

Что подготовить

  • Markdown-контентПоток либо полная строка Markdown для рендера.
  • Выбранные зависимостиВыбранные плагины и установленная версия Tailwind.
  • Управление контентомТребования проекта к ссылкам, HTML и управлению скачиванием.

03 Важные решения

Важные решения

  1. Два режима рендера

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

  2. Выборочные плагины

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

  3. Конкретные проверки настройки

    Проверки из документации направлены на отсутствующие стили, формулы и проблемы потокового курсора.

04 Пример задания

Попробуйте конкретное задание

Приведённое ниже задание не тестировалось. Перед использованием проверьте настройку навыка.

Изучите исходные инструкции и настройку

Поток либо полная строка Markdown для рендера.

Исходный файл в репозитории
https://github.com/vercel/streamdown/blob/7dcabc64df944edce6f3993732667652e6214af0/skills/streamdown/SKILL.md

Ссылка ниже открывает инструкции автора. Перед использованием изучите требования к настройке в репозитории; это не команда установки.

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания
Используй streamdown для области ответов ассистента в нашем React-приложении. Проверь установленные версии AI SDK и Tailwind до адаптации примеров. Нужны подсветка кода и диаграммы Mermaid, но не математический плагин на этом проходе. Настрой сканирование пакетов, сохрани текущую тему и показывай индикатор потока только у активного ответа. Оставь подтверждение ссылок включённым. Просмотри неполный Markdown, готовую диаграмму и длинный блок кода, затем сообщи об изменениях конфигурации и непроверенных элементах управления.

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

  • Стили выбранных плагинов включены; пути неустановленных плагинов отсутствуют.
  • Курсор появляется только в нужном состоянии анимации.
  • Ссылки, элементы управления кодом и диаграммы корректно работают для полного и частичного контента.

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

Скачать OpenDesignЧитать краткое руководство

05 Источник и лицензия

Исходные материалы и лицензия

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

Владелец источника
vercel
Репозиторий
vercel/streamdown
Файл навыка
SKILL.md
Лицензия
Apache-2.0
Проверенный снимок
2026-11-02 · 7dcabc64df94
Редакционное резюме источника
Рендерите потоковый Markdown с диаграммами, кодом и явно заданным управлением контентом.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Можно рендерить обычные документы?

Да. Источник включает статический режим для полного Markdown, например документации или блогов.

Почему не видно курсора?

Документированная конфигурация требует и стиля курсора, и значения true для isAnimating.

Установка поддержки формул завершает настройку?

Нужна также таблица стилей KaTeX. По умолчанию для формул используются двойные знаки доллара во избежание конфликтов с валютой.

Почему копирование недоступно, пока приходит ответ?

Документированные элементы управления отключают копирование при isAnimating равном true. Устанавливайте флаг только для активного потокового ответа и снимайте по завершении; иначе готовые сообщения могут сохранять потоковое состояние.

OpenDesign

Храните задание и работу над дизайном вместе.

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

Скачать OpenDesignПросмотреть дизайн-навыки
Исходный файл в репозитории
https://github.com/vercel/streamdown/blob/7dcabc64df944edce6f3993732667652e6214af0/skills/streamdown/SKILL.md