Vercel AI SDK v5 membolehkan pembangun React memindahkan panggilan model bahasa besar (LLM) ke pelayan, memastikan kunci API kekal tersembunyi dan mengurangkan kependaman (latency) yang berpunca daripada penstriman cebisan teks dalam pelayar. Seni bina berasaskan pengangkutan (transport-based) yang baharu ini juga memisahkan pengendalian keadaan (state handling), supaya kod UI kekal ringan sementara SDK menguruskan penstriman, sejarah, dan panggilan alatan (tool invocations).

Mengapa pendekatan lama merosakkan model

Kebanyakan chatbot React yang dibina sebelum v5 menstrim output model terus ke klien. Ini memaksa pembangun untuk menyematkan kunci rahsia LLM dalam kod hadapan (front-end), menjadikannya terdedah dalam pemeriksa rangkaian (network inspector) pelayar. Pasukan juga menggunakan useState untuk menyimpan penimbal (buffer) bagi setiap token yang masuk, menyebabkan render semula (re-render) pada setiap cebisan kecil. UI berkelip-kelip dan kod menjadi serabut dengan panggilan balik (callbacks) yang berselirat.

Hasilnya: sesiapa sahaja boleh mencuri kunci tersebut, dan perbualan menjadi lembap sementara pembangun bergelut dengan pengurusan keadaan (state plumbing) tahap rendah.

Apa yang diubah oleh v5 di sebalik tabir

  • Seni Bina Berasaskan Pengangkutan (Transport-Based Architecture) – SDK kini menganggap sambungan ke LLM sebagai lapisan pengangkutan modular. Panggilan bermula dari laluan API pada pelayan, jadi kunci rahsia tidak akan meninggalkan bahagian belakang (backend). Pengangkutan ini mengabstraksikan protokol penstriman, menyampaikan aliran mesej yang bersih dan bertipe (typed) ke bahagian hadapan (front end).

  • Panggilan Alatan Bertipe (Typed Tool Invocations) – Apabila model memutuskan untuk memanggil alatan (contohnya, carian cuaca atau pengambilan kalendar), SDK membungkus permintaan tersebut ke dalam muatan (payload) bertipe. Bahagian hadapan membaca bentuk muatan tersebut secara terus, menghapuskan keperluan untuk analisis (parsing) ad-hoc dan mengurangkan ralat semasa masa larian (runtime errors).

  • Pengurusan Keadaan Terpisah (Decoupled State Management) – Hook useChat tidak lagi memaksa satu storan keadaan tunggal. Ia menyediakan panggilan balik dan utiliti yang boleh digunakan oleh mana-mana perpustakaan keadaan—Zustand, Redux, atau konteks React biasa. Komponen UI kekal fokus pada render manakala SDK melakukan kerja-kerja berat.

Aliran kerja praktikal

  1. Logik LLM di bahagian pelayan – Dalam laluan API, panggil streamText (atau pembantu penstriman yang setara). SDK menstrim output model kembali ke klien melalui sambungan selamat, memastikan kunci API tidak terdedah dalam pelayar.
  2. UI di bahagian klien – Import useChat dalam komponen React. Hook tersebut mengembalikan senarai mesej semasa, fungsi untuk menghantar input pengguna baharu, dan bendera status (status flags). Oleh kerana keadaan (state) berada di tempat lain, anda boleh menyambungkan mana-mana pengurus keadaan yang anda gunakan.
  3. Pengendalian alatan – Apabila model mengeluarkan panggilan alatan, SDK menyampaikan objek berstruktur kepada klien. Render widget cuaca, pemilih kalendar, atau mana-mana elemen UI tersuai tanpa perlu menulis kod penyelarasan (sync code) secara manual.

Hasilnya adalah pengasingan yang bersih: pelayan memiliki semua interaksi LLM, manakala klien hanya memiliki persembahan. Tiada lagi analisis aliran mentah (raw-stream parsing), tiada lagi kebocoran kunci yang tidak disengajakan, dan tiada lagi gangguan UI (jitter) akibat render semula bagi setiap token.

Siapa yang akan mendapat manfaat, dan siapa yang mungkin teragak-agak

Apa yang perlu diperhatikan seterusnya

Kesimpulan

Vercel AI SDK v5 membentuk semula pembangunan chatbot React dengan memindahkan panggilan LLM ke pelayan, menyampaikan data alatan bertipe, dan membebaskan bahagian hadapan daripada pengurusan keadaan tahap rendah yang rumit. Peralihan ini menangani dua masalah terbesar—rahsia yang terdedah dan UI yang tidak lancar—sambil membolehkan pembangun mengekalkan kawalan ke atas timbunan keadaan (state stack) mereka sendiri.