# Search bar (/docs/modules/search)

`AiSearch` looks like your site's search bar. The visitor types a question and presses Enter, and the answer streams in a card under the bar with the tools the model ran, your own result cards and the account that answers. Each search starts a new conversation. Escape or Clear empties the bar.

## Add it [#add-it]

```tsx title="src/Hero.tsx"
import { AiSearch } from '@aiconnect/react';

const SYSTEM = 'You answer questions about this bookshop\'s catalog. Always search the catalog first. Answer in two sentences.';

export function Hero() {
  return (
    <section>
      <h1>Books for every mood</h1>
      <AiSearch system={SYSTEM} mcp="/api/mcp" suggestions={['A calm book for tonight', 'Something funny']}
        renderToolResults={renderBooks} />
    </section>
  );
}
```

The suggestions show as chips under the empty bar. A visitor whose AI is not connected yet sees the connect window when they search, and the answer follows once the wallet connects the site.

## As a Web Component [#as-a-web-component]

```html
<script src="https://your-site.example/aiconnect-elements.js" defer></script>
<aiconnect-search mcp="/api/mcp" system="You answer questions about this bookshop's catalog."
  suggestions='["A calm book for tonight"]'></aiconnect-search>
```

## Props [#props]

### AiSearchProps

| Prop                 | Type                                                 | Description |
| -------------------- | ---------------------------------------------------- | ----------- |
| `system`             | `string`                                             |             |
| `tools?`             | `ToolSource \| undefined`                            |             |
| `mcp?`               | `string \| undefined`                                |             |
| `placeholder?`       | `string \| undefined`                                |             |
| `suggestions?`       | `string[] \| undefined`                              |             |
| `toolLabels?`        | `Record<string, string> \| undefined`                |             |
| `renderToolResults?` | `((turn: ChatTurn) => React.ReactNode) \| undefined` |             |
| `className?`         | `string \| undefined`                                |             |

The search bar takes every prop of the chats except `title` and `intro`.