Code search tool
A grep or glob: the pattern and match count in the header, matches grouped by file with file:line and the match highlighted.
On this page
Matches grouped by file with the match highlighted.
Installation
Usage
import { ToolSearchCode } from "@/components/ui/chatcn/tool-search-code"
<ToolSearchCode state="output-available" query="getProjects(" matches={matches} />import { ToolSearchCodePart, toolSearchCodeRenderers } from "@/components/ui/chatcn/tool-search-code"
// One part straight from AI SDK or the chatcn contract
<ToolSearchCodePart part={part} onApprove={approve} onDeny={deny} />
// Or map tool names to renderers for a whole message
renderToolPart(part, { ...toolSearchCodeRenderers })The part renderer also reads ripgrep style text (path:line:text) and glob results that are only paths.
Props
| Prop | Type | Notes |
|---|---|---|
query | string | Pattern or glob |
regex | boolean | Highlight with a regular expression |
matches | { path, line?, text? }[] | Paths only for globs |
initialFiles | number | Files before Show all. Default 6 |
state | ToolDisplayState | The ToolCall lifecycle: streaming, running, approval, output, error, denied, cancelled |
approval, decision | Approval request and the user's answer, as on ToolCall | |
onApprove, onDeny, onRetry | Same callbacks as ToolCall | |
errorText | ReactNode | Shown on output-error |
durationMs, startedAt | number | Optional. Measured automatically when omitted |
variant | "card" | "inline" | Inline sits on a trace rail |
open, defaultOpen, onOpenChange | Controlled or uncontrolled details |
Keyboard
| Key | Action |
|---|---|
Enter, Space | Expand or collapse the details |
Tab | Move through the header, links, copy buttons and approval actions |
Motion
- Inherits ToolCall: the status glyph swaps with a 150 ms blur crossfade and details open over 200 ms.
- Nothing inside the body animates. Under reduced motion everything snaps.