Skip to content
OwlLayerAI

Product

An AI agent that uses your interface the way it was built.

OwlLayer AI adds an agent inside your web app. Your users ask for what they want, in text or by voice. The agent calls the actions your interface declares, and your code does the work.

Two sides, one product

What changes for your users, and for your team.

What your team writes

One declaration per action.

Put it on the component that owns the action, or on a plain HTML element with a few attributes. No framework is required, and nothing else in your app changes. Docs

With a component

ProductView.tsx
import { useAgentTool } from '@owllayer/react';import { z } from 'zod'; export function ProductView({ product }) {  useAgentTool(    {      name: 'add_to_cart',      description: `Add a product to the cart. On screen: ${product.name} (id ${product.id})`,      schema: z.object({        productId: z.string(),        quantity: z.number().int().min(1),      }),      risk: 'low',    },    async ({ productId, quantity }) => {      await cart.add(productId, quantity);      return { productId, quantity };    },  );  return <ProductCard product={product} />;}

With plain HTML

index.html
<!-- No JavaScript: the attributes turn this button into a tool --><button  data-owllayer-tool="add_to_cart"  data-owllayer-description="Add the current product to the cart"  data-owllayer-action="click"  data-owllayer-risk="low">  Add to cart</button>

Neural-DOM Binding

The model decides. Your interface acts.

Neural-DOM Binding is the link between the model that understands your user and the living page they are using. The model never clicks: it picks an action your page has declared, by name.

Animation. A user asks to add two items to the cart. The model reads the actions declared on the screen and picks add_to_cart with quantity 2. The call travels to the page, your code runs it, the cart shows 2, and the result goes back to the model, which replies. Below, a cursor hunting for a button selector is crossed out.

Next to MCP

MCP is server-side. OwlLayer AI is interface-side.

If you know MCP, OwlLayer AI completes it. One declares what your services can do; the other declares what your interface can do, right now.

MCP

Where tools are declared
On your servers
What they represent
What your services and data can do
Who uses them
Agents that connect to those servers

OwlLayer AI

Where tools are declared
In your interface (components and HTML elements)
What they represent
The actions available on the current screen
Who uses them
The agent built into your app, used by your users

They work together: the same agent can use both.

MCP bridges are on the roadmap.

One server, every client.

Your web clients connect to one OwlLayer AI server. It holds the model keys, talks to the model and routes each call back to the page that declared it.

Already on npm.

The packages are published under the @owllayer scope, MIT licensed. Versions checked on September 27, 2026

Make your first button drivable.

Install the server and one client, declare one action, and ask for it.

Install Read the docs