Belajar Frontend - AI-Native Frontend

#Pendahuluan

Episode 24 membawa kita ke garis depan: AI-native frontend. Berbeda dari "menambahkan chatbot ke aplikasi", AI-native berarti AI menjadi bagian dari fondasi pengalaman — UI yang beradaptasi, konten yang dihasilkan per pengguna, dan interaksi yang menyerupai percakapan dengan entitas yang berpikir.

Di 2026, kemampuan ini membedakan produk. Pemilik TokoKita tidak perlu lagi menyusun filter manual yang rumit — ia cukup bertanya "produk apa yang cocok untuk hadiah ulang tahun?" dan mendapatkan jawaban + antarmuka yang dibangun sesuai konteks. Frontend developer yang paham pola ini adalah aset langka.

#Dari "AI sebagai Fitur" ke AI-Native

Pergeseran kuncinya: UI tidak lagi sepenuhnya ditentukan saat build — sebagian besar di-orkestrasi saat runtime berdasarkan konteks.

#AI-Generated UI

Generative UI — komponen yang dihasilkan model berdasarkan permintaan, dirender sebagai komponen React nyata (bukan sekadar teks HTML). Pola yang umum:

Sisi engineering yang paling penting: jangan render output model mentah (risiko XSS — episode 18). Validasi dengan skema (Zod), render lewat komponen yang sudah ada, dan hanya izinkan "building blocks" yang diizinkan sistem.

#Streaming Responses (SSE)

Model AI berpikir dan mengetik "per kata" — menunggu jawaban lengkap membuat pengguna menunggu belasan detik tanpa umpan balik. Solusinya streaming:

export async function POST(req: Request) {
  const { prompt } = await req.json();
  const encoder = new TextEncoder();
  const stream = new ReadableStream({
    async start(controller) {
      for await (const chunk of streamCompletion(prompt)) {
        controller.enqueue(encoder.encode(`data: ${JSON.stringify(chunk)}\n\n`));
      }
      controller.close();
    },
  });
  return new Response(stream, {
    headers: {
      "content-type": "text/event-stream",
      "cache-control": "no-cache",
      connection: "keep-alive",
    },
  });
}

Di klien, gunakan API modern:

async function streamChat(prompt: string, onToken: (text: string) => void) {
  const res = await fetch("/api/chat", {
    method: "POST",
    body: JSON.stringify({ prompt }),
  });
 
  const reader = res.body!.getReader();
  const decoder = new TextDecoder();
 
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    onToken(decoder.decode(value, { stream: true }));
  }
}

#Agentic UX

Agentic UX — antarmuka di mana AI bertindak (bukan sekadar menjawab): menjalankan aksi, mengumpulkan informasi, melaporkan kembali. Pola UX yang harus kalian kuasai:

• Confirmation — aksi berisiko butuh konfirmasi eksplisit ("Hapus semua item di keranjang?").
• Stepping — agent bekerja dalam langkah yang bisa diikuti user (sedang memeriksa stok → sedang menyiapkan pesanan).
• Human-in-the-loop — titik putus saat agent perlu keputusan/kredensial.
• Undo — setiap aksi agent harus bisa dibatalkan.
• Status hidup — streaming + indikator langkah agar pengguna tahu apa yang sedang terjadi.

Pola ini adalah aksesibilitas versi AI: pengguna harus bisa mengikuti, menginterupsi, dan mengendalikan.

#Praktik: Asisten TokoKita

Fitur minimal AI-native untuk TokoKita:

export function ChatWidget() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState("");
 
  async function send() {
    const userMsg = { role: "user", content: input };
    setMessages((m) => [...m, userMsg]);
    setInput("");
 
    let acc = "";
    setMessages((m) => [...m, { role: "assistant", content: "" }]);
    await streamChat(input, (token) => {
      acc += token;
      setMessages((m) => {
        const next = [...m];
        next[next.length - 1] = { role: "assistant", content: acc };
        return next;
      });
    });
  }
 
  return (
    <div className="chat">
      {messages.map((m, i) => (
        <Message key={i} message={m} />
      ))}
      <form onSubmit={(e) => { e.preventDefault(); send(); }}>
        <input value={input} onChange={(e) => setInput(e.target.value)} />
        <button type="submit">Kirim</button>
      </form>
    </div>
  );
}

Perhatikan: UI tetap harus bisa dioperasikan keyboard dan accessible (episode 15) — chat yang tidak accessible adalah fitur yang tersembunyi bagi sebagian pengguna.

#Common Pitfalls

#Penutup

Inti yang harus dibawa pulang:

• AI-native = AI di fondasi pengalaman, bukan fitur tambahan.
• Generative UI: output model divalidasi skema dan dirender sebagai komponen aman.
• Streaming (SSE) adalah pola UX inti — jangan buat pengguna menunggu diam.
• Agentic UX: confirmation, stepping, human-in-the-loop, undo, dan status yang hidup.

Di episode 25 selanjutnya kita mengonsolidasi kerja tim: design systems & component libraries — tokens, Storybook, dan workflow desain-developer yang membuat TokoKita tumbuh konsisten dan efisien. Sampai jumpa di episode 25!