Markdown பதிப்பு

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

# அரட்டையிலும் React பக்கத்திலும் ஒரே Agent-Native action-ஐ சரிபார்க்கவும்

> Chat வார்ப்புருவின் hello action-ஐ ஏஜென்ட் அரட்டையிலும் React route-இலும் அழைத்து, ஒரு return value-ஐ மாற்றி, tool call ஆதாரத்துடன் ஆவணப்படுத்தப்பட்ட முடிவுகளை ஒப்பிடவும்.

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-இன் Chat வார்ப்புருவில் ஏஜென்ட் அழைக்கக்கூடிய `hello` action உள்ளது. TypeScript உருவாக்குநர் அதே action-ஐ அழைக்கும் சிறிய React route-ஐச் சேர்த்து, ஒரு return value-ஐ மாற்றி, இரண்டு முடிவுகளை ஒப்பிடலாம். இந்த வழிகாட்டி [Agent-Native ஆவணத்தின் எடுத்துக்காட்டைப்](https://www.agent-native.com/docs/) பின்பற்றுகிறது; BIG CHANGE ஆவணத்தையும் வார்ப்புரு மூலத்தையும் ஆய்வு செய்தது, ஆனால் செயலியை இயக்கவில்லை.

## பெரிய மாற்றம்

- **எது மாறுகிறது:** ஒரே action, ஏஜென்ட் கருவிக்கும் React query-க்கும் ஒரே typed operation-ஐ வழங்கலாம். இங்கு வாழ்த்துக் குறியீடு ஒரே கோப்பில் உள்ளது.
- **ஏன் முக்கியம்:** குறியீட்டை மாற்றிய பிறகு இரண்டு அழைப்பாளர்களும் ஒரே முடிவைப் பெறுகிறார்களா என உருவாக்குநர் சரிபார்க்கலாம். இது அரட்டைக்கும் பக்கத்திற்கும் தனித்தனி வாழ்த்து logic-ஐப் பராமரிக்கும் வாய்ப்பைக் குறைக்கிறது; சேமிக்கப்பட்ட application state பகிரப்படுவதை நிரூபிப்பதில்லை.
- **எதைப் பார்க்க வேண்டும்:** அரட்டை இடைமுகம் காட்டினால் உண்மையான action call-ஐயும் return value-ஐயும் ஒப்பிடவும். மாதிரியின் நம்பத்தகுந்த வாக்கியம் மட்டும் `hello` அழைக்கப்பட்டது என்பதை நிரூபிக்காது. முக்கியமான செயல்பாடுகளுக்கு இந்த முறையைப் பயன்படுத்தும் முன் authorization, validation, state writes ஆகியவற்றைத் தனித்தனியாக மதிப்பிடவும்.

## ஆவணப்படுத்தப்பட்ட Chat வார்ப்புருவை அமைக்கவும்

Node.js 22.22 அல்லது புதிய பதிப்பு, `pnpm` , குறியீட்டு editor, அரட்டை அழைப்புக்கான OpenAI API key தேவை. மாதிரியை இணைக்கும் முன்பே UI அமைக்கலாம். ஆய்வு செய்யப்பட்ட [core தொகுப்பு](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) மற்றும் npm registry-இல் 2026 அக்டோபர் 18 அன்று பதிப்பு `0.209.2` இருந்தது. அதிகாரப்பூர்வ scaffold command மாறக்கூடிய `@latest` -ஐப் பயன்படுத்துகிறது; தொடங்கும் முன் பதிப்பை மீண்டும் சரிபார்க்கவும்.

1. புதிய அடைவில் தனித்த Chat செயலியை உருவாக்கித் தொடங்கவும்:

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

   கட்டளை `pnpm dev` காட்டும் உள்ளூர் URL-ஐத் திறந்து **Continue as local dev** என்பதைத் தேர்ந்தெடுக்கவும். 8080 பயன்பாட்டில் இருந்தால் port number அதிகரிக்கலாம். உருவான செயலியில் `actions/hello.ts` இருக்கும்.

2. இணைக்க **Custom keys** மற்றும் உங்கள் OpenAI API key மூலம் அரட்டை ஏஜென்டை இணைத்து, Settings-இல் கிடைக்கும் மாதிரியைத் தேர்ந்தெடுக்கவும். [Environment variables வழிகாட்டி](https://www.agent-native.com/docs/environment-variables/) படி Custom keys வரையறுக்கப்பட்ட scope உடைய credentials-ஐ செயலியின் encrypted, database-backed storage-இல் வைக்கிறது. key-ஐ source control-இலோ உலாவிக்கு வெளிப்படும் `VITE_` variables-இலோ வைக்க வேண்டாம். மாதிரி கோரிக்கைகள் key உரிமையாளரின் provider account-ஐப் பயன்படுத்துகின்றன; உணர்வுப்பூர்வ தகவலை அனுப்பும் முன் தற்போதைய கட்டணங்களையும் [data controls](https://developers.openai.com/api/docs/guides/your-data)-ஐயும் பார்க்கவும். இங்கு task செலவோ data retention நடத்தையோ அளவிடப்படவில்லை.
3. Get started அரட்டையில் `Call the hello action for Alex.` எனக் கேட்கவும். [தொடக்க வழிகாட்டியில்](https://www.agent-native.com/docs/) எதிர்பார்க்கப்படும் பதில் `Hello, Alex!` . tool details கிடைத்தால் `hello` என்பது `name: "Alex"` உடன் அழைக்கப்பட்டு அந்தச் செய்தி திரும்பியதை உறுதிசெய்யவும். அழைப்பு ஆதாரமின்றி பொருந்தும் வாக்கியம் மட்டும் தீர்மானிக்கப் போதாது.
4. கோப்பு `actions/hello.ts` -ஐப் பார்க்கவும். [குறிப்பிட்ட revision-இன் Chat வார்ப்புரு](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) Zod `name` input, GET action, `mcpTool: true` ஆகியவற்றை வரையறுக்கிறது. அந்த properties-ஐ வைத்திருக்கவும். இந்தச் சிறிய பக்கத்துடன் `app/routes/hello.tsx` உருவாக்கவும்:

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

   புதிய route கண்டறியப்பட `pnpm dev` -ஐ மீண்டும் தொடங்கி, காட்டப்பட்ட உள்ளூர் URL-இன் இறுதியில் `/hello` சேர்க்கவும். input-இல் `Alex` இருந்தால் ஆவணப்படுத்தப்பட்ட முடிவு `Hello, Alex!` .

5. ஏற்கெனவே உள்ள `run` function-இல், அதாவது `actions/hello.ts` கோப்பில், return statement-ஐ மட்டும் மாற்றவும்:

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

   பக்கம் `/hello` -ஐப் புதுப்பித்து, Alex-க்காக `hello` -ஐ மீண்டும் அழைக்கச் சொல்லவும். ஆவணத்தில் இரு இடங்களிலும் `Welcome, Alex.` எதிர்பார்க்கப்படுகிறது. பக்கத்தில் காட்டப்படும் செய்தியை அரட்டையின் action result உடன் ஒப்பிட்டு, கிடைத்தால் tool details-ஐயும் பார்க்கவும். பக்கம் input-ஐ React state-இல் வைக்கிறது; இந்த வாழ்த்து action பகிரப்பட்ட record-ஐப் படிக்கவோ எழுதவோ செய்யாது.

| சரிபார்ப்பு | return மாற்றத்திற்கு முன் | return மாற்றத்திற்குப் பின் |
| --- | --- | --- |
| `/hello` இல் உள்ளீடு `Alex` | `Hello, Alex!` | `Welcome, Alex.` |
| அரட்டை action result, உள்ளீடு `name: "Alex"` | `Hello, Alex!` | `Welcome, Alex.` |

இவை ஆவணத்தில் எதிர்பார்க்கப்படும் மதிப்புகள். சோதனை முடிந்ததாகக் கருதும் முன் நீங்கள் கண்ட மதிப்புகளையும் கிடைக்கும் call details-ஐயும் பதிவு செய்யவும்.

கட்டளை `pnpm` இல்லையெனில் உருவான செயலியில் `corepack enable` இயக்கவும். peer-dependency பிழைகளுக்கு மீண்டும் முயலும் முன் `npx clear-npx-cache` இயக்க அதிகாரப்பூர்வ வழிகாட்டி பரிந்துரைக்கிறது. அரட்டையில் **Connect AI** வந்தால் action-ஐப் பரிசோதிக்கும் முன் provider setup-ஐ முடிக்கவும். `/hello` இல்லையெனில் route உருவாக்கிய பின் development server-ஐ மீண்டும் தொடங்கவும். இவை ஆவணப்படுத்தப்பட்ட recovery steps; நாங்கள் கண்ட முடிவுகள் அல்ல.

## மூலங்களும் மேலும் படிக்கவும்

- [Agent-Native தொடக்க வழிகாட்டி](https://www.agent-native.com/docs/) scaffold, agent prompt, React hook, எதிர்பார்க்கப்படும் பதில்கள், recovery ஆகியவற்றை விளக்குகிறது. அதன் action பகுதி குறிப்பிட்ட வார்ப்புருவின் ஒரு property-ஐ விடுத்துள்ளது; எனவே உருவான action-ஐ அதே கோப்பில் திருத்தவும்.
- [குறிப்பிட்ட revision-இன் Chat `hello` action](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) இங்கே `mcpTool: true` உள்ளிட்ட source properties-ஐ commit `8e8419361fb415682cdf0e0e68538671dbb6aed3` -இல் உறுதிசெய்கிறது. இந்த snapshot பின்னர் scaffold என்ன install செய்யும் என்பதை நிரூபிக்காது.
- [Environment variables](https://www.agent-native.com/docs/environment-variables/) key scope, model selection மற்றும் `VITE_` -இன் பொதுவெளி எல்லையை விளக்குகிறது. provider நிபந்தனைகளைத் தனியே பார்க்கவும்; இந்த வழிகாட்டி உண்மையான chat request-ஐ ஆய்வு செய்யவில்லை.

## Sources

- [Agent-Native தொடக்க வழிகாட்டி](https://www.agent-native.com/docs/) — [Agent-Native தொடக்க வழிகாட்டி](https://www.agent-native.com/docs/) scaffold, agent prompt, React hook, எதிர்பார்க்கப்படும் பதில்கள், recovery ஆகியவற்றை விளக்குகிறது. அதன் action பகுதி குறிப்பிட்ட வார்ப்புருவின் ஒரு property-ஐ விடுத்துள்ளது; எனவே உருவான action-ஐ அதே கோப்பில் திருத்தவும்.
- [குறிப்பிட்ட revision-இன் Chat hello action](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) — [குறிப்பிட்ட revision-இன் Chat `hello` action](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) commit `8e8419361fb415682cdf0e0e68538671dbb6aed3`-இல் `mcpTool: true` உள்ளிட்ட source properties-ஐ உறுதிசெய்கிறது. இந்த snapshot பின்னர் scaffold என்ன install செய்யும் என்பதை நிரூபிக்காது.
- [குறிப்பிட்ட revision-இன் core தொகுப்பு](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) — தொகுப்புப் பதிப்பு, Node தேவை, உரிமம்.
- [Agent-Native environment variables](https://www.agent-native.com/docs/environment-variables/) — [Environment variables](https://www.agent-native.com/docs/environment-variables/) key scope, model selection மற்றும் `VITE_`-இன் பொதுவெளி எல்லையை விளக்குகிறது. provider நிபந்தனைகளைத் தனியே பார்க்கவும்; இந்த வழிகாட்டி உண்மையான chat request-ஐ ஆய்வு செய்யவில்லை.
- [OpenAI API data controls](https://developers.openai.com/api/docs/guides/your-data) — Provider தரவு கையாளுதல் குறிப்பு; இந்த task-இன் உண்மையான traffic கவனிக்கப்படவில்லை.