# AI search

> Answer engine with streamed reasoning, inline citations, sources and follow-ups.

Block · Pro · https://lodeui.com/blocks/ai-search

## When to use

- Docs search, research assistants and knowledge bases.

## When not to use

- Open-ended chat: use the AI chat block.

## Installation

```bash
npx shadcn@latest add @lode/ai-search
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { AiSearch } from "@/components/blocks/ai-search";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <AiSearch />
    </main>
  );
}
```

Built from: AI reasoning, Citation list

## API reference

### AiSearch

An answer engine: question box, streamed reasoning steps, an answer with inline citations, source cards and related questions. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Ask |
| Tab | Reach citations, sources and related questions |

## Accessibility

- The answer is marked aria-busy while streaming; citation marks link to their sources.

## Motion

- Reasoning steps appear one by one then fold; the answer types out with a cursor; related questions fade in last.

## Responsive behavior

- Single column; sources go 2-up from 640px.

## Performance

- Streams by revealing characters of a known answer; swap in your token stream.

## Notes for AI

- Return citations as indices into your sources array, as in ANSWER.

## Related

- [AI reasoning](https://lodeui.com/components/ai-reasoning) — A collapsible thinking trace that folds into a summary when done.
- [Citation list](https://lodeui.com/components/citation-list) — Numbered sources and inline citation marks for AI answers.
- [AI chat](https://lodeui.com/blocks/ai-chat) — A chat with streamed answers, model picker, suggestions and stop.