An Agent Experience (AX) framework for dual human-agent web applications. Build interfaces optimized for both human visual usage and AI agent interaction.
// Annotated UI Element
<button id="checkout" toolname="checkout-item" tooldescription="Submit order" data-agent-role="action" >n Place Order </button>
// Browser Tool Manifest
{
"name": "checkout-item",
"description": "Submit order",
"parameters": {
"type": "object",
"properties": {}
}
}Measuring browser agent efficiency running multi-step validation and modal workflows. Exposing dynamic semantic MCP tools yields massive latency and token reductions.
| Model | Scenario | Duration | Steps | Total Tokens | API Cost | Savings / Speedup |
|---|---|---|---|---|---|---|
| claude-haiku-4-5 | Human Page (Raw DOM) | 76.11s | 12 steps | 135,110 | $0.010633 | 2.19x speedup90.1% token savings87.7% cost reduction |
| Agent Page (MCP) | 34.71s | 8 steps | 13,346 | $0.001309 | ||
| gpt-4o-mini | Human Page (Raw DOM) | 52.33s | 11 steps | 65,468 | $0.005087 | 3.38x speedup95.7% token savings94.9% cost reduction |
| Agent Page (MCP) | 15.49s | 6 steps | 2,807 | $0.000260 |
The infrastructure layer that helps AI find, read, and act on web elements.
Wrap components or attach data-agent-* attributes. Specify fields, descriptions, and verification rules.
Instantly validate your page's semantic schema during testing suites or inside your browser console.
Complies with browser-level Model Context Protocols, registering page elements directly as LLM tools.
import { AgentAction, AgentForm, AgentField } from '@agentlayerweb/react';
<AgentForm purpose="Book briefing" submitAction="submit_briefing">
<AgentField name="email" type="email" required>
<input type="email" />
</AgentField>
</AgentForm>AgentLayerWeb maps web page elements directly to AI browser agent tools.
Connect AgentLayerWeb annotations to any browser client in minutes.
One dependency.
Annotate your application using our headless SDK.
bun add @agentlayerweb/react @agentlayerweb/coreLocal Schema testing.
Test your page's WebMCP schema via our validator CLI.
bunx @agentlayerweb/cli validate http://localhost:3000CLIWeb interaction infrastructure built from the ground up.
AI agents successfully identify and execute page actions without coordinate-guessing or layout shifts.
Schema registry parses page manifests in milliseconds. Built for fast agentic validation loops.
| Form Name | DOM Parse | Manifest Query |
|---|---|---|
| Login Form | 520 ms | 2 ms |
| Checkout Form | 640 ms | 3 ms |
| Strategy Booking | 480 ms | 2 ms |
No raw HTML page source or image arrays. Just clean tool schemas, reducing token consumption by 93%.
Developed transparently and collaboratively. Join our community building the future of agentic web browsing.
Javascript rendering, smart wait, schema parsing, validation mapping, and more.
Automatically build JSON Schema declarations from your annotated forms.
Map buttons, links, and inputs to semantic tools with standard execution weights.
Intelligently notify browser agents of dynamic loading, completion, or form validation states.
Validate input parameters before submission to avoid form validations errors.
Handle asynchronous forms, modals, and multi-step dialog flows natively.
See how you can give your AI better access to web forms with AgentLayerWeb.
Agent Integration
Exposing scheduling forms directly to browser agents using AgentLayerWeb's custom annotation standard.
Visit docs →Discover why developers choose AgentLayerWeb every day.
“Annotating our dashboard took 10 minutes and now AI web agents can execute checkouts with 100% accuracy. Absolute game changer.”
“WebMCP + AgentLayerWeb is the missing bridge between LLMs and UI. No more coordinate-guessing or brittle selector scripts.”
“Our agentic workflows went from 40% success rate (visual computer use) to 98% using AgentLayerWeb. Incredible.”
Everything you need to know about AgentLayerWeb.
AgentLayerWeb is an Agent Experience (AX) framework that makes web applications natively optimized and usable by both humans and AI agents.
Instead of guessing element coordinates or parsing messy raw HTML, AgentLayerWeb provides clean tool schemas (WebMCP) that the browser serves directly to the agent.
No. You simply add simple data attributes or wrap components in React/Vue. It has zero runtime performance impact on human users.
AgentLayerWeb is MIT licensed. Use it in personal projects, startups, and enterprise products — no license fees, no usage limits, no expiry.
AgentLayerWeb is licensed under the MIT License. Questions? Email hi@agentlayerweb.dev