AI Reasoning Block

AI chats 11

About

A restrained collapsible thinking section for AI responses that automatically closes when the final answer begins streaming.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Reasoning Block to your project and fits it to your theme.

Code

How AI Reasoning Block is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import * as React from "react";
import { ReasoningBlock } from "@/components/ui/ai-reasoning-block";

export default function ReasoningBlockDemo() {
  const [streaming, setStreaming] = React.useState(false);
  return <div className="grid min-h-[520px] w-full place-items-center bg-white p-5 dark:bg-zinc-950"><div className="w-full max-w-2xl space-y-5"><ReasoningBlock answerStreaming={streaming}>I’ll compare the account activity, isolate the unusual spike, and explain the most likely cause without over-indexing on a single data point.</ReasoningBlock><button onClick={() => setStreaming((v) => !v)} className="rounded-lg bg-zinc-950 px-3 py-2 text-xs text-white dark:bg-white dark:text-zinc-950">{streaming ? "Reset" : "Start answer"}</button>{streaming ? <p className="text-sm leading-7 text-zinc-700 dark:text-zinc-300">The increase came primarily from scheduled imports…</p> : null}</div></div>;
}