Vercel AI SDK v5 memungkinkan pengembang React untuk memindahkan panggilan large-language-model (LLM) ke server, menjaga API key tetap tersembunyi dan memangkas latensi yang muncul dari streaming potongan teks di browser. Arsitektur berbasis transport yang baru juga memisahkan penanganan state, sehingga kode UI tetap ringan sementara SDK mengelola streaming, riwayat, dan pemanggilan tool.

Mengapa pendekatan lama merusak model

Sebagian besar chatbot React yang dibangun sebelum v5 melakukan streaming output model langsung ke client. Hal ini memaksa pengembang untuk menyematkan secret key LLM ke dalam kode front-end, sehingga terekspos di network inspector browser. Tim juga menggunakan useState untuk mem-buffer setiap token yang masuk, yang menyebabkan re-render pada setiap potongan kecil. UI menjadi berkedip (flicker) dan kode berubah menjadi tumpukan callback yang berantakan.

Hasilnya: siapa pun bisa mencuri key tersebut, dan percakapan mengalami lag sementara pengembang harus bergelut dengan kerumitan pengelolaan state tingkat rendah.

Apa yang diubah v5 di balik layar

  • Arsitektur Berbasis Transport – SDK kini memperlakukan koneksi ke LLM sebagai lapisan transport modular. Panggilan berasal dari rute API di server, sehingga secret key tidak pernah meninggalkan backend. Transport mengabstraksi protokol streaming, memberikan aliran pesan yang bersih dan bertipe (typed) ke front end.

  • Pemanggilan Tool Bertipe (Typed Tool Invocations) – Saat model memutuskan untuk memanggil sebuah tool (misalnya, pencarian cuaca atau pengambilan kalender), SDK membungkus permintaan tersebut ke dalam payload bertipe. Front end membaca bentuk payload secara langsung, menghilangkan parsing ad-hoc dan mengurangi error saat runtime.

  • Manajemen State yang Terpisah (Decoupled) – Hook useChat tidak lagi memaksakan satu state store tunggal. Ia menyediakan callback dan utilitas yang dapat digunakan oleh library state apa pun—Zustand, Redux, atau React context biasa. Komponen UI tetap fokus pada rendering sementara SDK melakukan pekerjaan beratnya.

Alur kerja praktis

  1. Logika LLM di sisi server – Di dalam rute API, panggil streamText (atau helper streaming yang setara). SDK melakukan streaming output model kembali ke client melalui koneksi yang aman, menjaga API key tetap di luar browser.
  2. UI di sisi client – Impor useChat dalam komponen React. Hook tersebut mengembalikan daftar pesan saat ini, fungsi untuk mengirim input pengguna baru, dan flag status. Karena state berada di tempat lain, Anda dapat menghubungkan pengelola state apa pun yang sudah Anda gunakan.
  3. Penanganan tool – Saat model mengeluarkan panggilan tool, SDK mengirimkan objek terstruktur ke client. Render widget cuaca, pemilih kalender, atau elemen UI kustom lainnya tanpa perlu menulis kode sinkronisasi manual.

Hasilnya adalah pemisahan yang bersih: server mengelola semua interaksi LLM, sedangkan client hanya mengelola presentasi. Tidak ada lagi parsing raw-stream, tidak ada lagi kebocoran key yang tidak disengaja, dan tidak ada lagi UI yang tidak stabil akibat re-render per token.

Siapa yang akan diuntungkan, dan siapa yang mungkin ragu

Apa yang perlu diperhatikan selanjutnya

Kesimpulan

Vercel AI SDK v5 membentuk kembali pengembangan chatbot React dengan memindahkan panggilan LLM ke server, memberikan data tool yang bertipe, dan membebaskan front end dari kerumitan pengelolaan state tingkat rendah. Perubahan ini mengatasi dua jebakan terbesar—rahasia yang terekspos dan UI yang tidak stabil—sambil membiarkan pengembang tetap memegang kendali atas stack state mereka sendiri.