Frontend Tools

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.

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}!`;
},
});

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