---
description: "Puts the devtools panel in a \"Web Agents\" tab of TanStack Devtools."
---

# `webAgentsDevtoolsPlugin`

Puts the devtools panel in a "Web Agents" tab of TanStack Devtools. It is the same panel, embedded: no launcher, dock, resize handle or hotkey. Reach for it when your app already uses TanStack Devtools.

## Import

```tsx
import { webAgentsDevtoolsPlugin } from "@webmcp-agents/devtools/react";
import type { WebAgentsDevtoolsPlugin } from "@webmcp-agents/devtools/react";
```

## Example

Pass the plugin to `<TanStackDevtools>`, inside a `<WebAgentsProvider devtools={false}>`: Settings drive its cursor, and its own floating panel stays off. This needs `@tanstack/react-devtools` and `@webmcp-agents/devtools` installed.

```tsx
import { TanStackDevtools } from "@tanstack/react-devtools";
import { webAgentsDevtoolsPlugin } from "@webmcp-agents/devtools/react";

<TanStackDevtools
  plugins={[webAgentsDevtoolsPlugin({ initialSettings: { spotlight: false } })]}
/>;
```

## Options

`webAgentsDevtoolsPlugin(options?)` takes [`DevtoolsOptions`](/docs/reference/devtools/install-web-agents-devtools#options) without `initialOpen` and `hotkey`: TanStack Devtools opens and closes its own tabs.

| Name | Type | Default | Description |
|---|---|---|---|
| `visuals` | `DevtoolsVisuals \| null` | the started `<WebAgentsProvider>`'s cursor ([`currentAgentVisuals()`](/docs/reference/core/current-agent-visuals)), else `null` | What the Spotlight and Yield switches control. |
| `initialSettings` | `Partial<DevtoolsSettings>` | not said | Starting settings, below what the person saved. Pass `spotlight` matching your visuals. |
| `eventClient` | `boolean` | `true` | Bridge the store to TanStack Devtools' event bus. |

## Returns

A `WebAgentsDevtoolsPlugin`: `{ id: "web-agents", name: "Web Agents", render: <PluginPanel /> }`, structurally a `TanStackDevtoolsReactPlugin`. Pass it in `<TanStackDevtools plugins>`. The panel renders in a shadow root that fills the tab.

## Notes

- Render `<TanStackDevtools>` inside `<WebAgentsProvider devtools={false}>`, so Settings can drive the cursor and the provider's floating panel does not show as well.
- `@tanstack/react-devtools` (>= 0.10) is an optional peer dependency. Install it when you use the plugin.
- The store also posts `web-agents:state` and `web-agents:agent-event` on TanStack's event bus. See [`webAgentsEventClient`](/docs/reference/devtools/event-client).
- The embedded Settings tab hides the layout options (dock and size): the host owns the layout.

## See also

- [Devtools](/docs/build/devtools), the page that teaches it
- [`<WebAgentsDevtools>`](/docs/reference/devtools/web-agents-devtools), the floating panel and `useDevtoolsStore`
- [`installWebAgentsDevtools`](/docs/reference/devtools/install-web-agents-devtools), `DevtoolsOptions`
- [`webAgentsEventClient`](/docs/reference/devtools/event-client)