live-layerdocs
View as markdown

Capabilities

By default, the script-tag widget lets the agent perform a small set of page actions on your behalf — clicking links, scrolling, programmatically clicking buttons. The capabilities attribute lets you tighten this allowlist on a per-page basis.

html
<livelayer-widget
  agent-id="agt_abc123"
  capabilities="navigate,scroll,click">
</livelayer-widget>

Available capabilities

NameTypeDescription
navigatecapabilityAllow the agent to follow a link or trigger client-side navigation. Implementation: anchor click → history.pushState fallback.
scrollcapabilityAllow scroll_page (up/down/top/bottom) and scroll_to (selector). Useful for guided tours.
clickcapabilityAllow document.querySelector(selector).click() — for buttons, accordions, etc.

The script-tag widget cannot fill or submit forms in your page. That's a deliberate security boundary — form filling requires React-state coherence and lives only in the NPM package.

Examples

JSON array form

You can also pass capabilities as a JSON array — useful when generating the embed in code:

html
<livelayer-widget
  agent-id="agt_abc123"
  capabilities='["navigate","scroll"]'>
</livelayer-widget>

Both comma-separated and JSON-array forms produce the same result.

How enforcement works

The widget enforces capabilities client-side by ignoring agent commands that aren't in the allowlist. The agent server can still emit any command — the widget just no-ops the disallowed ones.

This means:

  • Capabilities are not authentication. A determined visitor with browser dev tools can override them. They're a UX guardrail, not a security boundary.
  • The agent doesn't know it's being restricted. It will keep trying actions you've disallowed. To get smarter behavior, also restrict the agent prompt at the dashboard level (e.g., "Don't offer to navigate anywhere on this page").

For server-side enforcement, use NPM — your onAgentCommand callback can validate against your auth context before executing.