Tool invocation card with the function name, typed arguments in monospace, and a running or done status pill.
The import and the props worth knowing about, in one place.
import { Ai22 } from "@/components/beste/piece/ai22";
<Ai22
fn="search_docs"
args={[
{
"key": "query",
"value": "\"rate limiting\""
},
{
"key": "limit",
"value": "5"
}
]}
status="done"
tone="violet"
/>A plain ledger of tool calls: a hairline fills under the step that is running, its duration lands on the right when it finishes, and the answer settles in below.
const slug = (s: string) => s.toLowerCase().replace(/\s+/g, '-');
AI code output card with a language tag, copy and regenerate actions, and a monospace block below.
Monospace prompt card with inline handlebars-style variables highlighted in violet against plain body text.
You are a concise copywriter. Reply in 2 sentences max and avoid em dashes.
Dashed-border card with a violet scroll icon, uppercase label, and an edit button for the system instructions.