import { useEvent } from "@alexkroman1/aai-ui";
import { useState } from "react";
type Item = { sku: string; qty: number };
function Cart() {
const [cart, setCart] = useState<Item[]>([]);
// Tool: ctx.send("item_added", { sku, qty })
useEvent<Item>("item_added", (data) => {
setCart((cart) => [...cart, data]);
});
return <div>{cart.length} items</div>;
}
Subscribe to custom events emitted by agent tools via
ctx.send(event, data); the callback receives each event'sdata.This is the preferred way to drive UI from tools — an explicit event beats inferring state from tool results with useToolResult.