AI Reasoning

AI chats 19

About

Collapsible model-reasoning trace that times itself while streaming and folds away once the answer lands. Respects prefers-reduced-motion.

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

Code

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

Usage.tsx

"use client";

import Component from "@/components/ui/ai-reasoning";

export default function DemoOne() {
  return (
    <div className="flex min-h-[440px] w-full items-center justify-center bg-background p-10">
      <div className="w-full max-w-lg rounded-2xl border bg-card p-6 shadow-sm">
        <p className="font-semibold text-foreground text-sm">
          Why is Q3 revenue lower than bookings?
        </p>

        <div className="mt-4">
          <Component collapseWhenDone={false} defaultOpen duration={4}>
            <p>
              The sheet mixes bookings and recognised revenue in one column, so
              a plain SUM double-counts anything invoiced ahead of delivery.
            </p>
            <p className="mt-2">
              Filtering to recognised rows and summing July through September
              gives 184,200. The bookings figure would have been 221,400.
            </p>
          </Component>
        </div>

        <p className="mt-5 border-t pt-5 text-foreground text-sm leading-relaxed">
          Q3 recognised revenue was <strong>184,200</strong>. The 221,400 you
          were expecting is bookings, which includes 37,200 not yet delivered.
        </p>
      </div>
    </div>
  );
}