Markdown

Allow the assistant to display rich text using markdown.

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

Enabling markdown support

Add `markdown-text`

npx shadcn@latest add "https://r.assistant-ui.com/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.Content component

/components/assistant-ui/thread.tsx

import { MarkdownText } from "@/components/assistant-ui/markdown-text";
 
const AssistantMessage: FC = () => {
  return (
    <MessagePrimitive.Root className="...">
      <div className="...">
        <MessagePrimitive.Content components={{ Text: MarkdownText }} />
      </div>
      <AssistantActionBar />
 
      <BranchPicker className="..." />
    </MessagePrimitive.Root>
  );
};

Syntax highlighting

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

AssistantSidebar

Previous Page

Syntax Highlighting

Next Page