CopilotKit

FrontendTool

Definition of a frontend tool the agent can call in the browser.

Overview

FrontendTool describes a tool that runs in the browser and can be invoked by an agent. You register frontend tools via CopilotKitCoreConfig.tools (or at runtime on CopilotKitCore). A tool has a name, an optional parameter schema, and a handler that receives the parsed arguments and an execution context.

Import

import type { FrontendTool } from "@copilotkit/core";

Definition

type FrontendTool<T extends Record<string, unknown> = Record<string, unknown>> = {
  name: string;
  description?: string;
  parameters?: StandardSchemaV1<any, T>;
  handler?: (args: T, context: FrontendToolHandlerContext) => Promise<unknown>;
  followUp?: boolean;
  agentId?: string;
  available?: boolean;
};

type FrontendToolHandlerContext = {
  toolCall: ToolCall;
  agent: AbstractAgent;
  signal?: AbortSignal;
};

Properties

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Prop

Type

Usage

import type { FrontendTool } from "@copilotkit/core";
import { z } from "zod";

const setThemeTool: FrontendTool<{ theme: "light" | "dark" }> = {
  name: "setTheme",
  description: "Switch the app between light and dark mode",
  parameters: z.object({ theme: z.enum(["light", "dark"]) }),
  handler: async ({ theme }, { signal }) => {
    if (signal?.aborted) return;
    document.documentElement.dataset.theme = theme;
    return `Theme set to ${theme}`;
  },
};

Related