Aller au contenu
OwlLayerAI

Produit

Un agent IA qui utilise votre interface telle qu'elle a été construite.

OwlLayer AI ajoute un agent dans votre application web. Vos utilisateurs demandent ce qu'ils veulent, à l'écrit ou à la voix. L'agent appelle les actions que votre interface déclare, et votre code fait le travail.

  • Chrome
  • Edge
  • Firefox

Rien à installer, à mettre à jour ni à activer

Logos et noms appartiennent à leurs propriétaires et indiquent seulement la compatibilité.

Deux côtés, un produit

Ce qui change pour vos utilisateurs, et pour votre équipe.

Ce que votre équipe écrit

Une déclaration par action.

Placez-la sur le composant qui porte l'action, ou sur un simple élément HTML avec quelques attributs. Aucun framework n'est requis, et rien d'autre ne change dans votre application. Docs

Avant : votre code aujourd'hui

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>  );}

Après : avec 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>  );}

Rien d’autre ne change : même état, même handler, même balisage. Les lignes surlignées sont tout ce que vous ajoutez. Docs

Neural-DOM Binding

Le modèle décide. Votre interface agit.

Neural-DOM Binding, c'est le lien entre le modèle qui comprend votre utilisateur et la page vivante qu'il utilise. Le modèle ne clique jamais : il choisit, par son nom, une action que votre page a déclarée.

Animation. Un utilisateur demande d'ajouter deux articles au panier. Le modèle lit les actions déclarées sur l'écran et choisit add_to_cart avec la quantité 2. L'appel rejoint la page, votre code l'exécute, le panier affiche 2, et le résultat revient au modèle, qui répond. En dessous, un curseur qui cherche le sélecteur d'un bouton est barré.

À côté de MCP

MCP côté serveur. OwlLayer AI côté interface.

Si vous connaissez MCP, OwlLayer AI le complète. L'un déclare ce que vos services savent faire ; l'autre déclare ce que votre interface permet, maintenant.

MCP

Où les outils sont déclarés
Sur vos serveurs
Ce qu'ils représentent
Ce que vos services et vos données savent faire
Qui les utilise
Les agents qui se connectent à ces serveurs

OwlLayer AI

Où les outils sont déclarés
Dans votre interface (composants et éléments HTML)
Ce qu'ils représentent
Les actions disponibles sur l'écran courant
Qui les utilise
L'agent intégré à votre application, utilisé par vos utilisateurs

Les deux fonctionnent ensemble : le même agent peut utiliser les deux.

Des ponts MCP sont prévus sur la feuille de route.

Un serveur, tous les clients.

Vos clients web se connectent à un seul serveur OwlLayer AI. Il détient les clés des modèles, dialogue avec le modèle et renvoie chaque appel vers la page qui l'a déclaré.

Déjà sur npm.

Les paquets sont publiés sous le scope @owllayer, sous licence MIT. Versions vérifiées le 7 octobre 2026

Rendez votre premier bouton pilotable.

Installez le serveur et un client, déclarez une action, et demandez-la.

Installer Lire la doc