Client-Side Tools

Client-side tools execute in the browser instead of on a server. You register handlers via window.argide('registerTools', {...}), and the agent calls them like any other tool — but the work happens client-side.

When to Use

Use client-side tools for browser-only actions:

CSV / file downloads
Page navigation
DOM manipulation
Accessing client-side state (stores, localStorage)

Use server-side tools (OpenAPI / MCP) for API calls, database queries, and anything that requires backend access.

Setup

1. Register Handlers

In your app code, register functions the widget can call:

window.argide('registerTools', {
  exportListToCSV: async ({ fileName }) => {
    // ... build CSV from app state
    downloadCsv(data, fileName || 'export');
    return { status: 'success', rows_exported: data.length };
  }
});

2. Upload Tool Definitions

On the Actions page, upload a JSON definition so the agent knows the tool exists:

[{
  "name": "exportListToCSV",
  "description": "Export the current list to a CSV file. Downloads directly to the user's device.",
  "parameters": {
    "type": "object",
    "properties": {
      "fileName": { "type": "string", "description": "Name for the CSV file" }
    },
    "required": []
  }
}]

Good descriptions help the agent decide when to use the tool.

Handler Contract

Each handler receives an args object matching the tool’s parameters schema and must return an object.

Outcome	Return value
Success	`{ status: "success", ...data }`
Failure	`{ status: "error", error: "message" }`

The returned object is sent back to the agent so it can incorporate the result into its response.

Showing a Loading State

For tools that take a few seconds, call setToolStatus to show a spinning indicator with a status message inside the widget. Clear it when done.

window.argide('registerTools', {
  createAndPopulateList: async ({ listName }) => {
    window.argide('setToolStatus', 'Creating list...');
    await createList(listName);
    window.argide('setToolStatus', 'Adding leads...');
    await addLeads();
    window.argide('setToolStatus', ''); // clear
    return { status: 'success' };
  }
});

The status appears above the input box with a spinner while non-empty, and disappears when set to ''.

How It Works

User asks — The message is sent to the agent
Agent picks the tool — Based on the tool definition
Widget runs the handler — Executes your registered function client-side
Result flows back — The agent sees the return value and responds

Tool Renderers

Render custom UI for tool results

Embed Widget

Full installation guide

Get Started

Setup

Agent

Knowledge Base

Integration

Monitor

Client-Side Tools

When to Use

Setup

1. Register Handlers

2. Upload Tool Definitions

Handler Contract

Showing a Loading State

How It Works

Tool Renderers

Embed Widget

​When to Use

​Setup

​1. Register Handlers

​2. Upload Tool Definitions

​Handler Contract

​Showing a Loading State

​How It Works

Tool Renderers

Embed Widget

When to Use

Setup

1. Register Handlers

2. Upload Tool Definitions

Handler Contract

Showing a Loading State

How It Works