---
title: Frontend Tools
icon: "lucide/Wrench"
description: Let your agent interact with and update your application's UI.
hideTOC: true
---
import { IntegrationGrid } from "@/components/content/integration-grid";
import { Tabs, Tab } from "fumadocs-ui/components/tabs";

## What is this?

Frontend tools let your AI agents directly interact with and update your application's UI. They bridge the gap between your agent's decision-making and your frontend's interactive elements.

<Tabs items={['page.tsx']}>
  <Tab value="page.tsx">
  ```tsx
  import { z } from "zod";
  import { useFrontendTool } from "@copilotkit/react-core/v2";

  useFrontendTool({
    name: "setTheme",
    description: "Switch the app's color theme",
    parameters: z.object({
      theme: z.enum(["light", "dark"]),
    }),
    handler: async ({ theme }) => {
      document.documentElement.dataset.theme = theme;
      return `Theme set to ${theme}!`;
    },
  });
  ```
  </Tab>
</Tabs>

## When should I use this?

Use frontend tools when your agent needs to:
- Dynamically update UI elements
- Trigger frontend animations or transitions
- Show alerts or notifications
- Modify application state

## Get started by choosing your AI backend

<IntegrationGrid path="frontend-tools" />
