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
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.