skills.rest
ahemdatef
ahemdatefCOMMUNITY
Explore all skills by this author →
GitHub

streamdown

Implement and configure Streamdown, a streaming-optimized React Markdown renderer with plugins.

Updated May 12, 2026
Search Tags:#markdown#react#next.js#streaming#ai chat#syntax highlighting#streamdown
One-click install
npx skills add https://github.com/ahemdatef/Gradution-Project-iLMS-Software --skill streamdown-ahemdatef
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: streamdown
Source: https://github.com/ahemdatef/Gradution-Project-iLMS-Software/tree/main/frontend/.agents/skills/streamdown
Command: npx skills add https://github.com/ahemdatef/Gradution-Project-iLMS-Software --skill streamdown-ahemdatef

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires streamdown, @streamdown/code, @streamdown/mermaid, @streamdown/math, @streamdown/cjk, and includes references (resource) and assets (resource) components.

What problem does it solve? Rendering AI-generated Markdown in React apps is tricky when content streams in token by token, leaving incomplete syntax, broken code blocks, and unstyled output. This Skill guides you through installing, configuring, styling, and securing Streamdown so streamed Markdown renders correctly in real time. ## Core Features & Use Cases - Streaming Markdown Rendering: Drop-in replacement for react-markdown with remend-based completion of incomplete Markdown, caret cursors, and per-block memoization. - Plugin System: Add syntax highlighting (Shiki), Mermaid diagrams, KaTeX math, and CJK text support via optional packages. - Security & Styling Controls: Configure link safety modals, protocol restrictions, custom HTML tags, CSS variables, and data-attribute selectors. - Use Case: You are building an AI chat interface with the Vercel AI SDK and need assistant messages to render Markdown with code highlighting and a blinking caret while streaming, plus a confirmation modal before users open external links. ## Quick Start Ask the AI to set up Streamdown in your Next.js chat app with the code highlighting plugin, Tailwind configuration, and a block caret during streaming.

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 in a React chat app?▼

Use Streamdown as a drop-in replacement for react-markdown and pass the streaming message content as children. Set isAnimating while the response streams and optionally add a caret prop for a visual cursor at the end of the output.

How do I add syntax highlighting to Streamdown code blocks?▼

Install the @streamdown/code package and pass it via the plugins prop. It uses Shiki with over 200 lazy-loaded languages, and you can customize light and dark themes with createCodePlugin or the shikiTheme prop.

Why are Streamdown styles not showing in Tailwind?▼

Tailwind does not scan node_modules by default, so Streamdown's dist files are missed. In Tailwind v4 add an @source directive for streamdown/dist/*.js in globals.css; in v3 add the path to the content array in tailwind.config.js.

Does Streamdown work with the Vercel AI SDK?▼

Yes, Streamdown integrates directly with the useChat hook from @ai-sdk/react. Map over messages, render each with Streamdown, and set isAnimating on the last assistant message while isLoading is true.

Why is Streamdown math rendering not working?▼

The math plugin requires importing katex/dist/katex.min.css in your app. Also note that Streamdown uses double dollar signs for math by default; single dollar syntax is disabled to avoid conflicts with currency text.

How do I disable the link confirmation modal in Streamdown?▼

The link safety modal is enabled by default. Disable it by passing linkSafety={{ enabled: false }}, or keep it enabled and use onLinkCheck to safelist trusted domains so those links open without confirmation.

Related Skills

Explore More Software Engineering Skills→
PatternsDevPatternsDev
235

ai-ui-patterns

Provide reusable React UI patterns for AI chat interfaces with Vercel AI SDK.

Official
Advanced
streamlitstreamlit
224

building-streamlit-chat-ui

Build Streamlit chat interfaces with st.chat_message and st.chat_input.

Official
Intermediate
temple-slopetemple-slope

gws-modelarmor-sanitize-prompt

Sanitize user prompts by applying a Model Armor template.

Community
Intermediate
FoodshareclubFoodshareclub

streamdown

Implement and configure Streamdown, a streaming-optimized React Markdown renderer with plugins.

Official
Intermediate