Agentic

Agent Thinking

Shows a model working before it answers: the current step, the sources it reads, and its reasoning, folding into Thought for Ns.

idle

Usage

import { AgentThinking } from "@mizen-labs/ui";

With the AI SDK

Join the reasoning parts of the latest assistant message. It is thinking while the request is pending or streaming and no answer text has arrived, so the thinking indicator also covers the wait before the first token.

import { useChat } from "@ai-sdk/react";
import { AgentThinking } from "@mizen-labs/ui";

export function AssistantThinking() {
	const { messages, status } = useChat();
	const reply = messages.findLast((message) => message.role === "assistant");
	const parts = reply?.parts ?? [];
	const reasoning = parts
		.flatMap((part) => (part.type === "reasoning" ? [part.text] : []))
		.join("\n\n");
	const answering = parts.some((part) => part.type === "text" && part.text);
	// Thinking until the first words of the answer arrive.
	const thinking =
		(status === "submitted" || status === "streaming") && !answering;
	if (!(thinking || reasoning)) return null;
	return (
		<AgentThinking
			content={reasoning}
			status={thinking ? "streaming" : "complete"}
		/>
	);
}

With TanStack AI

Reasoning arrives as thinking parts with content. The same rule decides when thinking ends: the first answer text.

import { fetchServerSentEvents, useChat } from "@tanstack/ai-react";
import { AgentThinking } from "@mizen-labs/ui";

export function AssistantThinking() {
	const { messages, status } = useChat({
		connection: fetchServerSentEvents("/api/chat"),
	});
	const reply = messages.findLast((message) => message.role === "assistant");
	const parts = reply?.parts ?? [];
	const reasoning = parts
		.flatMap((part) => (part.type === "thinking" ? [part.content] : []))
		.join("\n\n");
	const answering = parts.some((part) => part.type === "text" && part.content);
	const thinking =
		(status === "submitted" || status === "streaming") && !answering;
	if (!(thinking || reasoning)) return null;
	return (
		<AgentThinking
			content={reasoning}
			status={thinking ? "streaming" : "complete"}
		/>
	);
}

Examples

Recommendations

Guidance	Practice
Do	Pass the reasoning so far with status streaming, name the current step in stage, and set status to complete when the answer starts. Pass duration when showing a reply from history.

Usage boundaries

Guidance	Boundary
Scope	The application owns the reasoning stream and decides which steps to name. Agent Thinking shows them; it does not run tools or fetch sources.
Scope	Show reasoning the model chose to expose. Some providers only return a summary, or nothing.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`status`	`"streaming" \| "complete"`	`—`	streaming shows the current step with a thinking indicator and the newest lines of reasoning; complete folds into Thought for Ns, which opens to the full reasoning.
`content`	`string`	`""`	The reasoning so far. Paragraphs are separated by blank lines; new words resolve out of blur.
`stage`	`string`	`"Thinking"`	What the model is doing now. Each change is announced politely.
`sources`	`readonly StreamingTextSource[]`	`[]`	Sources the model is reading, shown as citation chips as they arrive.
`duration`	`number`	`Measured`	Seconds spent thinking. Measured while the component watches the stream; pass it for a reply loaded from history.