UI_HOST_ATTR

The attribute name that marks the host element of a library UI, such as the devtools panel or the chat.

The attribute name that marks the host element of a library UI, such as the devtools panel or the chat. Put it on a panel of your own that drives the agent: input inside it never makes the agent cursor yield, and the cursor never aims at its controls.

Import

import { UI_HOST_ATTR } from "@webmcp-agents/core";

Example

import { UI_HOST_ATTR } from "@webmcp-agents/core";

// A panel of your own that drives the agent. Typing in it never
// makes the cursor yield, and the cursor never aims at its controls.
const host = document.createElement("div");
host.setAttribute(UI_HOST_ATTR, "my-panel");
document.body.append(host);

Options

A constant, not a function: UI_HOST_ATTR is the string "data-web-agents-ui".

Name	Type	Default	Description
attribute value	`string`	any	The attribute’s value is not read, so any value works. The devtools set `"devtools"` and the chat sets `"chat"`; a distinct value helps when you inspect the DOM.

Returns

The attribute name, typed as the literal "data-web-agents-ui".

Notes

The default yieldToUser.ignore selector of installAgentVisuals is [data-web-agents-ui]. Passing your own ignore replaces it.
The match uses the event’s composedPath(), so a host whose UI lives in a shadow root still counts.
The spotlight cuts an in-place library UI (a host with a size) out of its blur, so it stays sharp.
locate never picks a control inside a host: the cursor does not click the chat’s own buttons.
It marks a host element, not a single control: put it on the container of the whole panel.