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

说明与用途

实现了一个 React 组件，在 AI 流式响应期间修复不完整的 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:

来源