AI Input Search

Usage

Pick a tool from Tools, or type / in an empty box and press its number, and the Tools pill turns into that tool, tinted with its color. Its x, picking it again, or Backspace in an empty box takes it off. A tool with a limit shows the runs left as dots and locks at zero. With no onSearch the component plays a pretend run. Wire it to your own backend by calling onSource as each source comes in and resolving when the answer is ready. A source shows as a letter avatar in its brand color; pass icon to use a logo instead. Enter or the Ask key sends, and the key turns into Stop while a run is going. Stop, or Esc, aborts signal.

<AI_Input_Search
  onSearch={async (query, { tool, model, files, signal, onSource }) => {
    if (!tool?.readsSources) {
      return ask(query, { tool: tool?.id, model, files, signal });
    }
    for await (const source of mySearch(query, { deep: tool.id === "investigate", signal })) {
      onSource({ domain: source.host, title: source.title });
    }
  }}
/>

Bring your own tools with any Lucide icon:

import { Map } from "lucide-react";

<AI_Input_Search
  defaultTool={null}
  tools={[
    { id: "places", label: "Find places", icon: Map, color: "#14b8a6", hint: "Maps, hours and reviews", activity: "Looking up places", readsSources: true },
  ]}
/>