shadcn-ui

Markdown

Allow the assistant to display rich text using markdown.

Markdown support is alraedy included in the npx assistant-ui@latest add thread-full template.

Enabling markdown support

Add the `markdown-text` component to your project.

npx assistant-ui@latest add markdown-text

Use it in `Thread.tsx`

Pass the MarkdownText component to the MessagePrimitive.Content component

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

Previous

AssistantSidebar

Next

Custom Scrollbar

On this page

Enabling markdown support Add the markdown-text component to your project.Use it in Thread.tsx