Periksa satu action Agent-Native melalui chat dan halaman React

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; 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 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:

   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, 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 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 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 menetapkan masukan Zod name, action GET, dan mcpTool: true. Pertahankan properti tersebut. Buat app/routes/hello.tsx dengan halaman kecil ini:

   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:

   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.

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 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 menetapkan properti sumber, termasuk mcpTool: true, pada commit 8e8419361fb415682cdf0e0e68538671dbb6aed3. Cuplikan ini tidak membuktikan apa yang akan dipasang proses pembuatan berikutnya.
• Variabel lingkungan menjelaskan cakupan kunci, pemilihan model, dan batas publik VITE_. Periksa ketentuan penyedia secara terpisah; panduan ini tidak meninjau permintaan chat langsung.