Frontend Tools

What is this?#

Frontend tools let your agent define and invoke client-side functions that run entirely in the user's browser. Because the handler executes on the frontend, it has direct access to component state, browser APIs, and any third-party UI library the page already uses. That's how an agent can "reach into" the app: update Vue state, trigger animations, read localStorage, pop a toast, or steer the user's view.

This page covers the "agent drives the UI" shape of frontend tools. The same primitive also powers Generative UI and Human-in-the-loop; see those pages for interaction patterns.

When should I use this?#

Use frontend tools when your agent needs to:

• Read or modify Vue component state
• Access browser APIs like localStorage, sessionStorage, or cookies
• Trigger UI updates, animations, or transitions
• Show alerts, toasts, or notifications
• Interact with third-party frontend libraries
• Perform anything that requires the user's immediate browser context

How it works in code#

Register a frontend tool with useFrontendTool. Give it a name, a Zod schema for parameters, and a handler. The agent can then call it like any other tool and your frontend runs it in the browser.

<script setup lang="ts">
import { ref } from "vue";
import { z } from "zod";
import { CopilotChat, useFrontendTool } from "@copilotkit/vue/v2";

const severity = ref("all");

useFrontendTool(
  {
    name: "filter_incidents",
    description: "Filter the visible incident list by severity.",
    parameters: z.object({
      severity: z.enum(["all", "sev1", "sev2", "sev3"]),
    }),
    handler: async ({ severity: nextSeverity }) => {
      severity.value = nextSeverity;
      return { applied: true, severity: nextSeverity };
    },
  },
  [severity],
);
</script>

<template>
  <p>Current filter: {{ severity }}</p>
  <CopilotChat />
</template>

The handler receives the parsed, type-safe parameters and can do anything the browser can: update state, call an API, or touch the DOM. Its return value is sent back to the agent as the tool result so the model can reason about what happened.

The second argument is an array of Vue watch sources. Include refs or getters read by the registration so the handler sees current values.

<script setup lang="ts">
import { CopilotKitProvider } from "@copilotkit/vue/v2";
import DashboardAgent from "./components/DashboardAgent.vue";
</script>

<template>
  <CopilotKitProvider runtime-url="/api/copilotkit">
    <DashboardAgent />
  </CopilotKitProvider>
</template>

Your agent discovers the name, description, and parameter schema through the runtime connection. Make descriptions narrow, validate inputs, and ask for explicit confirmation before irreversible actions. Privileged mutations, secret-bearing API calls, and authorization decisions belong on a trusted backend. For a tool that must wait for a user's answer, use useHumanInTheLoop instead.

Choose your AI backend