Skip to main content
AGO
DÉVELOPPEURS

L'agent dans votre produit, pas à côté

Le SDK AGO intègre un agent IA orienté client dans votre application React, Vue ou Angular. Il navigue dans les routes que vous avez déjà, change la page que l'utilisateur consulte et exécute vos propres fonctions JavaScript dans le navigateur.

terminal
npm install @useago/sdk
App.tsx
import { AgoProvider, ChatWidget } from "@useago/sdk/react";

export default function App() {
  return (
    <AgoProvider baseUrl="https://api.useago.com" agent="support-agent">
      <ChatWidget title="AGO" welcomeMessage="Posez votre question !" height={500} />
    </AgoProvider>
  );
}
Types TypeScript inclusBuilds ESM et CJSAucune dépendance runtimeLicence Apache 2.0SOC 2 Type II
DEUX MINUTES

Laissez votre agent de code l'installer

Toute la documentation est publiée dans un fichier unique conçu pour les agents de code. Collez ce prompt dans Claude Code, Codex ou Cursor et laissez le câbler l'intégration dans votre codebase.

prompt
Read https://raw.githubusercontent.com/useago/ago-sdk/refs/heads/main/llms-full.txt
and integrate the AGO chat SDK into this app.

Vous préférez lire vous même ? La documentation complète et un exemple exécutable par stack sont dans le dépôt public.

CE QUI CHANGE

Un widget de chat répond. Celui ci agit.

La plupart des widgets de support se posent au dessus de votre produit et ne peuvent qu'en parler. Le SDK AGO donne des commandes à l'agent, il pilote donc l'interface dans laquelle vos utilisateurs se trouvent déjà.

NAVIGATION

L'agent pilote vos routes existantes

Décrivez les pages que vous avez déjà et « montre moi mes factures » ouvre vraiment la bonne page. Le hook appelle votre propre fonction navigate, donc vos guards, votre authentification et vos layouts continuent de fonctionner comme aujourd'hui. Les chemins acceptent des paramètres, une seule route couvre toutes les pages de détail.

AppLayout.tsx
import { useAgoNavigation } from "@useago/sdk/react";

// Votre layout existant. Seul le hook est nouveau.
useAgoNavigation(navigate, [
  { name: "invoices", path: "/invoices", description: "Liste et téléchargement des factures" },
  { name: "invoiceDetail", path: "/invoices/:id", description: "Détail d'une facture" },
  { name: "settings", path: "/settings", description: "Compte, facturation et équipe" },
]);
ÉTAT DE PAGE

L'agent modifie la page affichée

Exposez l'état modifiable d'un écran, filtres, tri, mode d'affichage, et « seulement les impayées, des plus récentes aux plus anciennes » met vraiment la vue à jour. Chaque valeur est envoyée avec le message, l'agent connaît donc l'état courant avant de le changer.

InvoiceList.tsx
import { useAgoPageState } from "@useago/sdk/react";

useAgoPageState([
  {
    name: "statusFilter",
    description: "Filtre les factures par statut",
    schema: { type: "string", enum: ["all", "paid", "overdue"] },
    get: () => status,   // l'agent lit la valeur courante
    set: setStatus,      // l'agent la modifie
  },
]);
FONCTIONS

Votre JavaScript devient un outil de l'agent

Gardez votre logique métier sous forme de fonction classique et décrivez ses arguments avec un schéma JSON. Quand l'agent l'appelle, le SDK exécute votre handler dans le navigateur avec les arguments générés et renvoie le résultat dans la conversation.

tools.ts
import { defineFunction } from "@useago/sdk";

export const getOrderStatusTool = defineFunction({
  name: "getOrderStatus",
  description: "Récupère le statut d'une commande à partir de son ID.",
  parameters: {
    type: "object",
    properties: {
      orderId: { type: "string", description: "L'ID de commande affiché à l'utilisateur" },
    },
    required: ["orderId"],
  },
  handler: async ({ orderId }) => {
    const order = await fetch(`/api/orders/${orderId}`).then((r) => r.json());
    return { orderId, status: order.status };
  },
});
TOUTES LES STACKS

Les mêmes deux étapes, quelle que soit votre stack

Le client ne dépend que de fetch et ReadableStream. Les bindings de framework sont des peer dependencies optionnelles, vous n'embarquez que celui que vous importez.

