Check one Agent-Native action through chat and a React page

Agent-Native's Chat template includes a hello action that its agent can call. A TypeScript developer can add a small React route that calls the same action, then change one return value and compare the two results. This guide follows Agent-Native's documented example; BIG CHANGE inspected the documentation and template source but did not run the app.

The big change

• What changed: An action can supply one typed operation to both an agent tool and a React query. In this example, the greeting's code lives in one file.
• Why it matters: A developer can check whether the two callers receive the same result after a code change. That reduces the chance of maintaining separate greeting logic for chat and the page; it does not establish that the callers share saved application state.
• What to watch: Compare the actual action call and returned value when the chat interface exposes them. A plausible sentence from the model alone cannot prove it called hello. Before using this pattern for consequential operations, assess authorization, validation and state writes separately.

Set up the documented Chat template

You need Node.js 22.22 or later, pnpm, a code editor and an OpenAI API key for the chat call. The UI setup can proceed before connecting a model. The inspected core package and npm registry reported version 0.209.2 on October 18, 2026. The official scaffold command uses moving @latest; check its version again before following this guide.

1. In a new directory, create and start a standalone Chat app:

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

Open the local URL printed by pnpm dev and choose Continue as local dev. The port can increase if 8080 is occupied. The generated app includes actions/hello.ts.

2. Connect the chat agent with Custom keys and your OpenAI API key, then select an available model in Settings. The environment-variable guide says Custom keys stores scoped credentials in the app's encrypted database-backed store. Keep keys out of source control and browser-exposed VITE_ variables. Model requests use the key owner's provider account; inspect its current pricing and data controls before sending sensitive material. No task cost or retention behavior was measured here.
3. In the Get started chat, ask: Call the hello action for Alex. The getting-started guide shows Hello, Alex! as the expected reply. Where the interface exposes tool details, confirm it invoked hello with name: "Alex" and returned that message. A matching sentence without invocation evidence is inconclusive.
4. Inspect actions/hello.ts. The pinned Chat template defines a Zod name input, a GET action and mcpTool: true. Keep those properties. Create app/routes/hello.tsx with this small 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>
     );
   }

Restart pnpm dev so it discovers the route, then visit the printed local URL with /hello appended. With Alex in the input, the documented result is Hello, Alex!.

5. In the existing run function of actions/hello.ts, replace only its return statement:

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

Refresh /hello and ask chat to call hello for Alex again. The documented expectation is Welcome, Alex. in both places. Compare the page's rendered message with the action result in chat, including its tool details when available. The page keeps its input in React state; this greeting action does not read or write a shared record.

These are the documentation's expected values. Record your own displayed values and available invocation details before treating the experiment as complete.

If pnpm is missing, run corepack enable in the generated app. For peer-dependency errors, the official guide suggests npx clear-npx-cache before retrying. If chat says Connect AI, finish provider setup before diagnosing the action. If /hello is absent, restart the development server after creating the route. These are documented recovery steps, not results we observed.

Sources & further reading

• Agent-Native Getting Started documents the scaffold, agent prompt, React hook, expected responses and recovery steps. Its action excerpt omits a property present in the pinned template, so edit the generated action in place.
• Pinned Chat hello action establishes the source properties, including mcpTool: true, at commit 8e8419361fb415682cdf0e0e68538671dbb6aed3. This snapshot does not prove what a later scaffold installs.
• Environment Variables explains key scope, model selection and the public VITE_ boundary. Check your provider's terms separately; this guide did not inspect a live chat request.