streamdown

Renders Markdown with syntax highlighting, Mermaid diagrams, KaTeX math, and interactive controls for AI chat frameworks like Vercel AI SDK.

Updated Mar 16, 2026
One-click install
npx skills add https://github.com/andreichenchik/claw --skill streamdown-andreichenchik
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: streamdown
Source: https://github.com/andreichenchik/claw/tree/main/.agents/skills/streamdown
Command: npx skills add https://github.com/andreichenchik/claw --skill streamdown-andreichenchik

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a highly optimized and feature-rich way to render Markdown content, especially for AI-generated text, offering real-time streaming, interactive elements, and robust plugin support.

Core Features & Use Cases

  • AI Streaming Integration: Seamlessly integrates with AI SDKs for real-time chat interfaces.
  • Rich Plugin Ecosystem: Supports syntax highlighting (code), diagrams (Mermaid), math (KaTeX), and CJK characters.
  • Interactive Controls: Includes features like copy-to-clipboard, download buttons, and a link safety modal.
  • Use Case: Build a customer support chatbot where AI responses are rendered instantly with code snippets, diagrams, and interactive elements, all while ensuring link safety.

Quick Start

Use the streamdown skill to render the provided markdown content with code highlighting and interactive controls.

Frequently Asked Questions about streamdown

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render markdown with AI streaming in React?

To render markdown with AI streaming, use a renderer that integrates with AI SDKs like Vercel AI SDK to display dynamic content in real-time. It supports syntax highlighting, Mermaid diagrams, and interactive controls during the streaming process.

How do I display Mermaid diagrams and LaTeX math in AI-generated markdown?

You can display Mermaid diagrams and LaTeX math in AI-generated markdown by using a renderer with a rich plugin ecosystem supporting KaTeX for math and Mermaid for diagrams. This enables complex visual elements to appear correctly in streaming AI chat interfaces.

Does Vercel AI SDK support real-time markdown rendering with interactive controls?

Yes, Vercel AI SDK supports real-time markdown rendering when paired with a specialized renderer that includes interactive controls like copy-to-clipboard, download buttons, and a link safety modal. This ensures dynamic content display and user safety in chat applications.

What is the best way to build a customer support chatbot that renders code snippets and diagrams instantly?

The best way to build a customer support chatbot with instant code snippets and diagrams is to use a markdown renderer optimized for AI streaming that supports syntax highlighting and Mermaid. This setup ensures AI responses are rendered instantly with interactive elements and link safety.

Why do I need a specialized markdown renderer for AI chat applications instead of standard parsers?

You need a specialized markdown renderer for AI chat applications because standard parsers lack real-time streaming capabilities, interactive controls like copy-to-clipboard, and plugin support for syntax highlighting and math. A specialized renderer ensures dynamic content display and link safety.