Setting up Streamdown in React

Start by installing Streamdown:

npm i streamdown

If you're making a chatbot, then you'll probably want to do this as a part of

AI Elements provided by Vercel.

npx ai-elements@latest add message

Use the <Streamdown /> component to render Markdown content:

import Streamdown from "streamdown";

// This is installed by default
import remarkGfm from "remark-gfm";

// This isn't installed by default
import remarkBreaks from "remark-breaks";

import { MyCustomLink } from "@/components/my-custom-link";

type MarkdownViewProps = {
  content: string;
}

export function MarkdownView({ content }: MarkdownViewProps) {
  return (
    <Streamdown
      // Optionally install plugins
      remarkPlugins={[remarkGfm, remarkBreaks]}
      // Optionally provide a component map
      components={{
        a: MyCustomLink,
      }}
    >
      {content}
    </Streamdown>
  )
}

See Getting Started with Streamdown

See using Streamdown