Cara Membuat Fitur Generate Teks AI Streaming di Aplikasi Web

Pernahkah kamu mengklik tombol generate di sebuah aplikasi web lalu harus menunggu lama tanpa ada respons yang jelas? Pengalaman seperti ini sangat mudah membuat pengguna merasa bosan dan akhirnya meninggalkan halaman. Solusi paling praktis untuk masalah ini adalah menggunakan respons streaming. Dengan teknik ini, teks akan muncul secara bertahap saat model kecerdasan buatan sedang memproses jawaban.

Bayangkan kamu sedang melihat seseorang mengetik jawaban langsung di depan matamu. Walaupun prosesnya belum selesai, kamu akan merasa sistem tersebut hidup dan responsif. Efek psikologis ini mungkin terdengar sepele bagi sebagian pengembang. Namun, dampaknya sangat besar terhadap persepsi performa aplikasi web yang kamu bangun.

Arsitektur minimal yang biasa digunakan cukup sederhana untuk dipahami. Pertama, siapkan form input di sisi klien dan route handler di server untuk memanggil model. Selanjutnya, pastikan respons dari server dikirim kembali sebagai stream. Terakhir, antarmuka pengguna hanya perlu menambahkan token teks secara bertahap.

Bagian yang paling sering membuat pengembang bingung adalah pengelolaan state saat proses pemuatan dan pembatalan. Jika pengguna menekan tombol submit dua kali dengan cepat, hasil stream bisa bertabrakan. Hal ini tentu akan membuat output teks menjadi berantakan dan sulit dibaca. Oleh karena itu, kamu perlu menambahkan pengamanan sederhana pada antarmuka.

Berikut adalah contoh implementasi dasar menggunakan React untuk menangani state form dan streaming. Langkah ini sangat penting untuk mencegah pengguna mengirimkan permintaan ganda yang bisa merusak tampilan antarmuka.

import { useChat } from 'ai/react';

export default function ChatComponent() {
  const { messages, input, handleInputChange, handleSubmit, isLoading, stop } = useChat();

  return (
    <form onSubmit={handleSubmit}>
      {/* Tampilkan pesan di sini */}
      <input value={input} onChange={handleInputChange} disabled={isLoading} />
      <button type="submit" disabled={isLoading}>Kirim</button>
      {isLoading && <button type="button" onClick={stop}>Stop</button>}
    </form>
  );
}

Kode di atas menonaktifkan tombol kirim dan input saat proses permintaan sedang aktif. Kami juga menyediakan tombol stop agar pengguna memiliki kendali penuh untuk menghentikan proses generasi teks kapan saja. Pendekatan ini memastikan state aplikasi tetap bersih meskipun pengguna mengubah pikiran di tengah jalan. Jika kamu ingin mendalami dokumentasi lengkapnya, silakan baca panduan resmi di .