Fasa 13 — Modul Pelajar

Bina AI Agent Anda Sendiri

Belajar membina AI Agent menggunakan Cloudflare Workers + Claude API. Agent yang boleh berfikir, ingat, dan bertindak.

🏆 Ini Kemuncak Vibe Coding!

Anda akan bina AI AGENT — aplikasi yang boleh berfikir, ingat, dan bertindak. Ini adalah skill yang developer profesional pun baru nak belajar. Pada akhir modul ini, anda akan mempunyai AI Agent sendiri yang boleh diakses di internet!

🤖 Apa Itu AI Agent?

Bayangkan anda ada pembantu peribadi yang:

  • Boleh ingat nama, preference, dan sejarah perbualan anda
  • Boleh faham konteks — apa yang anda cakap 10 minit lepas masih diingati
  • Boleh bertindak — search web, ambil data dari database, panggil API
  • Boleh buat keputusan sendiri — bila nak guna tool, apa nak tanya, macam mana nak respond

Itulah AI Agent. Bukan sekadar chatbot yang jawab soalan. Agent adalah program pintar yang boleh beroperasi secara autonomous — dengan otak Claude API, ingatan dalam Durable Objects, dan keupayaan untuk menggunakan tools.

Analogi: Chatbot biasa macam mesin layan diri — tekan butang, dapat minuman. AI Agent macam pelayan restoran — ingat pesanan, cadangkan menu, pergi dapur ambil makanan. Agent lebih proaktif, lebih kontekstual, dan lebih berguna.

💡 AI Agent vs Chatbot Biasa

Ciri Chatbot Biasa AI Agent
Memory Tiada — lupa selepas setiap response Ada — ingat perbualan penuh
Tools Tak boleh guna tools Boleh search web, query database, panggil API
Autonomy Reaktif — balas je apa yang ditanya Proaktif — boleh buat keputusan sendiri
Context Setiap message adalah isolated Ada konteks berterusan
Personality Fix atau tiada Boleh di-set dengan system prompt
Runtime Biasanya serverless function ringkas Cloudflare Workers + Durable Objects

🏗️ Bagaimana AI Agent Berfungsi?

AI Agent anda akan berfungsi dalam senibina ini:

👤 User
→
☁️ Worker
→
🤖 Agent
↔
💬 Claude API
  1. User hantar mesej ke Worker URL (HTTPS)
  2. Worker (Cloudflare) terima request dan hantar ke Agent
  3. Agent panggil Claude API untuk proses mesej
  4. Agent boleh guna memory (Durable Objects) untuk ingat konteks
  5. Agent boleh guna tools (web search, database) untuk bertindak
  6. Response dihantar balik ke User

📦 Langkah 1: Setup Cloudflare Workers + Agents SDK

Mula-mula, kita setup projek Cloudflare Workers. Guna AI prompt untuk hasilkan kod:

AI Prompt untuk Setup: "Saya nak setup projek Cloudflare Workers dengan Agents SDK dan Anthropic AI SDK. Berikan arahan langkah demi langkah untuk create project, install dependencies, dan configure wrangler.toml."

1 Create Workers Project
  1. Buka terminal / command prompt
  2. Jalankan: npx create-cloudflare@latest my-first-agent --framework=javascript
  3. Pilih template "Hello World"
  4. Pilih "No" untuk TypeScript (kita guna JavaScript)
  5. Pilih "No" untuk deploy sekarang
2 Install Dependencies
  1. Masuk folder projek: cd my-first-agent
  2. Install Claude API SDK: npm install @anthropic-ai/sdk
  3. Buka folder dalam VS Code: code .
3 Configure wrangler.toml

Edit wrangler.toml — tambah compatibility flags dan Durable Object binding:

name = "my-first-agent" main = "src/index.js" compatibility_date = "2025-05-01" compatibility_flags = ["nodejs_compat"]

Penting: Pastikan nodejs_compat ada dalam compatibility_flags. Tanpa ini, SDK Claude API mungkin tak berfungsi dengan betul di Cloudflare Workers.

🌍 Langkah 2: Bina "Hello World" Agent

