Reasoning

Overview

Reasoning shows the model's thinking trace. It auto-opens while the reasoning streams — the label shimmers via the kit's .text-shimmer and a timer counts how long the model thought — then auto-collapses a beat after streaming ends, so the trace tucks away without hiding mid-flow. The panel renders through Response, so reasoning markdown reads in the same voice as the reply.

Usage with the AI SDK

Map reasoning message parts to Reasoning, passing the live streaming flag:

{message.parts.map((part, i) =>
  part.type === "reasoning" ? (
    <Reasoning key={i} isStreaming={part.state === "streaming"}>
      <ReasoningTrigger />
      <ReasoningContent>{part.text}</ReasoningContent>
    </Reasoning>
  ) : null,
)}

Installation

npx morpha-ui add reasoning

API Reference