Tutorial Bikin Chatbot AI dengan TypeScript yang Type-Safe

Halo gaes! Pernah kepikiran nggak sih, gimana caranya bikin aplikasi frontend yang berasa "hidup" pakai AI? Nah, sekarang lagi zamannya integrasi LLM (Large Language Model) ke dalam dashboard atau web app kita. Kali ini, kita bakal spill cara ngebangun chatbot interaktif yang solid pakai TypeScript. Kenapa TypeScript? Biar code kita aman, type-safe, dan nggak bikin pusing pas aplikasi makin gede. Skuy, kita bedah!

Kenapa Harus TypeScript buat AI?

Saat kita mainan API AI (kayak OpenAI atau Anthropic), data yang balik itu bentuknya sering nested dan dinamis banget. Kalau pakai JavaScript biasa, rawan banget undefined error yang bikin emosi. Dengan TypeScript, kita bisa bikin interface buat response AI, jadi autocompletion di VS Code jalan lancar jaya!

Step-by-Step Integrasi Chatbot

Kita bakal pakai pendekatan streaming biar user experience (UX) berasa premium, ala-ala ChatGPT gitu deh.

1. Setup Interface biar Rapi

Pertama, kita harus tahu bentuk data yang kita kirim dan terima.

interface Message {
  role: 'user' | 'assistant';
  content: string;
}

interface ChatResponse {
  choices: {
    message: {
      content: string;
    };
  }[];
}

2. Implementasi Fetch ke API

Gunakan async/await biar kode lebih clean. Jangan lupa simpen API Key di .env, jangan di-hardcode ya, ngab!

const getAIResponse = async (userPrompt: string): Promise<string> => {
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`
    },
    body: JSON.stringify({
      model: 'gpt-4o',
      messages: [{ role: 'user', content: userPrompt }]
    })
  });

  const data: ChatResponse = await response.json();
  return data.choices[0].message.content;
};

3. Tips Pro: Handle State dengan Bijak

Kalau buat UI (React/Vue/Svelte), pakai state manager biar history chat nggak hilang pas komponen di-re-render.

• Optimistic UI: Update UI duluan pas user ngetik, baru fetch AI-nya.
• Loading State: Jangan lupa kasih animasi typing biar user tau kalau AI-nya lagi mikir.
• Error Handling: Bungkus pakai try/catch biar pas API down, aplikasi nggak langsung crash.

Best Practices yang Harus Dicatet

1. Sanitize Input: Jangan asal render text dari AI langsung ke HTML. Gunakan library kayak dompurify buat cegah XSS attack.
2. Rate Limiting: Pasang debouncing pada input user biar nggak spam request ke API yang bisa bikin tagihan jebol.
3. Typing yang Kuat: Manfaatin Discriminated Unions buat handle status request (idle, loading, success, error).

Kesimpulan

Ngebangun chatbot AI bukan cuma soal copy-paste API, tapi soal gimana kita ngerapihin flow data pakai TypeScript biar aplikasi kita maintainable. Dengan tipe data yang jelas, debugging jadi jauh lebih gampang dan aplikasi bakal kerasa lebih pro.

Gimana, siap buat deploy chatbot pertama kalian? Skuy, langsung ngoding!