Markdown edition

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

> Call the Chat template's hello action from agent chat and a React route, change one return value, and compare the documented results while checking for tool invocation evidence.

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.

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

```bash
   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](https://www.agent-native.com/docs/environment-variables/) 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](https://developers.openai.com/api/docs/guides/your-data) 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](https://www.agent-native.com/docs/) 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](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) defines a Zod `name` input, a GET action and `mcpTool: true`. Keep those properties. Create `app/routes/hello.tsx` with this small 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>
     );
   }
```

   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:

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

| Check | Before the return edit | After the return edit |
| --- | --- | --- |
| `/hello` with `Alex` | `Hello, Alex!` | `Welcome, Alex.` |
| Chat action result for `name: "Alex"` | `Hello, Alex!` | `Welcome, Alex.` |

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](https://www.agent-native.com/docs/) 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](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) establishes the source properties, including `mcpTool: true`, at commit `8e8419361fb415682cdf0e0e68538671dbb6aed3`. This snapshot does not prove what a later scaffold installs.
- [Environment Variables](https://www.agent-native.com/docs/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.

## Sources

- [Agent-Native Getting Started](https://www.agent-native.com/docs/) — Scaffold, route, expected chat and UI result, recovery
- [Pinned Chat hello action](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) — Actual template includes mcpTool true
- [Pinned core package](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) — Version, Node engine and license
- [Agent-Native Environment Variables](https://www.agent-native.com/docs/environment-variables/) — OpenAI key route and browser secret boundary
- [OpenAI API data controls](https://developers.openai.com/api/docs/guides/your-data) — Provider data-handling reference; no task-specific traffic observed