Skip to content
OwlLayerAI

Open source · MIT · Agentic UI SDK

Your buttons, links and form fields become tools an agent can call. Your users just ask, in text or voice, right inside your app: nothing to install on their side.

Built into your app · Nothing to install for your users · Text and voice

Independent · MIT licensed · Contribute

Get started Read the docs Discover the product
npm i @owllayer/react

Why we built it

Agents are learning to use software. Software should speak first.

Most agents operate products the hard way: reading pixels, guessing which button to press, hoping the layout did not change.

Your components already know what they can do. OwlLayer AI lets them say it, as named actions that an agent built into your app can call.

Kouakou Ghislain Boris

Creator of OwlLayer AI

The problem

Agents shouldn't click your UI. They should call it.

Today an assistant either talks without acting, or lives outside your product and guesses its way through the screen. Neither belongs in production.

How it works

One declaration turns a button into a tool.

Take a component you already have. Add one declaration next to its action. The agent can now call it, and your code still does the work.

Your interface

€49

Share
Add to cart
data-owllayer-tool="add_to_cart"
Email
data-owllayer-tool="fill_email"

What the agent receives

    Your button is now a tool. The agent calls it; your handler runs. The agent only sees what you declare.

    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

    Live storyboard

    A conversation, and the tools that follow the screen

    The user asks in the chat. The agent calls the tools the current screen offers, and the list changes as the pages change.

    Night OwlCart

    Night Owl Hoodie

    Organic cotton · Navy

    €49

    Size

    SML
    Add to cart

    Shop assistant

    Online

      Available to the agent

      App-wide

      add_to_cartlow

      This screen

      navigate_to_cartlow
      go_back_to_cataloguenone

      Tool names and risk levels come from the open-source React demo.

      What could an agent do on your site?

      Paste an address. The scanner opens the page as a person sees it and lists the actions an agent could take there: search, add to cart, book, send. With the code to declare each one.

      See it act

      Three tapes. Every step on the record.

      Real demos, recorded as they run. Beside each one, the protocol track shows what the agent did, step by step.

      E-commerce · React

      00:00 / 00:18

      Search, add to cart and check out: the payment waits for approval.

      Recording in progress. The protocol track shows the real sequence.

      Open the demo Read the guide
      Protocol track

      Back-office · Vue

      00:00 / 00:17

      Edit the catalog in plain language: deleting a product needs a yes.

      Recording in progress. The protocol track shows the real sequence.

      Open the demo Read the guide
      Protocol track

      Travel, by voice · Svelte

      00:00 / 00:18

      Plan a trip out loud: the booking is confirmed by the traveller.

      Recording in progress. The protocol track shows the real sequence.

      Open the demo Read the guide
      Protocol track

      Integration & models

      Your stack. Your model. One contract.

      Pick the integration that matches your product and the model that fits your use case. The same actions work across text, speech and realtime audio.

      Your stack

      ReactVueSvelteAngularVanilla JS / HTMLPHP· WooCommerceShopifyFlutterSwiftKotlin

      OwlLayer AI Runtime

      AITP · Policy · Approval · Context

      Your model

      OpenAI· LLM & tool callingGemini· LLM & tool callingClaude· LLM & tool callingOpenAI Realtime· RealtimeGemini Live· RealtimeLiveKit· Voice runtimeWhisper· Speech-to-textGoogle STT· Speech-to-textOpenAI · Google · ElevenLabs· Text-to-speechDeepgram· Speech-to-textMCP bridges· LLM & tool calling
      Available Preview Roadmap

      Trust

      Security by construction, not by promise.

      Every action is an explicit capability of your application. Nothing runs that your code did not declare.

      Four risk levels

      1. 1noneRead, search, navigate.
      2. 2lowMinor change, the user is informed.
      3. 3highWaits for approval.
      4. 4criticalExplicit confirmation before anything runs.

      Approval required

      Tool
      confirm_checkout
      Risk
      critical
      Amount
      €49
      RefuseApprove

      • No DOM scraping

        Agents receive structured contracts and the context you publish, never the rendered page.

        Docs →

      • Schema validation

        Every tool defines the input it accepts before execution.

        Docs →

      • Risk-aware policy

        High and critical actions can require a human decision first.

        Docs →

      • Scoped context

        Only data you publish becomes visible to the agent.

        Docs →

      • Your handlers decide

        Side effects, permissions and transactions stay in your code.

        Docs →

      • Keys stay on the server

        Provider credentials never ship in the browser bundle.

        Docs →

      • The server has the last word

        Your server can block any tool, even one that a page has declared.

        Docs →

      • An approval the page cannot touch

        The approval window renders in a closed Shadow DOM, out of reach of page scripts.

        Docs →

      Questions, answered plainly

      No. The agent is part of your web app: your users open your site and ask, in text or by voice. No extension, no desktop app, no AI subscription of their own. Your server holds the model keys.

      Open source

      MIT licensed. Built in the open.

      Read the code, run the demos, open an issue, send a pull request. The roadmap and the discussions are public.

      • 13 packages under @owllayer
      • 5 web integrations, WooCommerce & Shopify in preview
      • Runnable demos for React, Vue, Svelte, Angular and HTML
      npm i @owllayer/react
      Star on GitHubJoin the discussion

      Put an AI agent inside your product.

      Start with one button and one action. Grow from there.

      Read the docs Star on GitHub