ai11y — A structured UI context layer for AI agents

Describe → Plan → Act

The world runs on user interfaces. Interfaces solve problems by making state, constraints, and actions explicit.

ai11y exposes this structure so agents can operate existing UIs.

Describe — Observe the current UI context.
Runtime: local — DOM → structured context.
Plan — Get instructions from the agent.
Runtime: model/server — context + intent → instructions.
Act — Perform actions on the UI.
Runtime: local — instructions → DOM actions.

import { createClient, plan } from "@ai11y/core";

const client = createClient({
  onNavigate: (route) => window.history.pushState({}, "", route),
});

const ui = client.describe();
const { reply, instructions } = await plan(ui, "click the save button");
for (const instruction of instructions ?? []) {
  client.act(instruction);
}

🧭

Navigation

Give your agent the ability to navigate between pages from natural language. It can use your app's routing structure to take users where they ask.

Give your agent access to your routes:

🏠Home 💳Billing 🔌Integrationscurrent

Try or

<a
  href="/billing"
  data-ai-id="nav_route_billing"
  data-ai-label="Billing Route"
  data-ai-intent="Navigate to Billing page"
>
  Billing
</a>

✨

Visual Highlighting

Draw attention to any element with customizable highlight animations. Perfect for tutorials, onboarding flows, and guided experiences.

Elements can be highlighted on command:

✨

🎯

⚡

💡

Try , or

<div
  data-ai-id="highlight_demo_badge"
  data-ai-label="Feature Badge"
  data-ai-intent="A badge to highlight"
  class="badge"
>
  ✨ Feature
</div>

👆

Interaction

Give your agent the ability to interact with buttons, links, and other UI elements. Users describe their intent in natural language; your agent takes the right action.

Give your agent the ability to interact with buttons:

Counter

0

Status

Inactive

Try , , or

<script type="module">
  import { setState } from "@ai11y/core";

  let count = 0;

  function updateCounter() {
    setState({ counterValue: count });
  }

  document.querySelector("#increment").addEventListener("click", () => {
    count++;
    updateCounter();
  });
</script>

<button
  data-ai-id="click_demo_increment"
  data-ai-label="Increment Button"
  data-ai-intent="Increases the counter by 1"
  id="increment"
>
  +
</button>

⌨️

Form Awareness

Give your agent the ability to read and fill form fields from natural language. It can read current values and fill inputs, textareas, and dropdowns. Emits native browser events for compatibility.

Give your agent the ability to read and fill forms:

Password values are automatically redacted for privacy

Try , or

<input
  type="email"
  data-ai-id="fill_demo_email"
  data-ai-label="Email Input"
  data-ai-intent="Email address input field"
  placeholder="Enter your email"
/>

🔗

Chained instructions

Your agent can perform multi-step tasks inside one surface: fill, toggle, save. Instructions chain reliably across the same describe → plan → act loop.

Status

Inactive

Billing email

Chained instructions inside this section: fill, toggle, save. Your agent can perform multi-step tasks reliably.

🔐

Custom State

Give your agent knowledge beyond the DOM. Expose permissions, user context, and app-specific data so your agent can answer questions about capabilities and constraints.

Give your agent knowledge beyond the DOM. Expose permissions and capabilities so your agent can answer questions about what actions are allowed:

Role

editor

Plan

pro

Actions

Only owners can delete projects

Try , , or

<script type="module">
  import { setState } from "@ai11y/core";

  setState({
    canDelete: false,
    canExport: true,
    role: "editor"
  });
</script>

<button
  data-ai-id="export_btn"
  data-ai-label="Export"
  disabled="false"
>
  Export
</button>