Aller au contenu
OwlLayerAI

Installer

De zéro à une interface pilotée par l'agent.

Quatre étapes. Un serveur central qui dialogue avec le modèle, un client dans votre interface. Vos boutons, liens et champs de formulaire deviennent des tools que l'agent exécute.

Avant de commencer

  • Node.js 22 ou plus
  • Un gestionnaire de paquets : pnpm, npm, yarn ou bun
  • Une clé API Google, OpenAI ou Anthropic

Côté utilisateurs : rien à faire

Ils gardent leur navigateur. Pas d’extension, pas de mise à jour, pas de compte IA : ils ouvrent votre site et demandent.

  • Chrome
  • Edge
  • Firefox

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

Un serveur, tous les clients

Chaque client (React, Vue, Svelte, Angular ou HTML) se connecte au même serveur OwlLayer AI via AITP. Le serveur garde les clés des modèles et fait tourner l'agent ; votre interface déclare les tools et les exécute.

Frontend

Fournisseur du modèle

Gestionnaire de paquets

  1. 1

    Lancer le serveur central

    Le serveur est le point d'accès unique auquel chaque client se connecte. Il garde votre clé fournisseur hors du navigateur et dialogue avec le modèle.

    mkdir my-owllayer-server && cd my-owllayer-server
    pnpm add @owllayer/server @owllayer/adapter-google dotenv

    Placez les clés dans un fichier .env à côté de server.ts.

    .env
    GOOGLE_API_KEY=your_provider_keyOWLLAYER_CLIENT_API_KEY=pk_dev_local
    server.ts
    import 'dotenv/config';import { OwlLayerServer } from '@owllayer/server';import { GoogleAdapter } from '@owllayer/adapter-google'; const server = new OwlLayerServer({  llm: new GoogleAdapter({    apiKey: process.env.GOOGLE_API_KEY!,    model: 'gemini-2.5-flash',    systemPrompt: 'You help the user act in the current interface.',  }),  port: 3000,  path: '/owllayer',}); // Every client (React, Vue, Svelte, Angular, HTML) connects with this key.server.addApiKey(process.env.OWLLAYER_CLIENT_API_KEY!); server.listen(() => console.log('OwlLayer AI on ws://localhost:3000/owllayer'));

    Démarrez-le : il écoute sur ws://localhost:3000/owllayer.

    pnpm dlx tsx server.ts
    Lire le guide
  2. 2

    Connecter votre interface

    Installez le SDK de votre frontend et pointez-le vers le serveur, avec la clé client acceptée par le serveur.

    Nouveau projet ? Créez-le (inutile avec une app existante).

    pnpm create vite my-client --template react-ts

    Ajoutez le SDK.

    pnpm add @owllayer/react @owllayer/core zod

    Connectez-le une fois, à la racine de l'app.

    src/main.tsx
    import { OwlLayerProvider } from '@owllayer/react'; <OwlLayerProvider  apiKey="pk_dev_local"  endpoint="ws://localhost:3000/owllayer"  config={{ hitl: { ui: 'modal' } }}>  <App /></OwlLayerProvider>

    Démarrez votre app.

    pnpm dev
    Lire le guide
  3. 3

    Transformer un bouton en tool

    Déclarez le tool sur l'élément qui possède l'action. Dès lors, l'agent peut l'appeler, avec une entrée typée, un niveau de risque, et votre propre handler qui fait le travail.

    src/AddToCart.tsx
    import { useAgentTool } from '@owllayer/react';import { z } from 'zod'; export function AddToCart({ product }) {  // This button is now a tool the agent can call.  useAgentTool(    {      name: 'add_to_cart',      description: 'Add the current product to the cart',      schema: z.object({ quantity: z.number().int().min(1) }),      risk: 'low',    },    async ({ quantity }) => cart.add(product, quantity),  );   return <button onClick={() => cart.add(product, 1)}>Add to cart</button>;}
    Lire le guide
  4. 4

    Parler à l'agent

    Ouvrez votre app et demandez, en texte ou à la voix :

    • « Ajoute ce produit à mon panier » : l'agent appelle add_to_cart.
    • Marquez un tool high ou critical et l'agent attend votre accord avant de l'exécuter.
    • Changez de page : les tools de l'écran précédent disparaissent pour l'agent.

Si quelque chose ne marche pas

Connexion refusée
Le serveur ne tourne pas ou l'adresse diffère. Lancez server.ts et vérifiez que le client utilise exactement ws://localhost:3000/owllayer (même port, même chemin).
Clé client invalide
L'apiKey du client doit être acceptée par le serveur via server.addApiKey(…). Vérifiez OWLLAYER_CLIENT_API_KEY dans .env.
L'agent ne voit pas mon tool
Un tool n'existe que tant que son élément est à l'écran. Vérifiez que le composant est monté sous le provider/plugin et que les noms de tools sont uniques.