Legacy/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-markdownSetup styles
{
plugins: [
require("tailwindcss-animate"),
require("@assistant-ui/react-ui/tailwindcss")
],
}{
plugins: [
require("tailwindcss-animate"),
require("@assistant-ui/react-ui/tailwindcss")({ shadcn: true })
],
}import "@assistant-ui/react-ui/styles/index.css";
import "@assistant-ui/react-ui/styles/markdown.css";Define a MarkdownText component
import { makeMarkdownText } from "@assistant-ui/react-ui";
export const MarkdownText = makeMarkdownText();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 } }}>
);
};