OwlLayer AI: Letting AI Agents Act on Your UI Instead of Replacing It

Description and use

OwlLayer AI enables safe, typed AI interactions with UI components, preserving design systems and business logic while providing risk‑aware human approval for critical actions.

Problem

Traditional AI‑in‑product solutions either add a chatbot that can’t act on the UI or regenerate the UI, breaking design systems and business logic.

Outcome

OwlLayer AI enables safe, typed AI interactions with UI components, preserving design systems and business logic while providing risk‑aware human approval for critical actions.

Workflow

• 1. Define component actions using useAgentTool with name, description, schema, and risk level.
• 2. Mount the component to register the action in the agent’s capability registry.
• 3. AI agent calls the action via AITP, passing validated parameters.
• 4. If action risk is high or critical, a Human‑in‑the‑Loop approval prompt is rendered in Shadow DOM before execution.
• 5. On approval, the component’s async handler executes the action (e.g., add_to_cart).
• 6. Unmounting the component removes the action from the registry.

Evidence

Instead of scraping the DOM or handing a model raw control over your page, your components declare their own actions - named, typed, schema-validated, with an explicit risk level.

Source

Every tool carries a risk level. High and critical risk pause and render a Human-in-the-Loop approval prompt, isolated via Shadow DOM.

Source