Interface modules
Search bar
A search bar that answers the visitor's question in a card under it, with the tools it ran and your own result cards.
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
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
<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
Prop
Type
The search bar takes every prop of the chats except title and intro.