React
Provider, hooks et composants
@useago/sdk/react
Vue 3
Plugin et composables
@useago/sdk/vue
Angular
Service et provider, sans dépendance Angular forte
@useago/sdk/angular
TypeScript et JavaScript
Client, streaming, store et helpers
@useago/sdk
Tout site, sans build
Une balise script et un objet de configuration
@useago/sdk/widget
MODE HEADLESS

Le panneau par défaut n'est qu'un point de départ

Tout ce que fait le widget prêt à l'emploi est aussi exposé via des hooks et le client brut, pour construire exactement l'expérience dont votre produit a besoin.

Construisez votre propre chat

useChat et useMessages vous donnent la liste des messages, l'état de chargement et une fonction d'envoi. Le panneau par défaut est un point de départ, pas une limite.

Les sources sur chaque réponse

Chaque message de l'agent porte les documents utilisés, avec titre et URL, pour afficher des citations cliquables à vos utilisateurs.

Événements et streaming

Des hooks bas niveau sur le flux de messages permettent d'afficher les tokens à mesure, de suivre les appels d'outils et de brancher votre analytics.

Un client mock pour les tests

createMockClient remplace le réseau dans vos tests unitaires, vos parcours pilotés par l'agent restent couverts en CI sans appeler un modèle.

Devtools dans le navigateur

Une surcouche de debug optionnelle montre les routes, l'état de page et les fonctions visibles par l'agent, ce qui rend les erreurs de câblage évidentes.

Votre propre domaine

Un guide de reverse proxy permet de servir AGO depuis votre domaine, en same origin, pour garder cookies et politiques de sécurité simples.

LA PLATEFORME DERRIÈRE

Poser le SDK est la partie facile

Un agent face aux clients doit être fiable, sûr et mesurable. AGO opère la couche qui se trouve derrière le SDK pour que votre équipe n'ait pas à la reconstruire.

Une connaissance toujours à jour

Connectez Notion, Confluence, Zendesk, votre centre d'aide ou votre propre API. L'agent répond à partir de votre documentation réelle, pas d'une copie figée.

Évaluations et suivi de la qualité

Chaque conversation est évaluée et relisible. Vous voyez ce que l'agent a résolu, ce qu'il a raté et quoi corriger, avant que vos clients ne vous le disent.

Sécurité et reprise humaine

Outils cadrés, isolation par tenant et passage à votre équipe quand l'agent ne doit pas agir seul. Certification SOC 2 Type II.

FAQ

Les questions posées avant le premier commit

Comment le SDK s'intègre à une application qui existe déjà, et ce qui arrive à vos données.

Est ce que ça marche sur une application existante ?+

Oui, c'est tout l'objectif. Vous ajoutez un provider et un ou deux hooks dans le layout et les écrans que vous avez déjà. Votre routeur, votre gestion d'état et vos guards restent en place, parce que le SDK appelle vos fonctions au lieu de les remplacer.

Faut il restructurer mon routing ?+

Non. useAgoNavigation accepte n'importe quelle fonction qui prend un chemin, donc cela fonctionne avec React Router, Next.js, Vue Router, le routeur Angular ou une navigation maison. Votre routeur n'est jamais une dépendance du SDK.

Et si je n'utilise pas React ?+

Le client est indépendant de tout framework et fournit des bindings Vue 3 et Angular, plus un point d'entrée TypeScript. Pour un site sans build, une seule balise script affiche le widget.

Où vont les données ?+

Les messages vont vers votre tenant AGO. Les fonctions s'exécutent dans le navigateur de votre utilisateur, donc les données qu'elles manipulent ne quittent pas votre application tant que vous ne les renvoyez pas à l'agent. AGO est certifié SOC 2 Type II et conforme RGPD, avec un hébergement européen disponible.

Le SDK est il open source ?+

Le SDK est publié sur npm sous le nom @useago/sdk avec la licence Apache 2.0. Le code, les guides et un exemple exécutable par stack sont dans le dépôt public sur GitHub.

Combien de temps prend l'intégration ?+

Un panneau de chat fonctionnel prend environ deux minutes. Câbler la navigation, l'état de page et vos premières fonctions prend en général un après midi. Les équipes qui veulent être accompagnées passent par nos forward deployed engineers.

COMMENCER

Prêt à réinventer votre expérience client ?

Déployez des agents IA qui comprennent vraiment vos clients et votre business. Réservez une démo avec notre équipe pour voir Ago en action.