Tujuan Pembelajaran

Bisa menggunakan OpenAI/Claude API
Mengerti streaming response
Bisa membuat chat interface di aplikasi

Analogi

Diagram


      AI Integration:
Frontend (Chat UI) → Backend (API route) → LLM API (OpenAI/Claude) → Stream response → Frontend

Integrasi LLM ke aplikasi membuka kemungkinan fitur AI-powered: chatbot, content generation, smart search

Penjelasan Konsep

Setelah belajar menggunakan AI sebagai developer tool, saatnya belajar membangun aplikasi yang mengintegrasikan AI untuk end-user. Ini adalah skill yang sangat valuable di pasar kerja saat ini.

Arsitektur AI Integration

User → Frontend (Chat UI)
         ↓
       Backend (Hono API)
         ↓
       LLM API (OpenAI/Claude)
         ↓
       Stream Response → User

Kenapa perlu backend?

API key security: API key LLM tidak boleh di-expose ke frontend
Rate limiting: Hindari abuse dan kontrol cost
Prompt engineering: Kontrol instruksi dan guardrail di server
Logging: Track usage dan debug

OpenAI Responses API Basics

import OpenAI from 'openai';
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

const response = await openai.responses.create({
  model: 'gpt-5.2',
  input: 'Jelaskan konsep closure dalam JavaScript dengan analogi sederhana',
});
console.log(response.output_text);

Streaming Response

Untuk UX yang lebih baik, gunakan streaming agar output muncul bertahap:

const stream = await openai.responses.create({
  model: 'gpt-5.2',
  input: prompt,
  stream: true,
});

for await (const event of stream) {
  if (event.type === 'response.output_text.delta') {
    // Kirim event.delta ke client via SSE atau WebSocket
  }
}

Model Selection

gpt-5.2: model frontier untuk coding, reasoning, dan agentic tasks
gpt-5 mini/nano: pilihan lebih hemat untuk task sederhana dan volume tinggi
Claude/Gemini: alternatif provider yang juga bisa dipilih sesuai kebutuhan produk

Chat Completions masih ada di banyak codebase lama, tapi untuk project baru gunakan Responses API agar akses tool, multimodal, dan conversation state lebih konsisten.

Inti yang Perlu Dipahami

Bagian ini berfokus pada bisa menggunakan OpenAI/Claude API., mengerti streaming response., dan bisa membuat chat interface di aplikasi. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Membangun Aplikasi dengan AI Integration, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Integrasi LLM ke aplikasi membuka kemungkinan fitur AI-powered: chatbot, content generation, smart search. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa typescript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Instructions mengontrol perilaku model. Rate limiting di backend mencegah abuse dan kontrol cost. max_output_tokens membatasi panjang response.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

typescript

// Backend: Hono route untuk AI chat
import { Hono } from 'hono';
import OpenAI from 'openai';

const app = new Hono();
const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

app.post('/api/chat', async (c) => {
  const { message } = await c.req.json();
  
  const userId = c.get('userId');
  const usage = await checkUsage(userId);
  if (usage >= 100) return c.json({ error: 'Rate limit exceeded' }, 429);
  
  const response = await openai.responses.create({
    model: 'gpt-5.2',
    instructions: 'You are a web development tutor. Explain concepts clearly with code examples. Use Indonesian language.',
    input: message,
    max_output_tokens: 1000,
  });
  
  const reply = response.output_text;
  await logUsage(userId, message.length, reply.length);
  
  return c.json({ reply });
});

// Frontend: kirim pesan ke backend, bukan langsung ke LLM API
async function sendMessage(message: string) {
  const res = await fetch('/api/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ message }),
  });
  if (!res.ok) throw new Error('Chat request failed');
  return res.json();
}

Penjelasan Kode

Instructions mengontrol perilaku model. Rate limiting di backend mencegah abuse dan kontrol cost. max_output_tokens membatasi panjang response.

Prompt AI

Tambahkan fitur streaming ke chat interface-mu. Gunakan Server-Sent Events (SSE) untuk kirim response piece by piece.

Pertanyaan Reflektif

Integrasi AI ke aplikasi adalah competitive advantage. Tapi ingat: cost LLM bisa besar untuk skala tinggi — selalu implementasikan rate limiting dan caching.