---
description: "An optional bridge to TanStack Devtools' event bus, so other TanStack panels (or your own) can follow tool calls."
---

# `webAgentsEventClient`

An optional bridge to TanStack Devtools' event bus, so other TanStack panels (or your own) can follow tool calls. `bridgeStoreToEventClient` posts a devtools store's tools and calls and forwards every agent event.

## Import

```ts
import { bridgeStoreToEventClient, webAgentsEventClient } from "@webmcp-agents/devtools";
import type { WebAgentsEvents } from "@webmcp-agents/devtools";
```

`EventClient` comes from `@tanstack/devtools-event-client`.

## Example

Listen to agent events on the bus, and bridge a store you made yourself.

```ts title="src/agent-events.ts"
import {
  bridgeStoreToEventClient,
  createDevtoolsStore,
  webAgentsEventClient,
} from "@webmcp-agents/devtools";

// Follow every agent event on TanStack Devtools' event bus.
export const stopListening = webAgentsEventClient.on(
  "agent-event",
  (event) => {
    console.log(event.payload.type);
  },
);

// A store you made yourself is not bridged for you.
const store = createDevtoolsStore();
export const stopBridge = bridgeStoreToEventClient(store);
```

## Options

`bridgeStoreToEventClient(store, client?)`. `webAgentsEventClient` is the shared client (plugin id `web-agents`) and takes none.

| Name | Type | Default | Description |
|---|---|---|---|
| `store` | `DevtoolsStore` | required | The store whose tools and calls are posted. |
| `client` | `EventClient<WebAgentsEvents>` | `webAgentsEventClient` | The client to emit on. Pass your own to post somewhere else. |

### Events

`WebAgentsEvents` names what is posted. Names are bare here; the bus prefixes them with the plugin id.

| Name on the bus | Payload | When |
|---|---|---|
| `web-agents:state` | `{ tools, calls }` from the store's snapshot | Once on bridge, then at most once a frame after a change, and only when `tools` or `calls` changed identity. |
| `web-agents:agent-event` | `AgentEvent` from core's `onAgentEvent` | Every agent event (`start`, `fill`, `park`, `result`, `error`, `cancel`, `yield`, `resume`). |

## Returns

`bridgeStoreToEventClient` returns a disposer that cancels a pending frame, unsubscribes from the store and stops forwarding agent events.

## Notes

- Every devtools host ([`installWebAgentsDevtools`](/docs/reference/devtools/install-web-agents-devtools), [`<WebAgentsDevtools>`](/docs/reference/devtools/web-agents-devtools), the TanStack plugin) bridges its store automatically unless `eventClient: false`. Call `bridgeStoreToEventClient` yourself only for a store from `createDevtoolsStore`.
- The client is a no-op outside development, like every TanStack event client.
- State is posted at most once per animation frame because snapshots can be large.

## See also

- [`webAgentsDevtoolsPlugin`](/docs/reference/devtools/web-agents-devtools-plugin)
- [`createDevtoolsStore`](/docs/reference/devtools/create-devtools-store): `DevtoolsState`
- [`installWebAgentsDevtools`](/docs/reference/devtools/install-web-agents-devtools): the `eventClient` option
- [`useAgentEvents`](/docs/reference/react/use-agent-events), the same events without TanStack