Tools

Give the AI capabilities in your app

Tools

Tools let the AI take actions in your app - from UI interactions to database queries.



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 ToolsBackend Tools
LocationBrowserServer
AccessDOM, state, UIDatabase, APIs, secrets
Use forNavigation, modals, UI updatesData queries, auth, payments

Next Steps

On this page