Comprobar una acción de Agent-Native desde el chat y una página React

La plantilla Chat de Agent-Native incluye una acción hello que puede llamar su agente. Un desarrollador TypeScript puede añadir una pequeña ruta React que llame a la misma acción, cambiar un valor de retorno y comparar ambos resultados. Esta guía sigue el ejemplo documentado de Agent-Native; BIG CHANGE examinó la documentación y el código de la plantilla, pero no ejecutó la aplicación.

El gran cambio

• Qué cambia: una acción puede ofrecer una misma operación tipada a una herramienta del agente y una consulta React. En este ejemplo, el código del saludo está en un solo archivo.
• Por qué importa: el desarrollador puede comprobar si ambos llamadores reciben el mismo resultado tras cambiar el código. Esto reduce la posibilidad de mantener dos lógicas de saludo separadas para el chat y la página; no demuestra que compartan el estado guardado de la aplicación.
• Qué comprobar: compara la llamada real y el valor devuelto cuando la interfaz del chat los muestre. Una frase verosímil del modelo no prueba por sí sola que haya llamado a hello. Antes de usar este patrón para operaciones importantes, evalúa por separado la autorización, la validación y las escrituras de estado.

Configurar la plantilla Chat documentada

Necesitas Node.js 22.22 o posterior, pnpm, un editor de código y una clave de OpenAI API para la llamada del chat. Puedes preparar la interfaz antes de conectar un modelo. El paquete core examinado y el registro npm indicaban la versión 0.209.2 el 18 de octubre de 2026. La orden oficial de creación usa el cambiante @latest; vuelve a comprobar la versión antes de seguir esta guía.

1. En un directorio nuevo, crea e inicia una aplicación Chat independiente:

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

Abre la URL local que muestra pnpm dev y elige Continue as local dev. El puerto puede aumentar si 8080 está ocupado. La aplicación generada incluye actions/hello.ts.

2. Conecta el agente mediante Custom keys y tu clave de OpenAI API; después selecciona un modelo disponible en Settings. La guía de variables de entorno dice que Custom keys guarda las credenciales con alcance delimitado en el almacenamiento cifrado de la aplicación respaldado por una base de datos. No incluyas claves en el control de versiones ni en variables VITE_ expuestas al navegador. Las peticiones usan la cuenta del proveedor del propietario de la clave; consulta sus precios actuales y controles de datos antes de enviar material sensible. Aquí no se midieron el coste por tarea ni el comportamiento de conservación.
3. En el chat Get started, pide: Call the hello action for Alex. La guía de inicio muestra Hello, Alex! como respuesta esperada. Si la interfaz ofrece detalles de herramientas, confirma que llamó a hello con name: "Alex" y devolvió ese mensaje. Una frase coincidente sin pruebas de la llamada no es concluyente.
4. Examina actions/hello.ts. La plantilla Chat fijada a esta revisión define una entrada Zod name, una acción GET y mcpTool: true. Conserva esas propiedades. Crea app/routes/hello.tsx con esta pequeña página:

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

Reinicia pnpm dev para que descubra la ruta y añade /hello a la URL local mostrada. Con Alex en la entrada, el resultado documentado es Hello, Alex!.

5. En la función run existente de actions/hello.ts, sustituye únicamente la instrucción de retorno:

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

Actualiza /hello y pide al chat que vuelva a llamar a hello para Alex. La expectativa documentada es Welcome, Alex. en ambos sitios. Compara el mensaje de la página con el resultado de la acción en el chat, incluidos los detalles de la herramienta cuando estén disponibles. La página mantiene su entrada en el estado React; esta acción de saludo no lee ni escribe un registro compartido.

Estos son los valores esperados de la documentación. Anota los valores que ves y los detalles de llamada disponibles antes de dar el experimento por terminado.

Si falta pnpm, ejecuta corepack enable en la aplicación generada. Para errores de dependencias pares, la guía oficial sugiere npx clear-npx-cache antes de reintentar. Si el chat dice Connect AI, termina la configuración del proveedor antes de diagnosticar la acción. Si no aparece /hello, reinicia el servidor de desarrollo después de crear la ruta. Son pasos de recuperación documentados, no resultados observados por nosotros.

Fuentes y lecturas complementarias

• Inicio de Agent-Native documenta la creación, la instrucción al agente, el hook React, las respuestas esperadas y la recuperación. Su fragmento de acción omite una propiedad presente en la plantilla fijada; edita la acción generada en su propio archivo.
• La acción hello de Chat en la revisión fijada establece las propiedades del código, incluido mcpTool: true, en el commit 8e8419361fb415682cdf0e0e68538671dbb6aed3. Esa instantánea no prueba qué instalará una creación posterior.
• Variables de entorno explica el alcance de las claves, la selección de modelo y el límite público de VITE_. Consulta por separado las condiciones de tu proveedor; esta guía no examinó una petición real del chat.