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.

  • Chrome
  • Edge
  • Firefox

Nothing to install, update or switch on

Logos and names belong to their owners and only indicate compatibility.

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

Before: your code today

ProductPage.tsx
import { useState } from 'react'; export function ProductPage({ product }) {  const [quantity, setQuantity] = useState(1);  const [added, setAdded] = useState(false);   async function addToCart(productId, qty) {    await cart.add(productId, qty);    setAdded(true);  }   return (    <article>      <h1>{product.name}</h1>      <input        type="number"        min={1}        value={quantity}        onChange={(e) => setQuantity(Number(e.target.value))}      />      <button onClick={() => addToCart(product.id, quantity)}>        {added ? 'Added' : 'Add to cart'}      </button>    </article>  );}

After: with OwlLayer AI

ProductPage.tsx
import { useState } from 'react';import { useAgentTool } from '@owllayer/react';import { z } from 'zod'; export function ProductPage({ product }) {  const [quantity, setQuantity] = useState(1);  const [added, setAdded] = useState(false);   async function addToCart(productId, qty) {    await cart.add(productId, qty);    setAdded(true);  }   // The same action, now callable by the agent.  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 addToCart(productId, quantity);      setQuantity(quantity);      return { productId, quantity };    },  );   return (    <article>      {/* …same markup as before… */}    </article>  );}

Nothing else changes: same state, same handler, same markup. The highlighted lines are all you add. Docs

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 October 7, 2026

Make your first button drivable.

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

Install Read the docs