Vercel Streamdown skill
A skill for the Streamdown library: an agent wires streaming Markdown rendering of model answers into a React app
- 5,757 ★ on the repository
- Last commit
Minimal access
Why this level
- The skill gives the agent install and styling instructions and edits only your app's code
- Model answers render as HTML, so links and tags should be limited through the security settings
Install
- Works in
Manual install
npx skills add vercel/streamdown --skill streamdownThe generic skills CLI route for a repository with skills; the project does not document it. You can copy the `skills/streamdown` folder by hand.
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill gives the agent install and styling instructions and edits only your app's code
- Model answers render as HTML, so links and tags should be limited through the security settings
This is third-party code. Review the repository files before installing.
What it does
The `streamdown` skill sits in the Streamdown repository, Vercel's React library for showing Markdown from a model answer stream, and guides an agent through setting it up. The library replaces `react-markdown` and renders unfinished blocks correctly: an unclosed code block, table or list while tokens are still arriving. The skill starts with a quick install and the main catch: Tailwind must see the library files, so a `@source` directive pointing to `node_modules/streamdown/dist` goes into the styles. Next come the plugins for code highlighting, Mermaid diagrams, KaTeX formulas and Chinese, Japanese and Korean text, plus the caret, static mode for blogs, control buttons, link safety and custom components. A separate list covers eight typical mistakes such as missing Tailwind styles or formulas without CSS.
Who it is for. Frontend developers building a language model chat on React and the Vercel AI SDK who hand the output setup to Claude Code, Cursor or Codex.
Good fit when
- In a chat the model's answer arrives in pieces and tables with code flicker until the Markdown is complete
- Styles vanished after installation and the cause is Tailwind not scanning the library files
- Answers need highlighted code blocks, Mermaid diagrams or LaTeX formulas
- A blog or docs render finished Markdown in static mode
- Model answers contain links and HTML and the agent sets up safe output
Not a fit when
- The app is not on React: the library and skill target it
- Markdown arrives whole without a stream: plain `react-markdown` is enough
- A terminal Markdown viewer is needed: Streamdown draws browser interfaces
Example request
Replace react-markdown in our chat with Streamdown, add code highlighting and a caret while generatingLimitations
The skill covers Tailwind v3 and v4, and without Tailwind the library will not draw its styles. The plugins for highlighting, diagrams, formulas and CJK install as separate `@streamdown/*` packages, and formulas also need KaTeX CSS. The caret appears only when two conditions hold together: the `caret` prop is set and `isAnimating` is on. The repository README does not mention the skill, and `npx skills add vercel/streamdown --skill streamdown` is the generic skills CLI route that the project does not document. The license shows as undetermined in GitHub metadata, so read the `LICENSE` file before use.
How to disable. Delete the `streamdown` folder from the project's skills directory. The `streamdown` package in the dependencies is removed separately with your package manager.
FAQ
How do I install the Streamdown skill?
Copy the `skills/streamdown` folder into the agent's skills directory or run `npx skills add vercel/streamdown --skill streamdown`. The project does not document the command; it is the generic skills CLI route.
Why are Streamdown styles missing?
Tailwind is not scanning the library files. In Tailwind v4 add the line `@source "../node_modules/streamdown/dist/*.js"` to `globals.css`, and in v3 add the path to `content` in `tailwind.config.js`.
How do I show a caret while generating?
Set the `caret` prop to `block` or `circle` and turn on `isAnimating` for the last assistant message. Without both the caret does not show.
Which plugins does Streamdown have?
Four: `@streamdown/code` with Shiki highlighting for 200-plus languages, `@streamdown/mermaid` for diagrams, `@streamdown/math` for KaTeX formulas and `@streamdown/cjk` for Chinese, Japanese and Korean.
What about the modal when a link is clicked?
Link confirmation is on by default. Turn it off with the `linkSafety={{ enabled: false }}` prop if the links in your content are trusted.
Discussion
No questions or reviews yet.
Related
SkillsVercel skills for agents
Agent Skills
Vercel skills: React and Next.js performance, UI checks by guidelines, React Native, component composition, and deployment
A Claude Code skill for React Flow 12: nodes and edges, layout, state, Playwright tests and migration from reactflow.
A skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets
React Email skill for agents
React Email skill
A skill that teaches an agent to build emails with React Email: email-client rules, HTML and text rendering, sending, translations, editor
The skill teaches an agent to build an AI agent chat from 26 Agent Elements components: tool cards, input bar, streaming
Skill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Vercel Streamdown (this card) | yes | 5,757 | |
| Streamdown | no | 363 | a terminal program for streaming Markdown output, not a React library |
| Vercel skills for agents | no | 33,964 | general Vercel skills for React and deploys without Streamdown |
README in short
The README presents Streamdown as a `react-markdown` replacement for streaming answers and lists features: unfinished blocks, GFM, formulas, Mermaid diagrams, Shiki highlighting and protection through `rehype-harden`. Installation with the Tailwind directive, monorepo setup and plugins follow.
README badge
Original SKILL.md
--- name: streamdown description: >- Implement, configure, and customize Streamdown — a streaming-optimized React Markdown renderer with syntax highlighting, Mermaid diagrams, math rendering, and CJK support. Use when working with Streamdown setup, configuration, plugins, styling, security, or integration with AI streaming (e.g., Vercel AI SDK). Triggers on: (1) Installing or setting up Streamdown, (2) Configuring plugins (code, mermaid, math, cjk), (3) Styling or theming Streamdown output, (4) Integrating with AI chat/streaming, (5) Configuring security, link safety, or custom HTML tags, (6) Using carets, static mode, or custom components, (7) Troubleshooting Tailwind, Shiki, or Vite issues. --- # Streamdown Streaming-optimized React Markdown renderer. Drop-in replacement for `react-markdown` with built-in streaming support, security, and interactive controls. ## Quick Setup ### 1. Install ```bash npm install streamdown ``` Optional plugins (install only what's needed): ```bash npm install @streamdown/code @streamdown/mermaid @streamdown/math @streamdown/cjk ``` ### 2. Configure Tailwind CSS (Required) **This is the most commonly missed step.** Streamdown uses Tailwind for styling and the dist files must be scanned. **Tailwind v4** — add to `globals.css`: ```css @source "../node_modules/streamdown/dist/*.js"; ``` Add plugin `@source` lines **only for packages you have installed** (omitting uninstalled plugins avoids Tailwind errors). See plugin pages for exact paths: - Code: `@source "../node_modules/@streamdown/code/dist/*.js";` - CJK: `@source "../node_modules/@streamdown/cjk/dist/*.js";` - Math: `@source "../node_modules/@streamdown/math/dist/*.js";` - Mermaid: `@source "../node_modules/@streamdown/mermaid/dist/*.js";`