Math

npx shadcn@latest add "@assistant-ui/elements-math-block"

npx assistant-ui@latest init

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/ai-sdk";

export default function App() {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({ api: "/api/chat" }),
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {/* your components */}
    </AssistantRuntimeProvider>
  );
}

npx shadcn@latest add "@assistant-ui/elements-math-block"

An answer shown as its working rather than its final result: a short list of steps, each an expression with an optional note underneath, revealed only as far as you say. With a runtime the steps arrive from a tool call as the model streams them; standalone you hold the step array and the reveal count yourself.

Getting started

"use client";

import { defineToolkit } from "@assistant-ui/react";
import { MathBlock } from "@/components/assistant-ui/elements/math-block";

export const toolkit = defineToolkit({
  show_derivation: {
    type: "backend",
    render: ({ args }) => {
      const steps = args.steps ?? [];
      return (
        <MathBlock
          label={args.label}
          steps={steps}
          visibleSteps={steps.length}
        />
      );
    },
  },
});

import {
  AssistantRuntimeProvider,
  AuiConfig,
  Tools,
} from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/ai-sdk";
import { toolkit } from "./toolkit";

export function MyRuntimeProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  const runtime = useChatRuntime();
  const config = AuiConfig({ tools: Tools({ toolkit }) });
  return (
    <AssistantRuntimeProvider runtime={runtime} config={config}>
      {children}
    </AssistantRuntimeProvider>
  );
}

"use client";

import {
  MathBlock,
  type MathStep,
} from "@/components/assistant-ui/elements/math-block";

const steps: readonly MathStep[] = [
  { expression: "p′(x) = p(x)·(1 − p(x))", note: "the derivative" },
  {
    expression: "max p′(x) = 0.25 at x = 0",
    note: "steepest at the midpoint",
  },
];

export function Derivation() {
  return (
    <MathBlock label="derivation" steps={steps} visibleSteps={steps.length} />
  );
}

"use client";

import { useEffect, useState } from "react";

export function Derivation() {
  const [visibleSteps, setVisibleSteps] = useState(0);

  useEffect(() => {
    if (visibleSteps >= steps.length) return;
    const id = setTimeout(() => setVisibleSteps((n) => n + 1), 900);
    return () => clearTimeout(id);
  }, [visibleSteps]);

  return (
    <MathBlock label="derivation" steps={steps} visibleSteps={visibleSteps} />
  );
}

Anatomy

<div data-slot="math-block">
  {/* optional label, monospace */}
  <span>{/* label */}</span>

  {/* one row per visible step, in array order */}
  <div>
    <span>{/* step.expression, a ReactNode */}</span>
    <span>{/* optional step.note */}</span>
  </div>
</div>

visibleSteps is floored and clamped into 0…steps.length: NaN or a negative number maps to 0, and any value past the array length maps to the array length, so an out of range or fractional count never throws and simply rounds down to a whole step. A step beyond the visible count is not in the DOM at all, not merely hidden, and each newly shown step fades and slides in over 300ms. label renders only when it is a truthy string.

Examples

Compose an expression with Frac, Sup, and Sub

A tool call can only stream plain text into expression, so a fraction or a superscript arriving at runtime renders as plain characters rather than a stacked layout. Building the richer visual with Frac, Sup, and Sub is a standalone concern: assemble the JSX yourself and pass it as a step's expression, and it renders the same way in either lane.

import { Frac, Sub, Sup } from "@/components/assistant-ui/elements/math-block";

const steps = [
  {
    expression: (
      <>
        p(x) ={" "}
        <Frac
          over={<>1</>}
          under={
            <>
              1 + e<Sup>−x</Sup>
            </>
          }
        />
      </>
    ),
    note: "the logistic",
  },
  {
    expression: (
      <>
        max<Sub>x</Sub> p′(x) = 0.25
      </>
    ),
  },
];

Where the steps come from

show_derivation: tool({
  description: "Show a worked, step by step derivation.",
  inputSchema: z.object({
    label: z.string().optional(),
    steps: z.array(
      z.object({ expression: z.string(), note: z.string().optional() }),
    ),
  }),
  execute: async (args) => args,
}),

async function loadDerivation(question: string) {
  const { steps: nextSteps } = await askForWorkedAnswer(question);
  setSteps(nextSteps);
  setVisibleSteps(0);
}

Restyle the block

Both lanes take className on the root. The label uses the shared mono surface from surfaces.tsx, so restyling that token restyles every element that uses it.

<MathBlock className="max-w-none gap-4" /* ... */ />

API reference