import { MarkdownSample } from "@/components/pages/docs/samples/markdown";
import { PreviewCode } from "@/components/pages/docs/preview-code.server";
import { MarkdownCodeBlockSample } from "@/components/pages/docs/samples/markdown/code-block-and-copy";
import { MarkdownRichDocumentSample } from "@/components/pages/docs/samples/markdown/rich-document";
import { MarkdownStreamingSample } from "@/components/pages/docs/samples/markdown/streaming-markdown";
import { MarkdownGfmSample } from "@/components/pages/docs/samples/markdown/gfm-extras";

Enabling markdown support#

<InstallCommand shadcn={["markdown-text"]} />

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

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>
  );
};

Examples#

Code Block and Copy#

Fenced code blocks get a language header and a copy button, and inline code keeps compact styling. The preview also uses syntax highlighting, which the copied component does not include by default.

Rich Document#

The renderer shows headings, emphasis, links, nested lists, a blockquote, a divider, and a table from one completed response.

Streaming Markdown#

Select Replay. The markdown increases in steps, and the text part shows a running status until the last chunk.

GitHub Flavored Markdown#

Task-list checkboxes, strikethrough text, a bare autolink, and an aligned table show through the built-in GFM support.

Syntax highlighting#

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

Related Components#

• Syntax Highlighting - Add code highlighting to markdown
• Mermaid - Render diagrams in markdown code blocks