How we built streaming-safe Markdown for AI chat in React

Описание и применение

Создан компонент React, который корректирует неполные фрагменты Markdown во время потоковой передачи ответов ИИ, устраняя проблемы с открытыми блоками кода и разорванными ссылками, и обеспечивает плавный рендеринг в чат‑интерфейсе.

Задача

During AI chat streaming, Markdown parsers receive incomplete prefixes, causing rendering glitches such as open code fences, unclosed bold markers, and broken links that make the UI flicker.

Результат

Implemented a robust Markdown renderer that handles streaming AI responses without flickering, enabling smooth, real‑time chat experiences across multiple LLM providers.

Рабочий процесс

• Receive streaming text from the AI model.
• Pass the raw prefix to the Markdown component.
• Repair the prefix: close open code fences, close unbalanced **, _, and backticks, and hold back incomplete links until URLs are complete.
• Render the repaired Markdown with a standard parser.
• Display the output in the chat UI.
• Repeat for each new token as it arrives.
• Integrate additional UI components (ReasoningBlock, ToolCall, Plan, CodeDiff, Terminal, Citation, PromptInput, Conversation, Message) for a complete AI interface.
• Deploy the component library via npm and demo app.
• Collect user feedback for future improvements.

Доказательства

Markdown parsers assume they get the whole document. During streaming, they only get a prefix:

Источник

Instead of rendering the raw prefix, we "complete" it first: close the open code fence, close unbalanced **, _ and backticks, and hold back a link until its URL is complete.

Источник

In anythic/ui this happens inside the Markdown component. You just pass the text as it streams:

Источник