Dosu Logo
Home
Documents
markdown
markdown
Type
External
Status
Published
Created
Mar 17, 2026
Updated
Mar 17, 2026

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

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

Enabling markdown support#

### Add `markdown-text`

<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

// @filename: /components/assistant-ui/markdown-text.tsx
import { FC } from "react";
export const MarkdownText: FC = () => null;

// @filename: ./thread.tsx
import { FC } from "react";
import { MessagePrimitive } from "@assistant-ui/react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";

const AssistantActionBar: FC = () => null;
const BranchPicker: FC<{ className?: string }> = () => null;

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