Frontend tools let your AI agent execute actions directly inside your app or website. While regular tools connect the AI to your backend via API calls, a Frontend tool runs code in the app your customer currently has open — with their session, their local state and your app's own logic.
A few things Frontend tools are great for:
Initiating a request to your backend directly from your frontend.
Changing a setting or toggling a feature for the current user
Reading local state the backend doesn't know about (current screen, cart contents, unsaved changes)
Starting an in-app flow like a password reset or an onboarding step
The AI collects the required parameters in the conversation, your app executes the action and returns a result and the AI uses that result to reply to your customer.
Navigate to AI agent > Tools and click Add tool. Select Frontend tool ("Execute an action inside your app via the Gleap SDK").
Give your tool a unique name that explains exactly what it does (e.g. "send-money"). The name is automatically converted into a runtime name (lowercase letters, numbers and dashes). This is the exact name your app registers a handler for, and the editor shows it in the code preview.
Use the description to tell the AI when to use the tool. This can also contain further instructions for the LLM.
Example:
Use this tool to send money to one of the user's contacts. For example “Send 20 € to Alice”.
Define the parameters the AI passes to your handler. For each parameter you set a name, a type (String, Number or Boolean), a description and whether it is required.
If a required parameter is missing, the AI will ask the customer for it and only call the tool once it has all required values.
Frontend tools support two execution modes:
Auto: the tool runs immediately when the AI calls it. Best for reading data or low-risk actions.
Ask before final execution: the AI always ask for confirmation before continuing. The tool only runs after your customer confirms it. Use this for anything with side effects, like payments or cancelations.
Please note: Frontend tools set to "Ask before final execution" are not available to Kai directly — use them on your AI agents.
Your app needs to know what to do when the tool is called. That's a single line of code with the Gleap SDK: register a handler under the tool's runtime name.
The tool editor generates a ready-to-copy snippet for your platform like JavaScript, iOS, Android, React Native, Flutter or Capacitor. Here is the JavaScript example:
Gleap.registerAgentTool('send-money', async ({ amount, contact }) => {
// Run your own logic here.
// Return a string or JSON — the AI waits for this response.
return 'The transfer was initiated. The user must confirm it in the banking app.';
});A few things to know about handlers:
The handler receives the parameters you configured, filled with the values the AI collected.
Whatever you return (a string or a JSON object) is sent back to the AI, which uses it to write its reply.
Exceptions are caught and reported back to the AI automatically — the conversation never gets stuck.
If no handler is registered for a tool, the AI is informed so it can respond accordingly.
You'll find platform-specific code examples for all SDKs in our .
Your customer asks for something the tool can do ("Please send 20 € to Alice").
The AI picks the Frontend tool and collects any missing required parameters.
With Auto, the handler in your app runs right away. With Ask before final execution, the AI adds a confirmation button and only executes once your customer taps it.
Your handler's result is sent back to the AI, which replies to your customer based on it.
Frontend tools run in your customer's app session — the customer needs to have your app or website open for the tool to execute. If the app doesn't respond in time, the AI is informed and reacts accordingly.
Keep results short and meaningful. The AI reads the result to craft its reply, so "Transfer initiated, confirmation required in the banking app" works better than a full data dump.
Frontend tools replace the previous client-side AI tools (setAiTools). Tools are now defined once in the dashboard instead of in your app code — your app only executes them. If you are still using setAiTools, migrate to Frontend tools together with the latest SDK versions.