Edisi Markdown

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

# Periksa satu action Agent-Native melalui chat dan halaman React

> Panggil action hello dari templat Chat melalui chat agen dan rute React, ubah satu nilai kembalian, lalu bandingkan hasil terdokumentasi sambil memeriksa bukti pemanggilan alat.

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.

Templat Chat Agent-Native menyertakan action `hello` yang dapat dipanggil agen. Pengembang TypeScript dapat menambahkan rute React kecil yang memanggil action yang sama, mengubah satu nilai kembalian, dan membandingkan kedua hasil. Panduan ini mengikuti [contoh dalam dokumentasi Agent-Native](https://www.agent-native.com/docs/); BIG CHANGE meninjau dokumentasi dan sumber templat, tetapi tidak menjalankan aplikasi.

## Perubahan besar

- **Yang berubah:** satu action dapat menyediakan operasi bertipe yang sama untuk alat agen dan kueri React. Dalam contoh ini, kode sapaan berada dalam satu berkas.
- **Mengapa penting:** pengembang dapat memeriksa apakah kedua pemanggil menerima hasil yang sama setelah perubahan kode. Ini mengurangi kemungkinan memelihara logika sapaan terpisah untuk chat dan halaman; bukan bukti bahwa keduanya berbagi status aplikasi yang tersimpan.
- **Yang perlu diperiksa:** bandingkan pemanggilan action sebenarnya dan nilai kembaliannya ketika antarmuka chat menampilkannya. Kalimat model yang meyakinkan saja tidak membuktikan bahwa `hello` dipanggil. Sebelum memakai pola ini untuk operasi penting, nilai otorisasi, validasi, dan penulisan status secara terpisah.

## Siapkan templat Chat yang didokumentasikan

Anda memerlukan Node.js 22.22 atau lebih baru, `pnpm`, editor kode, serta kunci OpenAI API untuk pemanggilan chat. Antarmuka dapat disiapkan sebelum menghubungkan model. [Paket core yang diperiksa](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) dan registri npm menunjukkan versi `0.209.2` pada 18 Oktober 2026. Perintah pembuatan resmi memakai `@latest` yang berubah; periksa kembali versinya sebelum mengikuti panduan.

1. Di direktori baru, buat dan mulai aplikasi Chat mandiri:

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

   Buka URL lokal yang dicetak `pnpm dev` dan pilih **Continue as local dev**. Nomor port dapat bertambah jika 8080 sedang digunakan. Aplikasi yang dihasilkan menyertakan `actions/hello.ts`.

2. Hubungkan agen chat melalui **Custom keys** dan kunci OpenAI API Anda, kemudian pilih model yang tersedia di Settings. Menurut [panduan variabel lingkungan](https://www.agent-native.com/docs/environment-variables/), Custom keys menyimpan kredensial dengan cakupan tertentu dalam penyimpanan aplikasi terenkripsi yang didukung basis data. Jangan masukkan kunci ke kontrol versi atau variabel `VITE_` yang terlihat oleh peramban. Permintaan model memakai akun penyedia milik pemilik kunci; periksa harga terkini dan [kontrol data](https://developers.openai.com/api/docs/guides/your-data) sebelum mengirim materi sensitif. Biaya per tugas dan perilaku retensi tidak diukur di sini.
3. Di chat Get started, minta: `Call the hello action for Alex.` Dokumentasi [Panduan awal](https://www.agent-native.com/docs/) menampilkan `Hello, Alex!` sebagai balasan yang diharapkan. Jika antarmuka menampilkan detail alat, pastikan `hello` dipanggil dengan `name: "Alex"` dan mengembalikan pesan tersebut. Kalimat yang cocok tanpa bukti pemanggilan belum meyakinkan.
4. Periksa `actions/hello.ts`. [Templat Chat pada revisi tetap](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) menetapkan masukan Zod `name`, action GET, dan `mcpTool: true`. Pertahankan properti tersebut. Buat `app/routes/hello.tsx` dengan halaman kecil ini:

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

   Mulai ulang `pnpm dev` agar rute ditemukan, lalu tambahkan `/hello` ke URL lokal yang dicetak. Dengan `Alex` pada masukan, hasil yang didokumentasikan adalah `Hello, Alex!`.

5. Dalam fungsi `run` yang sudah ada di `actions/hello.ts`, ganti hanya pernyataan pengembalian:

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

   Muat ulang `/hello` dan minta chat memanggil `hello` untuk Alex lagi. Ekspektasi dokumentasi adalah `Welcome, Alex.` di kedua tempat. Bandingkan pesan pada halaman dengan hasil action di chat, termasuk detail alat bila tersedia. Halaman menyimpan masukannya dalam status React; action sapaan ini tidak membaca atau menulis catatan bersama.

| Pemeriksaan | Sebelum mengubah pengembalian | Setelah mengubah pengembalian |
| --- | --- | --- |
| `/hello` dengan `Alex` | `Hello, Alex!` | `Welcome, Alex.` |
| Hasil action chat untuk `name: "Alex"` | `Hello, Alex!` | `Welcome, Alex.` |

Inilah nilai yang diharapkan dalam dokumentasi. Catat nilai yang Anda lihat dan detail pemanggilan yang tersedia sebelum menganggap percobaan selesai.

Jika `pnpm` tidak ada, jalankan `corepack enable` dalam aplikasi yang dihasilkan. Untuk kesalahan peer dependency, panduan resmi menyarankan `npx clear-npx-cache` sebelum mencoba lagi. Jika chat menampilkan **Connect AI**, selesaikan pengaturan penyedia sebelum mendiagnosis action. Jika `/hello` tidak ada, mulai ulang server pengembangan setelah membuat rute. Ini langkah pemulihan terdokumentasi, bukan hasil yang kami amati.

## Sumber dan bacaan lanjutan

- [Panduan awal Agent-Native](https://www.agent-native.com/docs/) mendokumentasikan pembuatan, instruksi agen, React hook, balasan yang diharapkan, dan pemulihan. Kutipan action-nya menghilangkan properti yang ada pada templat revisi tetap, sehingga edit action yang dihasilkan langsung pada berkasnya.
- [Action Chat `hello` pada revisi tetap](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) menetapkan properti sumber, termasuk `mcpTool: true`, pada commit `8e8419361fb415682cdf0e0e68538671dbb6aed3`. Cuplikan ini tidak membuktikan apa yang akan dipasang proses pembuatan berikutnya.
- [Variabel lingkungan](https://www.agent-native.com/docs/environment-variables/) menjelaskan cakupan kunci, pemilihan model, dan batas publik `VITE_`. Periksa ketentuan penyedia secara terpisah; panduan ini tidak meninjau permintaan chat langsung.

## Sources

- [Panduan awal Agent-Native](https://www.agent-native.com/docs/) — [Panduan awal Agent-Native](https://www.agent-native.com/docs/) mendokumentasikan pembuatan, instruksi agen, React hook, balasan yang diharapkan, dan pemulihan. Kutipan action-nya menghilangkan properti yang ada pada templat revisi tetap, sehingga edit action yang dihasilkan langsung pada berkasnya.
- [Action Chat hello pada revisi tetap](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) — [Action Chat `hello` pada revisi tetap](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/templates/chat/actions/hello.ts) menetapkan properti sumber, termasuk `mcpTool: true`, pada commit `8e8419361fb415682cdf0e0e68538671dbb6aed3`. Cuplikan ini tidak membuktikan apa yang akan dipasang proses pembuatan berikutnya.
- [Paket core pada revisi tetap](https://github.com/BuilderIO/agent-native/blob/8e8419361fb415682cdf0e0e68538671dbb6aed3/packages/core/package.json) — Versi paket, persyaratan Node, dan lisensi.
- [Variabel lingkungan Agent-Native](https://www.agent-native.com/docs/environment-variables/) — [Variabel lingkungan](https://www.agent-native.com/docs/environment-variables/) menjelaskan cakupan kunci, pemilihan model, dan batas publik `VITE_`. Periksa ketentuan penyedia secara terpisah; panduan ini tidak meninjau permintaan chat langsung.
- [Kontrol data OpenAI API](https://developers.openai.com/api/docs/guides/your-data) — Referensi penanganan data penyedia; tidak ada lalu lintas khusus tugas yang diamati.