Markdown

Display rich text with headings, lists, links, and code blocks.

Markdown Rendering

This is a paragraph with bold text, italic text, and links.

  • First item
  • Second item
  • Third item

This is a blockquote with some quoted text.

NameValue
Alpha100
Beta200

Markdown support is already included by default in the Thread component.

Enabling markdown support

Add markdown-text

npx shadcn@latest add @assistant-ui/markdown-text

The @assistant-uinamespace resolves the Radix or Base UI flavor from your project's style through the style-aware registry entry in components.json. Without that entry, add by direct URL instead:

npx shadcn@latest add https://r.assistant-ui.com/base/markdown-text.json

This adds a /components/assistant-ui/markdown-text.tsx file to your project, which you can adjust as needed.

Use it in your application

Pass the MarkdownText component to the MessagePrimitive.Parts component

/components/assistant-ui/thread.tsx
import { MarkdownText } from "@/components/assistant-ui/markdown-text";

const AssistantMessage: FC = () => {
  return (
    <MessagePrimitive.Root className="...">
      <div className="...">
        <MessagePrimitive.Parts>
          {({ part }) => part.type === "text" ? <MarkdownText /> : null}
        </MessagePrimitive.Parts>
      </div>
      <AssistantActionBar />

      <BranchPicker className="..." />
    </MessagePrimitive.Root>
  );
};

Syntax highlighting

Syntax Highlighting is not included by default, see Syntax Highlighting to learn how to add it.