Search

The "Searched N websites" line with ChatGPT's dotted globe or stacked favicons.

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

import { ChatgptSearch } from "../components/chatgpt-search";
import { CHATGPT_STORY_SITES } from "../constants/chatgpt-story";

export default function ChatgptSearchExample() {
  return (
    <Card className="border-chatgpt-border bg-chatgpt-bg font-chatgpt text-chatgpt-fg flex w-full min-w-0 flex-col items-start gap-3 rounded-2xl border p-6 text-base ring-0">
      <ChatgptSearch websites={1} />
      <ChatgptSearch sites={CHATGPT_STORY_SITES.slice(0, 3)} websites={3} />
      <ChatgptSearch sites={CHATGPT_STORY_SITES} websites={6} />
    </Card>
  );
}

$ bunx --bun shadcn@latest add @notra/chatgpt-search

ChatgptSearch is a ghost shadcn Button that pluralizes “website” for you. It takes every Button prop, so you can wire it to your own panel. ChatgptActivity uses it as its trigger.

Prop	Default	Description
`websites`		The number of websites searched.
`sites`		Optional `{ domain, favicon? }` list. The first three favicons stack in front of the label, in place of the globe.

Used in

ChatGPT

A full recreation of a ChatGPT conversation with thinking, web search, reasoning and the model picker.