> ## Documentation Index
> Fetch the complete documentation index at: https://docs.agentictrust.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Client-Side Tools

> Register browser-side tools, subscribe to tool results, and control page context from JavaScript.

The widget exposes a JavaScript API for advanced integrations. You can register tools the agent can invoke in the browser, subscribe to server-side tool results, customize how tools render in the chat, and update page context.

## Page context

Tell the agent about the current page so it can give context-aware answers:

```javascript theme={null}
AgenticTrust.setContext({
  title: document.title,
  url: location.href,
  description: "Checkout page — user is reviewing their cart",
});
```

The context is sent with the next message. The widget also captures DOM context automatically (headings, buttons, links, form fields) within configured limits.

<Note>
  Automatic DOM capture limits: 80 links, 30 headings, 30 buttons, 20 form fields, 8000 characters of text content.
</Note>

## Registering client-side tools

Register JavaScript functions that the agent can invoke during a conversation. The agent calls these via the built-in `invoke_client_tool` bridge:

```javascript theme={null}
AgenticTrust.registerTools({
  open_help_center: async ({ path }) => {
    window.location.href = `/help/${String(path ?? "")}`;
    return { success: true };
  },

  get_cart_items: async () => {
    const items = JSON.parse(localStorage.getItem("cart") ?? "[]");
    return { items, count: items.length };
  },

  apply_discount: async ({ code }) => {
    const res = await fetch(`/api/discounts/${code}`);
    if (!res.ok) return { error: "Invalid code" };
    const data = await res.json();
    return { discount: data.percentage };
  },
});
```

Each tool receives a single argument object with the parameters the agent provides. Return a JSON-serializable result.

## Subscribing to tool results

Listen for server-side tool invocations (knowledge retrieval, custom actions, workflows):

```javascript theme={null}
const unsubscribe = AgenticTrust.onToolResult((event) => {
  console.log("Tool:", event.toolName);
  console.log("Result:", event.result);

  if (event.toolName === "navigate" && event.result.url) {
    window.location.href = event.result.url;
  }
});

// Later, to stop listening:
unsubscribe();
```

## Custom tool renderers

Override how specific tools appear in the chat UI:

```javascript theme={null}
AgenticTrust.registerToolRenderers({
  navigate: (invocation) => ({
    text: `Navigating to ${String(invocation.args.url ?? "target page")}...`,
  }),

  lookup_order: (invocation) => ({
    text: `Looking up order ${String(invocation.args.orderId ?? "")}...`,
  }),
});
```

The renderer receives the tool invocation and returns an object with a `text` property displayed as a status message in the chat.

## API summary

| Method                             | Description                                    |
| ---------------------------------- | ---------------------------------------------- |
| `setContext(ctx)`                  | Update page context for the next message       |
| `registerTools(tools)`             | Register browser-side tools the agent can call |
| `onToolResult(callback)`           | Subscribe to server-side tool results          |
| `registerToolRenderers(renderers)` | Customize tool display in the chat UI          |