assistant-ui Markdown

MarkdownTextPrimitive

@assistant-ui/react-markdown

MessagePrimitive.Parts

References

• ./references/markdown-text.md -- MarkdownTextPrimitive setup
• ./references/syntax-highlighting.md -- code highlighting (react-shiki / react-syntax-highlighter)
• ./references/latex-mermaid.md -- LaTeX and Mermaid
• ./references/streamdown.md -- StreamdownTextPrimitive alternative

Orientation

MarkdownTextPrimitive

npx assistant-ui@latest add markdown-text

components/assistant-ui/markdown-text.tsx

MarkdownText

defaultComponents

unstable_memoizeMarkdownComponents

MarkdownText

text

MessagePrimitive.Parts

import "@assistant-ui/react-markdown/styles/dot.css";
import { MarkdownTextPrimitive } from "@assistant-ui/react-markdown";
import { MessagePrimitive } from "@assistant-ui/react";
import remarkGfm from "remark-gfm";
import { memo } from "react";

const MarkdownTextImpl = () => (
  <MarkdownTextPrimitive
    remarkPlugins={[remarkGfm]}
    className="aui-md"
    components={defaultComponents}
  />
);

export const MarkdownText = memo(MarkdownTextImpl);

<MessagePrimitive.Parts>
  {({ part }) => (part.type === "text" ? <MarkdownText /> : null)}
</MessagePrimitive.Parts>;

rehypePlugins

componentsByLanguage

SyntaxHighlighter

preprocess

StreamdownTextPrimitive

@assistant-ui/react-streamdown

Common Gotchas

• Nothing renders / plain text shows. The

  text

  branch must return

  MarkdownText

  ; returning

  <p>{part.text}</p>

  bypasses markdown entirely.
• No syntax highlighting. Highlighting is not bundled. Register a

  SyntaxHighlighter

  in

  defaultComponents

  (react-shiki recommended) per the syntax-highlighting reference.
• KaTeX has no styling. Import

  katex/dist/katex.min.css

  once at the app root;

  rehypeKatex

  only emits markup.
• Mermaid parses partial diagrams while streaming. Gate rendering on stream completion (the reference uses

  useAuiState

  to detect the closing fence) instead of rendering every delta.
• Memoization export name. The package exports

  unstable_memoizeMarkdownComponents

  ; the generated file aliases it to

  memoizeMarkdownComponents

  .
• Unstyled by default. The

  aui-md

  class and

  styles/dot.css

  provide base styling; add your own Tailwind/CSS otherwise.

Related Skills

• primitives -- general UI composition (

  ThreadPrimitive

  ,

  ComposerPrimitive

  ,

  MessagePrimitive.Parts

  ) for assembling the message and the rest of the chat surface around the markdown text branch.