RepoRadar markstream-vue: рендеринг Markdown в реальном времени для Vue 3 и Nuxt
markstream-vue — это компонент рендеринга Markdown в реальном времени для приложений на Vue 3 и Nuxt. Он поддерживает потоковые данные, такие как LLM token streams и код с возможностью обновления на лету, что позволяет эффективно обрабатывать длинные ответы ИИ или неполные команды.
Основное отличие markstream-vue от традиционных рендереров — это поддержка взаимодействия в реальном времени и возможность работать с частями контента без перезагрузки. Это делает его удобным для чат-ботов и других приложений, где важна мгновенная реакция на ввод пользователя. Пакет будет полезен разработчикам, которые работают с AI-приложениями и хотят интегрировать динамическое отображение Markdown в свои Vue-based интерфейсы.
Для запуска достаточно установить пакет через NPM. Одно ограничение — проект пока находится на стадии разработки, так что стоит учесть возможные проблемы с совместимостью.
Проект markstream-vue представляет собой рендерер Markdown на основе Vue 3, Nuxt и VitePress, предназначенный для потокового отображения. Он поддерживает работу с AI-чатами, движками LLM, такими как SSE и WebSocket, а также с неполными и длинными ответами. В проекте предусмотрены такие функции, как поддержка Mermaid для графиков, KaTeX для формул и потоковые блоки кода.
В отличие от стандартных рендереров Markdown, таких как marked или markdown-it, markstream-vue позволяет динамически отображать и обновлять Markdown, что особенно полезно, когда контент изменяется на лету в процессе чтения.
Установка и запуск
Для установки markstream-vue необходимо выполнить следующую команду:
pnpm add markstream-vueДля использования дополнительных возможностей, таких как улучшенные блоки кода и диффы, можно установить дополнительный пакет stream-diffs. Если необходимо оставаться на версии 1.x, можно использовать:
pnpm add markstream-vue@1Для использования в проекте напиши следующий код:
<script setup>
import MarkdownRender from 'markstream-vue'
import 'markstream-vue/index.css'
defineProps<{
content: string
isDone: boolean
}>()
</script>
<template>
<MarkdownRender mode="chat" :content="content" :final="isDone" />
</template>Основные возможности
- Поддержка потокового рендерингаMarkdown на лету.
- Инкрементальные обновления Markdown с поддержкой диффов в блоках кода.
- Поддержка графиков Mermaid и формул KaTeX с возможностью прогрессивного рендеринга.
- Интеграция компонентов Vue в Markdown.
- Поддержка длительного отображения контента с настройками для кодовых блоков.
Ограничения и особенности
Существуют некоторые ограничения, о которых стоит знать:
- Пока проект ориентирован на потоковую обработку, он более эффективен с неполными или часто обновляемыми данными, чем с полностью готовыми Markdown-документами.
- Может потребовать настройки при работе с внешними библиотеками, как Mermaid и KaTeX. Они должны быть установлены отдельно для работы.
- Поддерживаются только определенные фреймворки: Vue 3, Nuxt и VitePress.
Сайт проекта содержит дополнительную документацию и руководства по настройке: markstream.simonhe.me.
Открыть на GitHub: Simon-He95/markstream-vue →
