Streamdown
Install this when you are building a chat or assistant UI and need Markdown that renders cleanly while tokens are still streaming in.
Overview
Streamdown is an agent skill for the Build phase that guides solo builders to render streaming AI Markdown in React chat UIs with a react-markdown-style component built for incomplete tokens.
Install
npx skills add https://github.com/vercel-labs/vercel-plugin --skill streamdownWhat is this skill?
- Drop-in replacement for react-markdown tuned for incomplete Markdown during live model output
- Core pattern: Streamdown with isAnimating tied to streaming state plus streamdown/styles.css
- Documents Tailwind v4 @source and Tailwind v3 content paths for node_modules/streamdown
- Path and import metadata for components/**/streamdown* and streamdown package installs
- Plugin extension model for richer streaming Markdown behavior beyond the base component
- Documents separate Tailwind v3 content-array and Tailwind v4 @source setup paths
Adoption & trust: 1 installs on skills.sh; 187 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your chat UI shows janky or broken Markdown whenever the model streams partial syntax before closing fences or list items.
Who is it for?
React or Next.js builders adding or refactoring an AI chat surface who want Vercel’s streaming Markdown component instead of hand-rolled parsers.
Skip if: Teams that only render static, post-completion Markdown with no live stream, or non-React stacks where this package does not apply.
When should I use this skill?
Rendering streaming Markdown from AI models, building chat UIs with real-time content, or replacing react-markdown with a streaming-aware component.
What do I get? / Deliverables
You get a working Streamdown integration with Tailwind scanning, styles, and isAnimating wiring so messages stay readable from the first token through the final chunk.
- Streamdown-backed chat message component
- Tailwind content or @source entries for streamdown dist
- Installed streamdown dependency and styles import
Recommended Skills
Journey fit
How it compares
Use for live token-by-token Markdown in React chat; keep react-markdown for fully buffered, non-streaming pages.
Common Questions / FAQ
Who is streamdown for?
Solo and indie frontend builders using React who ship AI chat UIs and need reliable rendering while the model is still typing.
When should I use streamdown?
During Build (frontend) when you install streamdown, configure Tailwind for its dist files, or replace react-markdown in a streaming message list; also when an agent is editing components/**/streamdown* paths.
Is streamdown safe to install?
Review the Security Audits panel on this Prism page for npm supply-chain signals; treat it like any third-party React dependency and pin versions in your lockfile.
SKILL.md
READMESKILL.md - Streamdown
# Streamdown — Streaming Markdown for AI You are an expert in Streamdown, Vercel's drop-in replacement for react-markdown designed for AI streaming. Streamdown gracefully handles incomplete or unterminated Markdown in real-time, providing smooth rendering during AI model output. ## Installation ```bash npm install streamdown ``` **Tailwind v4** — add to your CSS: ```css @source "../node_modules/streamdown/dist/*.js"; ``` **Tailwind v3** — add to `content` array: ```js content: ["./node_modules/streamdown/dist/*.js"] ``` ## Core Usage ```tsx import { Streamdown } from 'streamdown' import 'streamdown/styles.css' function ChatMessage({ content, isStreaming }: { content: string; isStreaming: boolean }) { return ( <Streamdown isAnimating={isStreaming}> {content} </Streamdown> ) } ``` ## Plugins Streamdown uses a plugin architecture for extended functionality: ```tsx import { Streamdown } from 'streamdown' import { code } from '@streamdown/code' // Syntax highlighting (Shiki) import { math } from '@streamdown/math' // KaTeX equations import { mermaid } from '@streamdown/mermaid' // Mermaid diagrams import { cjk } from '@streamdown/cjk' // CJK language support <Streamdown plugins={{ code: code, math: math, mermaid: mermaid, cjk: cjk, }} > {markdown} </Streamdown> ``` ### Plugin packages | Package | Purpose | |---|---| | `@streamdown/code` | Syntax highlighting via Shiki | | `@streamdown/math` | Math equations via KaTeX | | `@streamdown/mermaid` | Mermaid diagram rendering | | `@streamdown/cjk` | CJK language support | ## Controls Enable interactive controls for code blocks, tables, and diagrams: ```tsx <Streamdown controls={{ table: true, code: true, mermaid: { download: true, copy: true, fullscreen: true, panZoom: true, }, }} > {markdown} </Streamdown> ``` ## Props Reference | Prop | Type | Description | |---|---|---| | `children` | `string` | Markdown content to render | | `isAnimating` | `boolean` | Show streaming cursor/animation | | `plugins` | `object` | Plugin configuration | | `controls` | `object` | Interactive controls config | | `className` | `string` | Additional CSS class | ## Integration with AI SDK ```tsx 'use client' import { useChat } from '@ai-sdk/react' import { Streamdown } from 'streamdown' import { code } from '@streamdown/code' import 'streamdown/styles.css' export function Chat() { const { messages, input, handleInputChange, handleSubmit, status } = useChat() return ( <div> {messages.map((m) => ( <div key={m.id}> <strong>{m.role}:</strong> <Streamdown isAnimating={status === 'streaming' && m.id === messages[messages.length - 1]?.id} plugins={{ code: code }} > {m.content} </Streamdown> </div> ))} <form onSubmit={handleSubmit}> <input value={input} onChange={handleInputChange} /> </form> </div> ) } ``` ## Key Rules - **Requires React 18+** and **Tailwind CSS** for styling - **Import styles** — always import `streamdown/styles.css` for animations - **Use `isAnimating`** to show/hide the streaming cursor indicator - **Plugins are tree-shakeable** — only import what you need - **Security-first** — uses