Sekarang kita bina agent pertama — ringkas tapi berfungsi. Agent ini akan menggunakan Claude API untuk menjawab soalan.

AI Prompt untuk Agent Basic: "Bina Cloudflare Worker chat agent yang menggunakan Claude API. Worker perlu ada endpoint POST /chat yang terima JSON {message: String} dan balas {reply: String}. Guna @anthropic-ai/sdk."

Kod Agent Pertama

Gantikan content src/index.js dengan kod berikut:

import Anthropic from '@anthropic-ai/sdk'; export default { async fetch(request, env) { // Init Claude client const anthropic = new Anthropic({ apiKey: env.CLAUDE_API_KEY }); // Handle POST /chat if (request.method === 'POST') { const url = new URL(request.url); if (url.pathname === '/chat') { const { message } = await request.json(); const response = await anthropic.messages.create({ model: 'claude-sonnet-4-20250514', max_tokens: 1024, messages: [{ role: 'user', content: message }] }); const reply = response.content[0].text; return new Response(JSON.stringify({ reply }), { headers: { 'Content-Type': 'application/json' } }); } } // Default response return new Response('AI Agent sedang berjalan! Hantar POST request ke /chat'); } };

Model Name: Guna claude-sonnet-4-20250514 untuk model terkini. Atau claude-haiku-3-5-20241022 untuk response lebih cepat dan murah.

🎭 Langkah 3: Tambah System Prompt — Personality

Agent basic okay, tapi membosankan. Kita nak agent ada personality dan role yang spesifik. Di sinilah system prompt memainkan peranan.

AI Prompt untuk Personality: "Bina chat agent dengan system prompt. Agent ini adalah 'Si Cerdik' — pembantu coding yang mesra, suka explain dengan analogi, dan bertutur dalam Bahasa Melayu. Agent perlu ingat nama user dan memberi jawapan yang ringkas tapi padat."

Kod Agent dengan System Prompt

const systemPrompt = `Anda adalah "Si Cerdik" — AI Agent pembantu coding. Personaliti: - Mesra dan suka membantu - Suka explain konsep dengan analogi mudah - Bertutur dalam Bahasa Melayu (walaupun user tanya English) - Jawab dengan ringkas, tepat, dan padat - Sentiasa beri contoh kod bila relevan - Panggil user dengan nama (jika diketahui) Peraturan: 1. Jangan bagi jawapan yang salah — kalau tak tahu, cakap tak tahu 2. Utamakan keselamatan — jangan recommend amalan coding yang unsafe 3. Jika user nampak frust, bagi semangat!`; // Dalam handler chat: const response = await anthropic.messages.create({ model: 'claude-sonnet-4-20250514', system: systemPrompt, max_tokens: 1024, messages: [{ role: 'user', content: message }] });

Contoh Personality Lain

Personality System Prompt Ringkas
Professional Mentor Formal, berstruktur, bagi jawapan detailed dengan referens
Funny Coder Suka lawak, guna emoji, coding santai tapi tepat
Strict Teacher Tak bagi jawapan terus — bimbing dengan soalan, pastikan user faham
Creative Designer Fokus pada UI/UX, bagi cadangan warna, layout, tipografi
Debug Expert Analisis error dengan sistematik, bagi debugging steps, explain root cause

💾 Langkah 4: Tambah Memory / State

Sekarang agent ada personality, tapi masih ada satu masalah besar — agent lupa semua perbualan. Setiap kali user hantar message, agent start dari kosong.

Kita akan guna Durable Objects untuk simpan state agent. Durable Objects adalah Cloudflare's solution untuk persistent state di edge.

AI Prompt untuk Memory: "Bina Cloudflare Worker chat agent dengan Durable Objects untuk persistent state. Agent perlu ingat full conversation history untuk setiap session. Setiap session ada unique sessionId. Agent boleh recall nama user dan preference dari session lepas."

Langkah 1: Update wrangler.toml

name = "my-first-agent" main = "src/index.js" compatibility_date = "2025-05-01" compatibility_flags = ["nodejs_compat"] [[durable_objects.bindings]] name = "CHAT_AGENT" class_name = "ChatAgent" [[migrations]] tag = "v1" new_classes = ["ChatAgent"]

Langkah 2: Buat ChatAgent Class

Buat file baru src/chat-agent.js:

import Anthropic from '@anthropic-ai/sdk'; export class ChatAgent { constructor(state, env) { this.state = state; this.env = env; // State akan persist antara requests this.state.blockConcurrencyWhile(async () => { const stored = await this.state.storage.get('messages'); this.messages = stored || []; }); } async chat(message, systemPrompt) { const anthropic = new Anthropic({ apiKey: this.env.CLAUDE_API_KEY }); // Tambah user message ke history this.messages.push({ role: 'user', content: message }); const response = await anthropic.messages.create({ model: 'claude-sonnet-4-20250514', system: systemPrompt, max_tokens: 1024, messages: this.messages }); const reply = response.content[0].text; // Tambah response ke history this.messages.push({ role: 'assistant', content: reply }); // Simpan state ke storage await this.state.storage.put('messages', this.messages); return reply; } }

Langkah 3: Update Worker Handler

Edit src/index.js:

import { ChatAgent } from './chat-agent'; const systemPrompt = `Anda adalah AI Agent pembantu yang mesra...`; export default { async fetch(request, env) { const url = new URL(request.url); if (url.pathname === '/chat' && request.method === 'POST') { const { message, sessionId } = await request.json(); // Dapatkan atau cipta session agent const agentId = env.CHAT_AGENT.idFromName(sessionId || 'default'); const stub = env.CHAT_AGENT.get(agentId); const reply = await stub.chat(message, systemPrompt); return new Response(JSON.stringify({ reply }), { headers: { 'Content-Type': 'application/json' } }); } return new Response('AI Agent with Memory sedang berjalan!'); } };

Test Agent dengan Memory

curl -X POST https://my-first-agent.workers.dev/chat \ -H "Content-Type: application/json" \ -d '{"message":"Hi! Nama saya Sarah.","sessionId":"user-1"}' # Agent: "Hi Sarah! Ada apa yang saya boleh bantu?" curl -X POST https://my-first-agent.workers.dev/chat \ -H "Content-Type: application/json" \ -d '{"message":"Apa nama saya?","sessionId":"user-1"}' # Agent: "Nama awak Sarah! :) Ada apa yang saya boleh tolong hari ni?"

Moment "Wow": Inilah magik AI Agent! Agent ingat nama Sarah walaupun soalan kedua tak mention nama. Cuba guna sessionId berbeza — agent akan anggap orang baru. Setiap sessionId adalah "perbualan" yang berasingan.

🛠️ Langkah 5: Tambah Tools

Agent dengan memory sudah power. Tapi agent masih belum boleh bertindak. Untuk buat agent benar-benar berguna, kita tambah tools — keupayaan agent untuk berinteraksi dengan dunia luar.

AI Prompt untuk Tools: "Tambah tool web search capability kepada chat agent menggunakan OpenAI SDK function calling atau Anthropic tool use. Agent boleh mencari maklumat dari internet bila ditanya soalan yang perlukan current information."

Contoh Tool: Web Search

// Tool definition untuk web search const tools = [ { name: 'web_search', description: 'Cari maklumat terkini dari internet', input_schema: { type: 'object', properties: { query: { type: 'string', description: 'Query carian' } }, required: ['query'] } } ]; // Dalam handler chat - handle tool use async function handleChat(messages, systemPrompt) { const response = await anthropic.messages.create({ model: 'claude-sonnet-4-20250514', system: systemPrompt, max_tokens: 1024, messages: messages, tools: tools }); // Check if Claude wants to use a tool if (response.stop_reason === 'tool_use') { const toolBlock = response.content.find(c => c.type === 'tool_use'); if (toolBlock.name === 'web_search') { const result = await performWebSearch(toolBlock.input.query); // Send tool result back to Claude messages.push({ role: 'assistant', content: response.content }); messages.push({ role: 'user', content: [{ type: 'tool_result', tool_use_id: toolBlock.id, content: JSON.stringify(result) }] }); // Get final response return handleChat(messages, systemPrompt); } } return response.content[0].text; }

Tool Lain Yang Boleh Ditambah

Tool Kegunaan Contoh
Web Search Cari maklumat terkini dari internet "Cari berita AI terkini"
Database Query Query data dari database "Tunjukkan senarai pelanggan"
Calculator Kira matematik tepat "Kira 25% dari 1000"
Send Email Hantar email melalui API "Hantar email kepada Ali"
Weather API Semak cuaca semasa "Cuaca di Kuala Lumpur?"

Tool Use Flow: (1) Claude decide nak guna tool. (2) Agent execute tool dan dapat result. (3) Result dihantar balik ke Claude. (4) Claude guna result untuk generate final response. Semua ini berlaku dalam satu request — automatik dan seamless.

🕹️ Langkah 6: WebSocket Real-time Chat

HTTP request-response sesuai untuk chat biasa, tapi untuk pengalaman yang lebih real-time, kita guna WebSocket. Dengan WebSocket, agent boleh stream response word-by-word.

AI Prompt untuk WebSocket: "Tambah WebSocket support kepada Cloudflare Worker chat agent. Agent boleh stream response character-by-character melalui WebSocket connection. Handle connect, message, dan close events."

WebSocket Handler

async handleWebSocket(request, env) { const pair = new WebSocketPair(); const [client, server] = Object.values(pair); server.accept(); server.addEventListener('message', async (event) => { const { message, sessionId } = JSON.parse(event.data); // Agent proses dan stream response const response = await getAgentResponse(message, sessionId); // Stream response word-by-word const words = response.split(' '); for (const word of words) { server.send(JSON.stringify({ type: 'chunk', content: word + ' ' })); await new Promise(r => setTimeout(r, 50)); // delay antara words } server.send(JSON.stringify({ type: 'done' })); }); return new Response(null, { status: 101, webSocket: client }); }

Kelebihan WebSocket: Sambungan kekal terbuka — tak perlu handshake setiap kali. Sesuai untuk chat apps, live updates, dan aplikasi yang perlukan komunikasi dua hala masa nyata.

🚀 Langkah 7: Deploy Agent ke Cloudflare

Akhir sekali, deploy agent supaya boleh diakses oleh sesiapa sahaja di internet.

AI Prompt untuk Deploy: "Saya nak deploy AI Agent yang saya bina ke Cloudflare Workers. Berikan arahan untuk set secret API key dan deploy menggunakan wrangler CLI."

1 Set Claude API Key
npx wrangler secret put CLAUDE_API_KEY # Paste API key dari console.anthropic.com
2 Deploy ke Cloudflare
npx wrangler deploy # Output akan tunjuk URL: # https://my-first-agent.your-subdomain.workers.dev
3 Test Agent Live
curl -X POST https://my-first-agent.your-subdomain.workers.dev/chat \ -H "Content-Type: application/json" \ -d '{"message":"Hello! Siapa awak?","sessionId":"test-1"}'

Peringatan: URL worker anda adalah public — sesiapa yang tahu URL boleh guna agent anda. Untuk production, tambah authentication. Untuk pembelajaran, ini fine — kongsi URL dengan rakan sekelas!

Share Agent: Kongsi URL agent dengan rakan sekelas. Minta mereka test — hantar mesej dalam Bahasa Melayu, tanya soalan random, uji sama ada agent ingat perbualan. Dapatkan feedback!

📝 Ringkasan

Apa yang anda dah pelajari dalam modul ini:

  • AI Agent — program pintar yang boleh berfikir, ingat, dan bertindak
  • Cloudflare Workers — runtime untuk menjalankan agent di edge
  • Claude API — otak agent yang memproses dan menjana teks
  • System Prompt — personality dan peraturan agent
  • State Management — Durable Objects untuk ingatan agent
  • Tools — keupayaan agent untuk berinteraksi dengan dunia luar
  • WebSocket — real-time communication
  • Deploy — menyiarkan agent ke internet

Langkah seterusnya: Cuba explore multi-agent architecture — Agent A panggil Agent B untuk task spesifik. Atau tambah voice interface — user cakap, agent dengar dan jawab. Atau bina RAG (Retrieval Augmented Generation) — agent boleh baca dokumen anda dan jawab berdasarkan content.