CopilotKit

Reasoning

Surface the agent's thinking chain in the chat — default or fully custom.

"use client";// Agentic Chat (Reasoning) — built-in-agent variant.//// The built-in tanstack/openai factory normally uses a non-reasoning// model (gpt-4o) so REASONING_* events never flow. This demo points at// a dedicated route (`/api/copilotkit-reasoning`) whose factory uses a// reasoning-capable model (`gpt-5.2`) with `reasoning_effort: "low"`.// The runtime's tanstack converter translates the upstream reasoning// events into AG-UI REASONING_START / REASONING_MESSAGE_CONTENT /// REASONING_END, and CopilotKit renders them via the// `reasoningMessage` slot — overridden below for visual emphasis.import React from "react";import {  CopilotKit,  CopilotChat,  CopilotChatReasoningMessage,} from "@copilotkit/react-core/v2";import { ReasoningBlock } from "./reasoning-block";export default function AgenticChatReasoningDemo() {  return (    <CopilotKit      runtimeUrl="/api/copilotkit-reasoning"      agent="agentic-chat-reasoning"    >      <div className="flex justify-center items-center h-screen w-full">        <div className="h-full w-full max-w-4xl">          <Chat />        </div>      </div>    </CopilotKit>  );}function Chat() {  return (    <CopilotChat      agentId="agentic-chat-reasoning"      className="h-full rounded-2xl"      messageView={{        reasoningMessage: ReasoningBlock as typeof CopilotChatReasoningMessage,      }}    />  );}

What is this?#

Some models (OpenAI's o1, o3, and o4-mini, Anthropic's thinking variants) emit reasoning tokens, internal chain-of-thought traces that explain how the model is working toward its answer. CopilotKit surfaces these as first-class messages: when a REASONING_MESSAGE_* event arrives from the agent, the chat renders it inline so the user can follow the agent's thinking.

Reasoning isn't a custom-renderer plumb-in; it's a dedicated message type on the chat view. You can either accept the built-in rendering or override the reasoningMessage slot with your own component.

When should I use this?#

Expose reasoning in the UI when you want to:

  • Give users real-time insight into the agent's thought process
  • Show progress on long or multi-step problems
  • Debug prompt behavior during development
  • Brand the reasoning card to match the rest of your product

Default reasoning rendering (zero-config)#

Out of the box, reasoning events render inside CopilotKit's built-in CopilotChatReasoningMessage card:

  • A "Thinking…" label with a pulsing indicator while the model reasons.
  • Auto-expanded content so users can follow the chain of thought live.
  • Collapses to "Thought for X seconds" once reasoning finishes, with a chevron to re-expand.
  • Reasoning text rendered as Markdown.

No configuration is needed; if your model emits reasoning tokens, the card appears automatically:

page.tsx
          <CopilotChat            agentId="reasoning-default-render"            className="h-full rounded-2xl"          />

Here's what the built-in card looks like while the model thinks through a multi-step problem:

"use client";// Reasoning (Default Render) — built-in-agent variant.//// Same backend (`/api/copilotkit-reasoning`, agent// `reasoning-default-render`, gpt-5.2 with reasoning_effort=low) as the// reasoning-custom demo, but this page passes NO custom// `reasoningMessage` slot. CopilotKit's built-in// `CopilotChatReasoningMessage` renders the chain as a collapsible card// with a "Thinking…" / "Thought for X" header — the zero-config path.import React from "react";import { CopilotKit, CopilotChat } from "@copilotkit/react-core/v2";export default function ReasoningDefaultRenderDemo() {  return (    <CopilotKit      runtimeUrl="/api/copilotkit-reasoning"      agent="reasoning-default-render"    >      <div className="flex justify-center items-center h-screen w-full">        <div className="h-full w-full max-w-4xl">          <CopilotChat            agentId="reasoning-default-render"            className="h-full rounded-2xl"          />        </div>      </div>    </CopilotKit>  );}

Custom reasoning rendering#

For full control over the reasoning card, pass a component to the reasoningMessage slot on messageView. Your component receives the ReasoningMessage object (.content holds the streaming text), the full messages list, and isRunning, enough to decide whether this block is still streaming and whether it's the active trailing message:

import React from "react";import {  CopilotKit,  CopilotChat,  CopilotChatReasoningMessage,} from "@copilotkit/react-core/v2";import { ReasoningBlock } from "./reasoning-block";export default function AgenticChatReasoningDemo() {  return (    <CopilotKit      runtimeUrl="/api/copilotkit-reasoning"      agent="agentic-chat-reasoning"    >      <div className="flex justify-center items-center h-screen w-full">        <div className="h-full w-full max-w-4xl">          <Chat />        </div>      </div>    </CopilotKit>  );}function Chat() {  return (    <CopilotChat      agentId="agentic-chat-reasoning"      className="h-full rounded-2xl"      messageView={{        reasoningMessage: ReasoningBlock as typeof CopilotChatReasoningMessage,      }}    />  );}
"use client";// Custom `reasoningMessage` slot renderer for built-in-agent's// reasoning chat demo. Surfaces the agent's chain-of-thought inline// with a tagged amber banner so the thinking phase is always visible.import React from "react";import type { ReasoningMessage, Message } from "@ag-ui/core";export function ReasoningBlock({  message,  messages,  isRunning,}: {  message: ReasoningMessage;  messages?: Message[];  isRunning?: boolean;}) {  const isLatest = messages?.[messages.length - 1]?.id === message.id;  const isStreaming = !!(isRunning && isLatest);  const hasContent = !!(message.content && message.content.length > 0);  return (    <div      data-testid="reasoning-block"      className="my-2 rounded-xl border border-[#DBDBE5] bg-[#BEC2FF1A] px-3.5 py-2.5 text-sm"    >      <div className="flex items-center gap-2 font-medium text-[#010507]">        <span className="inline-block rounded-full border border-[#BEC2FF] bg-white px-2 py-0.5 text-[10px] uppercase tracking-[0.14em] text-[#57575B]">          Reasoning        </span>        <span className="text-[#57575B]">          {isStreaming ? "Thinking…" : hasContent ? "Agent reasoning" : "…"}        </span>      </div>      {hasContent && (        <div className="mt-1.5 whitespace-pre-wrap italic text-[#57575B]">          {message.content}        </div>      )}    </div>  );}

The ReasoningBlock (imported above) renders the reasoning as an amber-tagged inline banner, intentionally louder than the default card so the thinking chain is the focal UI of the demo. Swap in your own component to match your product's tone.

The messageView.reasoningMessage slot accepts either a full component (as shown) or a sub-slot object like { header, contentView, toggle } if you just want to tweak parts of the default card. See the reference docs for sub-slot props.