skills.rest
Foodshareclub
FoodshareclubOFFICIAL
Explore all skills by this author →
Website𝕏@foodshareclubGitHub

streamdown

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

Updated Dec 17, 2022
Search Tags:#markdown#react#mermaid#streaming#ai chat#syntax highlighting#streamdown
One-click install
npx skills add https://github.com/Foodshareclub/foodshare-web --skill streamdown-foodshareclub
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: streamdown
Source: https://github.com/Foodshareclub/foodshare-web/tree/main/.agents/skills/streamdown
Command: npx skills add https://github.com/Foodshareclub/foodshare-web --skill streamdown-foodshareclub

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill 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: incomplete syntax breaks layouts, code blocks flicker, and raw HTML introduces security risks. This Skill guides you through setting up Streamdown, a drop-in react-markdown replacement built for streaming, with correct Tailwind configuration, plugins, and security hardening. ## Core Features & Use Cases - Streaming Markdown Rendering: Renders incomplete Markdown gracefully with remend auto-completion, block/circle carets, and per-block memoization for AI chat interfaces. - Plugin System: Add syntax highlighting (Shiki, 200+ languages), Mermaid diagrams, KaTeX math, and CJK text support via optional packages. - Security Controls: Configure link safety modals, protocol/prefix restrictions via rehype-harden, custom HTML tag whitelists, and URL transforms for AI-generated content. - Use Case: You are building a chat UI with the Vercel AI SDK and need assistant messages to render Markdown live as tokens arrive, with a blinking caret, copyable code blocks, and a confirmation modal before users open external links. ## Quick Start Ask the AI to set up Streamdown in your React chat component with the code plugin, Tailwind source configuration, and a block caret for streaming responses.

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 AI chat app?▼

Use Streamdown with the useChat hook from the Vercel AI SDK. Pass each message's content as children and set isAnimating to true while the assistant response is streaming, which enables remend auto-completion of incomplete Markdown.

How do I add syntax highlighting and Mermaid diagrams to Streamdown?▼

Install @streamdown/code and @streamdown/mermaid, then pass them via the plugins prop: plugins={{ code, mermaid }}. Code highlighting uses Shiki with 200+ lazy-loaded languages, and Mermaid supports flowcharts, sequence, and other diagram types.

Why are Streamdown styles not applying with Tailwind CSS?▼

Tailwind must scan Streamdown's dist files. For Tailwind v4, add @source "../node_modules/streamdown/dist/*.js"; to globals.css. For Tailwind v3, add ./node_modules/streamdown/dist/*.js to the content array in tailwind.config.js.

Why is the caret not showing during streaming in Streamdown?▼

The caret requires both the caret prop ("block" or "circle") and isAnimating={true} to be set simultaneously. The caret disappears automatically when streaming stops and isAnimating becomes false.

How do I secure Streamdown for AI-generated content?▼

Configure rehype-harden with allowedProtocols, allowedLinkPrefixes, and allowedImagePrefixes, keep the link safety modal enabled with an onLinkCheck domain safelist, and disable data: images. A full production config example is included in the security reference.

Why is math not rendering in Streamdown?▼

The math plugin requires importing the KaTeX stylesheet: import "katex/dist/katex.min.css". Also note that Streamdown uses double dollar signs ($$) by default; single dollar syntax is disabled to avoid currency conflicts unless singleDollarTextMath is enabled.

Related Skills

Explore More Software Engineering Skills→
openaiopenai
5.3k

ai-elements

Implements AI-native React interfaces using the AI Elements component library built on shadcn/ui.

Official
Intermediate
NickEsColRNickEsColR

building-streamlit-chat-ui

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

Community
Intermediate
oakossoakoss
14

secure-ai

Implement defense-in-depth security for LLM pipelines and AI integrations.

Official
Advanced
nguyenquy0710nguyenquy0710

Lib/Markdown Folder - Markdown Processing

Convert Markdown content to HTML with syntax highlighting for code blocks.

Community
Basic