AI Search Results Block React component
An AI search page: a question bar, an AI overview that shows searching, reading and writing steps before streaming an answer with numbered citations, ranked results with highlighted terms and type tabs, and a People also ask panel.
About the AI Search Results Block component
AI Search Results Block turns a search page into an answer page. Above the usual list of results sits an AI overview that shows what it is doing (searching, reading, writing) and then writes a short answer word by word with small numbered citations.
Every citation is tied to a result below it: hover a number and the matching result lights up, click it and the page scrolls there. Results can be filtered by type, query words are highlighted in each snippet, and a People also ask panel offers quick answers to follow-up questions.
When to use it
Use it for documentation search, a help center, an internal knowledge base or a product with an AI assistant built on retrieval.
Keep answers short with three or four bullets; the citations do the convincing, so cite every claim.
Installation
Add the AI Search Results Block component to your project with the shadcn CLI. It lands in components/ai-search-results.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/ai-search-resultsOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<AISearchResults /> accepts 7 props, all optional.
| Prop | Type | Default |
|---|---|---|
| searches Canned searches. A typed query uses the closest one by shared words. | { query: string; answer: string; results: SearchResult[]; related?: { q: string; a: string }[] }[] | DEFAULT_SEARCHES |
| onSearch Run a real search instead. | (query: string) => Promise<SearchAnswer> | — |
| types Result type tabs. "All" is added first. | string[] | ["Docs", "Guides", "Community"] |
| placeholder | string | "Ask anything about Nexora…" |
| autoRun Run the first search on load. | boolean | true |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- searches
Canned searches. A typed query uses the closest one by shared words.
{ query: string; answer: string; results: SearchResult[]; related?: { q: string; a: string }[] }[]Default: DEFAULT_SEARCHES - onSearch
Run a real search instead.
(query: string) => Promise<SearchAnswer> - types
Result type tabs. "All" is added first.
string[]Default: ["Docs", "Guides", "Community"] - placeholderstringDefault: "Ask anything about Nexora…"
- autoRun
Run the first search on load.
booleanDefault: true - theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
AI Search Results Block FAQ
- How do I connect a real search backend?
- Pass onSearch. It receives the query and returns { query, answer, results, related }. The block still shows the searching, reading and writing steps and streams your answer text.
- What can the answer text contain?
- Plain paragraphs, lines starting with '- ' for bullets, **bold** runs and [n] citations, where n is the 1-based position of a result in the results array.
- What happens with a query that has no canned answer?
- Without onSearch, the block picks the canned search that shares the most words with the query, so demos always show something sensible.
- Can I change the result tabs?
- Yes. Pass types, for example ['Docs', 'API', 'Community'], and set each result's type to one of them. 'All' is always first.
- Is it accessible?
- The form has role search, steps are a list with text states, the answer region is aria-live and aria-busy while it writes, citations are labelled links to their source, result tabs use the tablist pattern and related questions are buttons with aria-expanded.
