Tools
Give the AI capabilities in your app
Tools
Tools let the AI take actions in your app - from UI interactions to database queries.
Built-in Tools
Ready-to-use tools for screenshots, console logs, and more.
Frontend Tools
Client-side tools with access to DOM, state, and UI.
Backend Tools
Server-side tools with database and API access.
Agentic Loop
Multi-step AI reasoning with continuous tool calls.
How Tools Work
User: "Find products under $50 and add the best one to cart"
↓
AI calls: search_products({ maxPrice: 50 })
↓
AI calls: add_to_cart({ productId: "best-match" })
↓
AI: "I found 12 products and added the top-rated one to your cart."Quick Example
import { useTools } from '@yourgpt/copilot-sdk-react';
import { z } from 'zod';
function MyTools() {
useTools({
search_products: {
description: 'Search the product catalog',
parameters: z.object({
query: z.string(),
maxPrice: z.number().optional(),
}),
handler: async ({ query, maxPrice }) => {
return await fetchProducts(query, maxPrice);
},
},
});
return null;
}AI reads the description to decide when to use each tool.
Frontend vs Backend
| Frontend Tools | Backend Tools | |
|---|---|---|
| Location | Browser | Server |
| Access | DOM, state, UI | Database, APIs, secrets |
| Use for | Navigation, modals, UI updates | Data queries, auth, payments |
Next Steps
- Built-in Tools - Screenshot, console, network
- Frontend Tools - Build client-side tools
- Backend Tools - Build server-side tools