streamdown

Configure Streamdown for streaming React Markdown rendering with syntax highlighting and diagrams.

5.5k|281|Updated Aug 15, 2025
One-click install
npx skills add https://github.com/vercel/streamdown --skill streamdown-vercel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: streamdown
Source: https://github.com/vercel/streamdown/tree/main/skills/streamdown
Command: npx skills add https://github.com/vercel/streamdown --skill streamdown-vercel

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a robust solution for rendering Markdown content, especially when dealing with AI-generated text streams, ensuring proper formatting, syntax highlighting, and interactive elements even with incomplete data.

Core Features & Use Cases

  • Streaming Markdown Rendering: Gracefully handles incomplete or unterminated Markdown blocks from AI models.
  • Rich Feature Support: Includes syntax highlighting (Shiki), Mermaid diagrams, LaTeX math rendering (KaTeX), and CJK text support.
  • Security & Customization: Offers options for link safety, custom HTML tags, and theming via Tailwind CSS.
  • Use Case: Integrate into a chat application to display AI responses that are formatted as Markdown, complete with code blocks, diagrams, and equations, all while streaming in real-time.

Quick Start

Install streamdown and configure your Tailwind CSS to include its dist files.

Frequently Asked Questions about streamdown

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

FAQPage Schema
How do I render streaming Markdown from an AI model in React without breaking formatting?▼

Render streaming Markdown in React by using a specialized renderer designed to gracefully handle incomplete or unterminated Markdown blocks from AI models, ensuring proper formatting and syntax highlighting even as tokens arrive in real time.

Can I display Mermaid diagrams and LaTeX math equations in an AI chat interface while streaming?▼

Yes, you can display Mermaid diagrams and LaTeX math equations during streaming by configuring a React Markdown renderer with built-in plugin support for diagram rendering and KaTeX math formatting.

How do I integrate syntax highlighting for code blocks generated by AI streaming responses?▼

Integrate syntax highlighting for AI streaming code blocks by utilizing a renderer that includes Shiki support, enabling properly formatted and highlighted code output within dynamic, tokenized Markdown content.

Does Streamdown work with the Vercel AI SDK for displaying real-time chat responses?▼

Yes, Streamdown works with the Vercel AI SDK, providing a streaming-optimized React Markdown renderer that integrates directly with AI streaming platforms to display real-time, formatted chat responses.

What is the best way to secure Markdown rendering when displaying AI-generated content with custom HTML?▼

Secure Markdown rendering for AI-generated content by applying link safety options, configuring allowed custom HTML tags, and utilizing built-in security hardening to prevent vulnerabilities in dynamic text streams.

Do I need Tailwind CSS to style a streaming Markdown renderer for AI applications?▼

You need Tailwind CSS to style the streaming Markdown renderer, as the setup requires configuring Tailwind to include the renderer's distribution files for proper theming and visual output.