Skip to main content

useFrontendTool

Agent Runtimes

Agent Runtimes / components/hooks/useTools / useFrontendTool

Function: useFrontendTool()

useFrontendTool<TArgs, TResult>(tool, dependencies?): void

Defined in: hooks/useTools.tsx:65

Hook to register a frontend tool Compatible with CopilotKit's useFrontendTool

Type Parameters​

TArgs​

TArgs = Record<string, unknown>

TResult​

TResult = unknown

Parameters​

tool​

description​

string

handler?​

(args) => Promise<TResult>

location?​

ToolLocation

name​

string

parameters​

ToolParameter[]

render?​

(props) => ReactNode

renderAndWaitForResponse?​

(props) => ReactNode

dependencies?​

unknown[] = []

Returns​

void

Example​

useFrontendTool({
  name: 'insert_heading',
  description: 'Insert a heading into the document',
  parameters: [
    { name: 'text', type: 'string', description: 'Heading text', required: true },
    { name: 'level', type: 'number', description: 'Heading level 1-6' }
  ],
  handler: async ({ text, level }) => {
    // Execute the tool
    return `Inserted heading: ${text}`;
  }
}, []);