LE MONDE NE S’ARRÊTE PAS.RSS
BIG CHANGE.

Édition Markdown

AI-translated from English; not yet reviewed by a fluent editor.

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

> Appelez l’action hello du modèle Chat depuis le chat de l’agent et une route React, modifiez une valeur de retour, puis comparez les résultats documentés en recherchant la preuve de l’appel de l’outil.

By BIG CHANGE Editorial

Published: 2026-10-19T10:08:15.758Z
Updated: 2026-10-19T10:08:15.758Z
Canonical: https://bigchange.ai/blog/agent-native-chat-react-action-parity-guide

![Conceptual charcoal illustration of one laptop showing two blank side-by-side work areas: conversation shapes on the left and a plain input and output area on the right.](https://bigchange.ai/api/media/file/agent-native-chat-react-comparison-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE; no actual product interface, action invocation or test result is depicted.

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](https://www.agent-native.com/docs/) ; 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é](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) 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 :

```bash
   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](https://www.agent-native.com/docs/environment-variables/) 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](https://developers.openai.com/api/docs/guides/your-data) 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](https://www.agent-native.com/docs/) 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](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) 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 :

```typescript
   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 :

```typescript
   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é.

| Vérification | Avant la modification du retour | Après la modification du retour |
| --- | --- | --- |
| `/hello` avec `Alex` | `Hello, Alex!` | `Welcome, Alex.` |
| Résultat de l’action du chat pour `name: "Alex"` | `Hello, Alex!` | `Welcome, Alex.` |

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](https://www.agent-native.com/docs/) 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](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) é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](https://www.agent-native.com/docs/environment-variables/) 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.

## Sources

- [Démarrage d’Agent-Native](https://www.agent-native.com/docs/) — [Démarrage d’Agent-Native](https://www.agent-native.com/docs/) 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](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) — [Action `hello` du modèle Chat à la révision retenue](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) é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.
- [Paquet core à la révision retenue](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) — Version, exigence Node et licence du paquet.
- [Variables d’environnement d’Agent-Native](https://www.agent-native.com/docs/environment-variables/) — [Variables d’environnement](https://www.agent-native.com/docs/environment-variables/) 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.
- [Contrôles des données OpenAI API](https://developers.openai.com/api/docs/guides/your-data) — Référence sur le traitement des données par le fournisseur ; aucun trafic propre à la tâche n’a été observé.