@assistant-ui/react-markdown#
react-markdown integration for @assistant-ui/react. Renders the assistant's markdown output as React components inside MessagePrimitive.Parts.
When to use this#
| Package | Best for |
|---|---|
@assistant-ui/react-markdown | Lightweight rendering; bring your own syntax highlighter. |
@assistant-ui/react-streamdown | Feature-rich with built-in Shiki, KaTeX, and Mermaid. |
@assistant-ui/react-syntax-highlighter | Pair with react-markdown when you only need code-block highlighting. |
Installation#
npm install @assistant-ui/react @assistant-ui/react-markdown react-markdown remark-gfm
Usage#
import { MarkdownTextPrimitive } from "@assistant-ui/react-markdown";
import remarkGfm from "remark-gfm";
export const MarkdownText = () => (
<MarkdownTextPrimitive remarkPlugins={[remarkGfm]} className="aui-md" />
);
Plug <MarkdownText /> into MessagePrimitive.Parts as the Text component to render markdown for every text part.
Full reference at assistant-ui.com/docs/ui/markdown.