logoassistant-ui
Styled Components

Markdown

Allow the assistant to display rich text using markdown.

Enabling markdown support

Install @assistant-ui/react-markdown

npm install @assistant-ui/react-markdown

Setup styles

/tailwind.config.ts
{
  plugins: [
    require("tailwindcss-animate"),
    require("@assistant-ui/react/tailwindcss"),
    require("@assistant-ui/react-markdown/tailwindcss"),
  ],
}

Define a MarkdownText component

@/components/markdown-text.tsx
import {  } from "@assistant-ui/react-markdown";
 
export const  = ();

Use it with Thread

Pass the MarkdownText component to your Thread component.

import { MarkdownText } from "@/components/markdown-text";
 
const Home = () => {
  return (
    <Thread assistantMessage={{ components: { Text: MarkdownText } }}>
  );
};

Previous

AssistantModal

Next

Decomposition

On this page

Enabling markdown supportInstall @assistant-ui/react-markdownSetup stylesDefine a MarkdownText componentUse it with Thread
Edit on Github