Streamdown

What is Streamdown

Streamdown is a drop-in replacement for react-markdown, specifically designed for AI-powered streaming. It aims to provide a seamless way to stream safe and perfectly formatted Markdown without the complexities often associated with tokenization and streaming.

How to use Streamdown

Streamdown can be installed directly using npm: npm i streamdown. It can also be added via the ai-elements CLI: npx ai-elements add response or npx ai-elements@latest add response.

Features of Streamdown

• Drop-in Replacement: Acts as a direct substitute for react-markdown.
• AI-Powered Streaming: Optimized for streaming content generated by AI.
• Built-in Typography: Includes Tailwind classes for common Markdown components like headings, lists, and code blocks.
• GitHub Flavored Markdown (GFM): Supports GFM features out-of-the-box, including task lists and tables.
• Interactive Code Blocks: Uses Shiki for syntax highlighting and includes a copy button for code blocks.
• Mathematical Expressions: Supports LaTeX math notation via remark-math and KaTeX.
• Mermaid Diagrams: Supports Mermaid diagrams, which can be rendered on demand.
• Unterminated Markdown Parsing: Handles and styles incomplete Markdown syntax (e.g., unclosed code blocks, bold, italic, links).
• Security Hardening: Prevents untrusted Markdown from including images from or links to unexpected origins, mitigating prompt injection risks.
• Customizable Props: Extends react-markdown props with additional options for streaming and security, such as allowedImagePrefixes, allowedLinkPrefixes, defaultOrigin, rehypePlugins, remarkPlugins, and shikiTheme.

Use Cases of Streamdown

Streamdown is ideal for applications that involve streaming AI-generated content, such as chatbots, AI assistants, or any platform where dynamic Markdown rendering is required. It ensures that the displayed content is both visually appealing and secure.

Features of Streamdown

• Drop-in Replacement: Acts as a direct substitute for react-markdown.
• AI-Powered Streaming: Optimized for streaming content generated by AI.
• Built-in Typography: Includes Tailwind classes for common Markdown components like headings, lists, and code blocks.
• GitHub Flavored Markdown (GFM): Supports GFM features out-of-the-box, including task lists and tables.
• Interactive Code Blocks: Uses Shiki for syntax highlighting and includes a copy button for code blocks.
• Mathematical Expressions: Supports LaTeX math notation via remark-math and KaTeX.
• Mermaid Diagrams: Supports Mermaid diagrams, which can be rendered on demand.
• Unterminated Markdown Parsing: Handles and styles incomplete Markdown syntax (e.g., unclosed code blocks, bold, italic, links).
• Security Hardening: Prevents untrusted Markdown from including images from or links to unexpected origins, mitigating prompt injection risks.
• Customizable Props: Extends react-markdown props with additional options for streaming and security, such as allowedImagePrefixes, allowedLinkPrefixes, defaultOrigin, rehypePlugins, remarkPlugins, and shikiTheme.

Use Cases of Streamdown

Streamdown is ideal for applications that involve streaming AI-generated content, such as chatbots, AI assistants, or any platform where dynamic Markdown rendering is required. It ensures that the displayed content is both visually appealing and secure.

Props

Streamdown extends react-markdown component props with additional properties for streaming and security features. All props are optional and have sensible defaults.

• children: The markdown content to render. Can be a string of markdown or React nodes.
• parseIncompleteMarkdown: Whether to parse and fix incomplete markdown syntax. Default: true.
• className: CSS class names to apply to the wrapper div element.
• components: Custom React components for rendering markdown elements.
• allowedImagePrefixes: Array of allowed URL prefixes for images. Default: ["*"].
• allowedLinkPrefixes: Array of allowed URL prefixes for links. Default: ["*"].
• defaultOrigin: Default origin for relative URLs in links and images.
• rehypePlugins: Array of rehype plugins. Includes KaTeX for math rendering by default. Default: [rehypeKatex].
• remarkPlugins: Array of remark plugins. Includes GFM and math support by default. Default: [remarkGfm, remarkMath].
• shikiTheme: Themes for code blocks. Defaults to ["github-light", "github-dark"].