LaTeX

Render LaTeX mathematical expressions in chat messages using KaTeX.

LaTeX rendering is not enabled in markdown by default.

Install dependencies

npm i katex rehype-katex remark-math

Add KaTeX CSS to your layout

/app/layout.tsx

import "katex/dist/katex.min.css";

Update `markdown-text.tsx`

/components/assistant-ui/markdown-text.tsx

import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";

const MarkdownTextImpl = () => {
  return (
    <MarkdownTextPrimitive
      remarkPlugins={[remarkGfm, remarkMath]} // add remarkMath
      rehypePlugins={[rehypeKatex]}           // add rehypeKatex
      className="aui-md"
      components={defaultComponents}
    />
  );
};

export const MarkdownText = memo(MarkdownTextImpl);

Examples

Inline math

Single dollar signs for inline math: $E = mc^2$

Block math

Double dollar signs for block math:

$$
\int_{a}^{b} f(x) \, dx = F(b) - F(a)
$$

Fenced code blocks

Fenced code blocks with the math language identifier:

```math
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
```