#Membangun AI Agent Pertama dengan Claude + Convex

Banyak orang mau bikin AI agent tapi macet di pilihan stack. Tutorial ini pakai kombo yang gw pakai sehari-hari: Anthropic Claude untuk reasoning, Convex untuk state realtime, Next.js untuk UI.

#Kenapa Stack Ini

• Claude punya tool-calling stabil — Sonnet 4 cukup untuk 90% kasus
• Convex realtime tanpa websocket setup manual
• Next.js App Router cocok untuk streaming response

#Setup Awal

pnpm create next-app@latest agent-demo
cd agent-demo
pnpm add @anthropic-ai/sdk convex
pnpm convex dev

#Tool-Calling Pattern

Definisikan tool sebagai JSON schema. Claude memutuskan kapan memanggil, kita yang eksekusi:

const tools = [{
  name: "search_db",
  description: "Cari data di Convex",
  input_schema: { type: "object", properties: { query: { type: "string" } } }
}];

#State Persistence

Setiap pesan disimpan di Convex sebagai row. Reactive query otomatis update UI saat agent merespons. Tidak perlu websocket manual.

#Production Notes

• Rate-limit per session
• Sanitize tool input — Claude bisa hallucinate parameter
• Log semua tool call untuk audit

Pattern ini scale ke 10k+ users tanpa redesign besar.