Defines a tool that executes in the browser rather than on the server.

Frontend tools have access to browser APIs (clipboard, geolocation, DOM, etc.) and execute locally when the agent invokes them. The optional render function provides custom UI for displaying the tool’s input and output.

When the LLM calls a frontend tool, useAgent detects the matching name in frontendToolsAtom and executes it locally instead of waiting for a server result.

Related: useAgentTool registers these tools, ToolDefinition is the server-side equivalent.

interface FrontendToolDefinition<TInput = unknown, TOutput = unknown> {
    name: string;
    description: string;
    inputSchema: z.ZodType<TInput>;
    requiresApproval?: boolean;
    execute?: (input: TInput) => Promise<TOutput>;
    render?: (props: { input: TInput; output?: TOutput; state: ToolCallState }) => React.ReactNode;
}