Built-in Tools

Built-in tools give the AI the ability to interact with the page the same way a user would — clicking buttons, filling forms, navigating routes, and reading content.

How the AI targets elements

When the AI receives the page content, every element is annotated with a CSS selector. The annotations let the AI reference specific elements on the page using the css="..." syntax:

<!-- css="main > div.container > button:nth-of-type(2)" -->

The selector is computed automatically — you don't need to add anything. Elements are annotated based on their type: buttons, links, inputs, textareas, selects, and other interactive elements are detected and tagged.

You can make targeting more reliable by adding aria-label, placeholder, or data-testid attributes. The tool executor falls back through these strategies when looking up an element:

• CSS selector (from the annotation)
• aria-label attribute
• placeholder attribute
• Visible text content match

You can style highlighted elements with CSS:

[data-highlight] {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 4px;
  transition: outline-color 0.2s;
}

The attribute is present for three seconds while the flash animation plays, then removed automatically.

Tool reference

navigate

Navigates the user to a different route.

{ "target": "/dashboard/reports" }

Works with client-side routers (Next.js, React Router) and falls back to standard browser navigation. External URLs, javascript: links, and data: URIs are rejected for security.

click

Clicks an interactive element.

{ "label": "Submit" }

Matches by aria-label, placeholder, or visible text. Triggers the element's native click handler.

type

Types a value into a text field.

{ "field": "Email", "value": "user@example.com" }

Supports all input types, textareas, and contenteditable elements. Works with framework-controlled inputs by triggering the appropriate change events.

highlight

Briefly flashes an element to draw the user's attention.

{ "region": "Error summary" }

Sets data-highlight="true" on the element for three seconds. Style it with CSS:

[data-highlight] {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 4px;
}

No approval needed — purely visual feedback.

scroll

Scrolls an element into the viewport.

{ "target": "Pricing section" }

Smooth scrolls to the element and centers it on screen.

Controlling availability

See Permissions to learn how to restrict which built-in tools the AI can use.