Web search
The query the agent searched for, a loading state while it runs, then the results with their sites.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/web-search-default.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/web-search-default.json
Usage & API
Example
import { WebSearch } from "@/components/ai/web-search-default"
<WebSearch
query="…"
status="searching"
results={[]}
/>Props WebSearch
| Prop | Type & description | Required |
|---|---|---|
query | string | Required |
status | "searching" | "done" | Required |
results | SearchResult[] | Required |
limit | numberHow many sites to show in the collapsed line. | Optional |
defaultOpen | boolean | Optional |
onRetry | () => void | Optional |
onOpen | (result: SearchResult) => void | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
Web search takes query, status, results, and an optional limit, defaultOpen, onRetry and onOpen. Each result is a title and a url. Collapsed, after status is done, it shows up to limit distinct domains, defaulting to 4, each with a letter tile, and a +N more count when there are further hosts. Opening the row lists every result as a link: title, then the domain. The link's title attribute is the full URL. If onOpen is set, the click is cancelled and the result is handed to you. Otherwise the link opens in a new tab. onRetry renders a Search again button, hidden while searching and hidden entirely when the callback is omitted. The header cannot be toggled while status is searching, so a closed row stays closed until results are in. defaultOpen still applies: if it is true, the list is already open when status becomes done.
Example
import { SearchSources } from "@/components/ai/web-search-sources"
<SearchSources
query="…"
sources={[]}
searching={true}
/>Props SearchSources
| Prop | Type & description | Required |
|---|---|---|
query | string | Required |
sources | SearchSource[] | Required |
searching | boolean | Required |
Dependencies
- React
- Tailwind CSS
- lucide-react
Implementation notes
Search sources takes query, sources and searching. A source has id, title, url and excerpt. The header reads Searching or Searched, then the query. Under it, a count line reads N sources, and while searching it adds that it is finding more. Each row is a link with a globe mark, the title, an arrow that appears on hover, the host, the excerpt, and a two-digit index. A status line, Reading another page, sits under the list only while searching. There is no collapse, no retry button and no onOpen. An empty sources array still renders the count as zero.
Choosing a layout
Use it when the agent's next sentence depends on pages it just found, and the reader should see which sites those were without leaving the message. A tool call can show a search tool's raw JSON, but the query and the hosts are what a person actually checks. Keep the search line when a handful of domains under the sentence is enough, and open it when titles matter. Use the source list when each hit needs an excerpt, the way a research answer cites a page rather than only naming a host.
Do not use it for a long research job that has phases, a progress value and a page it is reading right now. That is research progress, which also has a stop control and folds to a one-line summary when the job ends. A web search is one query. If the agent is browsing a logged-in product and clicking through screens, that trace is a browser session, not a list of search hits. If several different tools ran, a tool call stack is the mixed log, and the search is only one of its rows.
Can the result list open while the search is still running?
Not on the search line. The header button is disabled for the whole time status is searching, the result count is hidden, and the domain row is not drawn. Pass status done with whatever results you have when you want the list to open. The source list is the layout that shows hits while searching is still true.
How does a click on a result get handled?
On the search line, a result is a normal link to its url unless you pass onOpen. With onOpen, the click is prevented and you receive the result object, so you can open it in your own viewer. The source list has no such callback. Its anchors always use the url, a new tab, and noreferrer.