Skip to main content
The ThinkingBlock component provides a visual representation of AI Models’ reasoning process during message generation. It features a collapsible accordion interface, auto-scrolling for real-time content updates, and clear state indicators for active thinking vs completed thoughts.

​
Installation

Install the ThinkingBlock component using the shadcn CLI: 
pnpm dlx shadcn@latest add https://registry.intface.io/thinking-block.json

​
Usage

import ThinkingBlock from "@/components/chat/thinking-block";

export default function ChatMessage() {
  const message = {
    id: "1",
    role: "assistant",
    parts: [
      {
        type: "reasoning",
        text: "Let me think about this problem step by step..."
      },
      {
        type: "text", 
        text: "Here's my response based on my reasoning."
      }
    ]
  };

  const isThinkingDone = true;

  return (
    <div className="chat-message">
      <ThinkingBlock 
        message={message}
        isThinkingDone={isThinkingDone}
      />
    </div>
  );
}

​
Props

​
message
UIMessage
required
The message object containing reasoning parts. The component extracts and displays text from parts with type “reasoning”.
​
isThinkingDone
boolean
required
Controls the accordion trigger text and state. Shows “Thinking” when false (active) and “Thoughts” when true (completed).