import { MarkdownSample } from "@/components/docs/samples/markdown";

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

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