import { MessageTimingSample } from "@/components/docs/samples/message-timing";

Getting Started#

Add message-timing#

<InstallCommand shadcn={["message-timing"]} />

This adds a /components/assistant-ui/message-timing.tsx file to your project.

Use in your application#

Place MessageTiming inside ActionBarPrimitive.Root in your thread.tsx. It will inherit the action bar's auto-hide behaviour and only renders after the stream completes.

import { ActionBarPrimitive } from "@assistant-ui/react";
import { MessageTiming } from "@/components/assistant-ui/message-timing";

const AssistantActionBar: FC = () => {
  return (
    <ActionBarPrimitive.Root
      hideWhenRunning
      autohide="not-last"
      <ActionBarPrimitive.Copy />
      <ActionBarPrimitive.Reload />
      <MessageTiming />
    </ActionBarPrimitive.Root>
  );
};

What It Shows#

The badge displays totalStreamTime inline and reveals a popover on hover with the full breakdown:

Accuracy#

Timing accuracy depends on how your backend is connected.

Data Stream (accurate)#

When using the Data Stream protocol on the backend (via assistant-stream), token counts come directly from the model's usage data sent in step-finish chunks. The tokensPerSecond metric is exact whenever your backend reports outputTokens.

Vercel AI SDK (estimated)#

When using the AI SDK integration (useChatRuntime), token counts are estimated client-side using a 4 characters per token approximation. This can overcount significantly for short messages.

API Reference#

MessageTiming component#

Renders null until totalStreamTime is available (i.e., while streaming or for user messages).

For the underlying useMessageTiming() hook, field definitions, and runtime-specific setup (LocalRuntime, ExternalStore, etc.), see the Message Timing guide.

Related#

• Message Timing guide — useMessageTiming() hook, runtime support table, and custom timing UI
• Thread — The action bar context that MessageTiming is typically placed inside