Thoughts

The "Show thinking" step with thoughts and the searches Gemini ran.

import { Card } from "@/components/ui/card";

import { GeminiThoughts } from "../components/gemini-thoughts";
import { GEMINI_STORY_THOUGHTS } from "../constants/gemini-story";

export default function GeminiThoughtsExample() {
  return (
    <Card className="border-gemini-border bg-gemini-bg font-gemini flex w-full min-w-0 flex-col gap-4 overflow-hidden rounded-2xl border px-5 py-6 text-base ring-0">
      <GeminiThoughts defaultOpen steps={GEMINI_STORY_THOUGHTS} />
    </Card>
  );
}

$ bunx --bun shadcn@latest add @notra/gemini-thoughts

A shadcn Collapsible, closed by default like Gemini’s own. The trigger is a ghost Button with just the label and a chevron, and its label switches between “Show thinking” and “Hide thinking”. Open, it lists the steps behind a thin rule: thoughts as muted paragraphs, and searches as a “Searching the web” line with the queries as outlined chips. It takes every Collapsible prop, so open, defaultOpen and onOpenChange work. Pass it to the thoughts slot of GeminiMessage.

Used in