Vérifier une action Agent-Native dans le chat et une page React

Le modèle Chat d’Agent-Native contient une action hello que son agent peut appeler. Un développeur TypeScript peut ajouter une petite route React qui appelle la même action, modifier une valeur de retour et comparer les deux résultats. Ce guide suit l’exemple documenté d’Agent-Native ; BIG CHANGE a examiné la documentation et le code du modèle, sans exécuter l’application.

Le grand changement

• Ce qui change : une action peut fournir la même opération typée à un outil d’agent et à une requête React. Ici, le code de salutation se trouve dans un seul fichier.
• Pourquoi cela compte : le développeur peut vérifier que les deux appelants reçoivent le même résultat après une modification du code. Cela réduit le risque de maintenir deux logiques de salutation distinctes, sans démontrer un partage de l’état enregistré de l’application.
• À vérifier : comparez l’appel réel de l’action et sa valeur de retour lorsque l’interface de chat les expose. Une phrase plausible du modèle ne prouve pas à elle seule qu’il a appelé hello. Avant d’employer ce schéma pour des opérations importantes, évaluez séparément l’autorisation, la validation et les écritures d’état.

Configurer le modèle Chat documenté

Il faut Node.js 22.22 ou ultérieur, pnpm, un éditeur de code et une clé OpenAI API pour l’appel depuis le chat. L’interface peut être configurée avant de connecter un modèle. Le paquet core examiné et le registre npm indiquaient la version 0.209.2 le 18 octobre 2026. La commande officielle de création utilise la cible variable @latest ; vérifiez de nouveau sa version avant de suivre ce guide.

1. Dans un nouveau répertoire, créez et démarrez une application Chat autonome :

   npx --yes @agent-native/core@latest create my-app --standalone --template chat
   cd my-app
   corepack enable
   pnpm install
   pnpm dev

Ouvrez l’URL locale affichée par pnpm dev, puis choisissez Continue as local dev. Si le port 8080 est occupé, le numéro de port peut augmenter. L’application générée contient actions/hello.ts.

2. Connectez l’agent avec Custom keys et votre clé OpenAI API, puis sélectionnez un modèle disponible dans Settings. Le guide des variables d’environnement précise que Custom keys conserve les identifiants à portée limitée dans le stockage chiffré de l’application, adossé à une base de données. Ne placez pas les clés dans le dépôt de code ni dans des variables VITE_ exposées au navigateur. Les requêtes utilisent le compte fournisseur du propriétaire de la clé ; consultez ses tarifs actuels et ses contrôles de données avant d’envoyer des informations sensibles. Aucun coût par tâche ni comportement de conservation n’a été mesuré ici.
3. Dans le chat Get started, demandez : Call the hello action for Alex. Le guide de démarrage donne Hello, Alex! comme réponse attendue. Lorsque l’interface affiche les détails des outils, confirmez l’appel de hello avec name: "Alex" et le retour de ce message. Une phrase correspondante sans preuve d’appel ne suffit pas.
4. Examinez actions/hello.ts. Le modèle Chat figé à cette révision définit une entrée Zod name, une action GET et mcpTool: true. Conservez ces propriétés. Créez app/routes/hello.tsx avec cette petite page :

   import { useActionQuery } from "@agent-native/core/client/hooks";
   import { useState } from "react";

   export default function HelloRoute() {
     const [name, setName] = useState("Alex");
     const { data } = useActionQuery("hello", { name });

     return (
       <main>
         <label htmlFor="greeting-name">Name</label>
         <input
           id="greeting-name"
           value={name}
           onChange={(event) => setName(event.target.value)}
         />
         <p>{data?.message}</p>
       </main>
     );
   }

Redémarrez pnpm dev pour détecter la route, puis ajoutez /hello à l’URL locale affichée. Avec Alex dans le champ, le résultat documenté est Hello, Alex!.

5. Dans la fonction run existante de actions/hello.ts, remplacez uniquement l’instruction de retour :

   return { message: `Welcome, ${name}.` };

Actualisez /hello et demandez au chat d’appeler de nouveau hello pour Alex. Le résultat attendu dans la documentation est Welcome, Alex. aux deux endroits. Comparez le message affiché sur la page avec le résultat de l’action dans le chat, y compris les détails de l’outil lorsqu’ils sont disponibles. La page conserve sa saisie dans l’état React ; cette action de salutation ne lit ni n’écrit d’enregistrement partagé.

Ces valeurs sont celles attendues par la documentation. Notez vos propres valeurs affichées et les détails d’appel disponibles avant de considérer l’expérience comme terminée.

Si pnpm manque, exécutez corepack enable dans l’application générée. Pour les erreurs de dépendances homologues, le guide officiel propose npx clear-npx-cache avant de réessayer. Si le chat affiche Connect AI, terminez la configuration du fournisseur avant de chercher une erreur dans l’action. Si /hello est absent, redémarrez le serveur de développement après avoir créé la route. Il s’agit de solutions documentées, pas de résultats que nous avons observés.

Sources et lectures complémentaires

• Démarrage d’Agent-Native décrit la création de l’application, l’instruction pour l’agent, le hook React, les réponses attendues et les solutions aux erreurs. Son extrait d’action omet une propriété présente dans le modèle figé ; modifiez donc l’action générée sur place.
• Action hello du modèle Chat à la révision retenue établit les propriétés du code, notamment mcpTool: true, au commit 8e8419361fb415682cdf0e0e68538671dbb6aed3. Cet instantané ne prouve pas ce qu’installera une création ultérieure.
• Variables d’environnement explique la portée des clés, la sélection du modèle et la limite publique de VITE_. Consultez séparément les conditions de votre fournisseur ; ce guide n’a pas inspecté de requête réelle du chat.