Latihan — AI Agent Builder

1

Setup Workers + Agents SDK Project Mudah

⏱ 15-20 minit ☁️ Cloudflare Workers 📦 Setup & Konfigurasi

▼

🎯 Objektif

Objektif: Setup projek Cloudflare Workers dari kosong, install Agents SDK dan Anthropic AI SDK, dan configure wrangler.toml untuk development agent.

📋 Prasyarat

Node.js v18 atau lebih baru diinstal
Akaun Cloudflare yang aktif (dash.cloudflare.com)
Claude API key dari console.anthropic.com
Git diinstal

🔧 Langkah-langkah

Buka terminal / command prompt
Create projek Workers baru:
npx create-cloudflare@latest agent-project-anda --framework=javascript
Apabila ditanya:
- Pilih template Hello World
- Pilih No untuk TypeScript
- Pilih No untuk deploy sekarang
Masuk folder projek:
cd agent-project-anda
Install dependencies:
npm install @anthropic-ai/sdk
Buka projek dalam VS Code:
code .
Edit wrangler.toml — tambah compatibility flags:
name = "agent-project-anda" main = "src/index.js" compatibility_date = "2025-05-01" compatibility_flags = ["nodejs_compat"]
Buka src/index.js — pastikan ia adalah template Hello World yang basic
Test worker di local:
npx wrangler dev
Buka http://localhost:8787 — pastikan nampak "Hello World"

✅ Checklist

Node.js v18+ telah diinstal dan berfungsi

Cloudflare Workers project berjaya di-create

@anthropic-ai/sdk telah diinstal

wrangler.toml telah dikonfigurasi dengan nodejs_compat

npx wrangler dev berfungsi — localhost:8787 boleh diakses

Claude API key sudah sedia (guna kemudian)

💡 Tips

Guna AI: Kalau stuck, tanya AI: "Saya nak create Cloudflare Workers project dengan nama [project-name]. Berikan arahan lengkap langkah demi langkah."

2

Bina Chat Agent Basic — "Hello World" Mudah

⏱ 20-30 minit 💬 Claude API 🤖 Agent Basic

▼

🎯 Objektif

Objektif: Bina chat agent pertama yang menggunakan Claude API. Agent boleh menerima mesej dan memberi response yang relevan. "Hello!" -> "Hi! Saya agent anda."

📋 Prasyarat

Latihan 1已完成 (Projek Workers sudah setup)
Claude API key sudah sedia

🔧 Langkah-langkah

Edit src/index.js — gantikan dengan kod berikut:
import Anthropic from '@anthropic-ai/sdk'; export default { async fetch(request, env) { const anthropic = new Anthropic({ apiKey: env.CLAUDE_API_KEY }); 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' } }); } } return new Response('AI Agent berjalan! POST ke /chat'); } };
Test dengan menjalankan worker di local:
npx wrangler dev
Buka terminal kedua dan test:
curl -X POST http://localhost:8787/chat \ -H "Content-Type: application/json" \ -d '{"message":"Hello! Siapa awak?"}'
Semak response — patut dapat jawapan dari Claude
Cuba hantar message lain:
curl -X POST http://localhost:8787/chat \ -H "Content-Type: application/json" \ -d '{"message":"Apa itu Vibe Coding?"}'

📝 Output Dijangka

# Response untuk "Hello! Siapa awak?"
{"reply":"Hello! Saya AI Agent yang dibina menggunakan Claude API dan Cloudflare Workers. Saya di sini untuk membantu anda!"}

✅ Checklist

Kod agent basic telah ditulis di src/index.js

npx wrangler dev berjalan tanpa error

curl test berjaya — dapat response dari Claude

Agent balas "Hi! Saya agent anda" bila disebut Hello

Test dengan pelbagai soalan — semua berfungsi

💡 Tips

Guna AI Prompt: "Bina Cloudflare Worker chat agent yang menggunakan Claude API. Worker perlu ada endpoint POST /chat yang terima JSON {message: String} dan balas {reply: String}."

3

Tambah Personality — Agent Jadi "Pembantu Coding" Sederhana

⏱ 20-30 minit 🎭 System Prompt 🤖 Personality

▼

🎯 Objektif

Objektif: Tambah system prompt untuk memberi personality dan role kepada agent. Agent akan menjadi "pembantu coding" yang mesra dan suka explain dengan analogi.

🔧 Langkah-langkah

Edit src/index.js — tambah 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 sahaja
- Jawab dengan ringkas, tepat, dan padat
- Sentiasa beri contoh kod bila relevan
- Panggil user dengan "awak"

Peraturan:
1. Jangan bagi jawapan yang salah
2. Jika tak tahu, cakap tak tahu
3. Utamakan keselamatan coding
4. Jika user frust, bagi semangat
5. Cuba selitkan humor sekali-sekala`;

// Dalam handler chat, ubah jadi:
const response = await anthropic.messages.create({
  model: 'claude-sonnet-4-20250514',
  system: systemPrompt,
  max_tokens: 1024,
  messages: [{ role: 'user', content: message }]
});

Test agent — tanya soalan coding:
curl -X POST http://localhost:8787/chat \ -H "Content-Type: application/json" \ -d '{"message":"Macam mana nak buat loop dalam JavaScript?"}'
Test sama ada agent guna Bahasa Melayu:
curl -X POST http://localhost:8787/chat \ -H "Content-Type: application/json" \ -d '{"message":"Hello, can you help me with Python?"}'

Agent patut jawab dalam Bahasa Melayu walaupun soalan dalam English.
Cuba tanya soalan random — test personality:
curl -X POST http://localhost:8787/chat \ -H "Content-Type: application/json" \ -d '{"message":"Saya frust la coding ni susah!"}'

🌟 Cabaran Tambahan

Ubah personality agent kepada "Strict Teacher" — tak bagi jawapan terus, bimbing dengan soalan
Ubah kepada "Funny Coder" — suka lawak, guna emoji, coding santai
Ubah kepada "Debug Expert" — analisis error sistematik, beri debugging steps

✅ Checklist

System prompt telah ditambah dengan personality yang jelas

Agent menjawab dalam Bahasa Melayu

Agent bagi jawapan yang relevan untuk soalan coding

Personality agent terserlah dalam perbualan

(Cabaran) Cuba 3 personality berbeza dan bandingkan

💡 Tips

Guna AI Prompt: "Bina system prompt untuk AI Agent pembantu coding yang mesra, guna Bahasa Melayu, suka explain dengan analogi, dan sentiasa beri contoh kod. Nama agent 'Si Cerdik'."

4

Tambah Memory — Agent Ingat Nama dan Preference Sukar

⏱ 30-45 minit 💾 Durable Objects 🤖 State Management

▼

🎯 Objektif

Objektif: Tambah persistent state menggunakan Durable Objects supaya agent boleh ingat nama user, preference, dan sejarah perbualan penuh. Agent boleh recall maklumat dari sesi lepas.

🔧 Langkah-langkah

Langkah 1: Update wrangler.toml

name = "agent-project-anda"
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 file src/chat-agent.js

import Anthropic from '@anthropic-ai/sdk';

const systemPrompt = `Anda adalah "Si Cerdik" — AI Agent pembantu coding...`;

export class ChatAgent {
  constructor(state, env) {
    this.state = state;
    this.env = env;
    this.state.blockConcurrencyWhile(async () => {
      const stored = await this.state.storage.get('messages');
      this.messages = stored || [];
    });
  }

  async chat(message) {
    const anthropic = new Anthropic({ apiKey: this.env.CLAUDE_API_KEY });
    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;
    this.messages.push({ role: 'assistant', content: reply });
    await this.state.storage.put('messages', this.messages);
    return reply;
  }
}

Langkah 3: Update src/index.js

import { ChatAgent } from './chat-agent';

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();

      const agentId = env.CHAT_AGENT.idFromName(sessionId || 'default');
      const stub = env.CHAT_AGENT.get(agentId);

      const reply = await stub.chat(message);
      return new Response(JSON.stringify({ reply }), {
        headers: { 'Content-Type': 'application/json' }
      });
    }

    return new Response('AI Agent with Memory!');
  }
};

Langkah 4: Test Memory

curl -X POST http://localhost:8787/chat \
  -H "Content-Type: application/json" \
  -d '{"message":"Hi! Nama saya Ahmad.","sessionId":"ahmad-1"}'
# Agent: "Hi Ahmad! Ada apa yang saya boleh bantu?"

curl -X POST http://localhost:8787/chat \
  -H "Content-Type: application/json" \
  -d '{"message":"Apa nama saya?","sessionId":"ahmad-1"}'
# Agent: "Nama awak Ahmad! Ada apa yang nak ditanya?"

curl -X POST http://localhost:8787/chat \
  -H "Content-Type: application/json" \
  -d '{"message":"Saya suka Python.","sessionId":"ahmad-1"}'
# Agent: "Python pilihan yang bagus, Ahmad!"

curl -X POST http://localhost:8787/chat \
  -H "Content-Type: application/json" \
  -d '{"message":"Apa bahasa coding kegemaran saya?","sessionId":"ahmad-1"}'
# Agent: "Awak suka Python! Ada apa yang nak belajar tentang Python?"

Langkah 5: Test session berbeza

# Guna sessionId berbeza — agent akan anggap orang baru
curl -X POST http://localhost:8787/chat \
  -H "Content-Type: application/json" \
  -d '{"message":"Siapa nama saya?","sessionId":"orang-lain"}'
# Agent: "Maaf, saya tak tahu nama awak lagi. Boleh beritahu?"

📝 Output Dijangka

Agent ingat nama "Ahmad" dan preference "Python" dalam session "ahmad-1". Agent lupa semua bila guna sessionId berbeza.

✅ Checklist

wrangler.toml telah dikemas kini dengan Durable Object binding

ChatAgent class telah dibuat di src/chat-agent.js

State management menggunakan this.state.storage berfungsi

Agent ingat nama user dalam session yang sama

Agent ingat preference user (cth: suka Python)

SessionId berbeza = perbualan berbeza (agent tak ingat)

💡 Tips

Guna AI Prompt: "Saya nak tambah Durable Objects untuk persistent state dalam Cloudflare Worker chat agent. Agent perlu ingat conversation history untuk setiap sessionId. Berikan kod lengkap untuk wrangler.toml, chat agent class, dan worker handler."

5

Deploy Agent dan Kongsi URL Sederhana

⏱ 15-20 minit 🚀 Cloudflare Deploy 🌐 Live URL

▼

🎯 Objektif

Objektif: Deploy AI Agent yang telah siap ke Cloudflare Workers, set CLAUDE_API_KEY sebagai secret, dan kongsi URL dengan rakan sekelas untuk diuji.

🔧 Langkah-langkah

Set Claude API Key sebagai secret:
npx wrangler secret put CLAUDE_API_KEY

Apabila diminta, paste Claude API key dari console.anthropic.com
Deploy agent ke Cloudflare:
npx wrangler deploy
Tunggu deploy selesai. Output akan tunjuk URL:
Output: https://agent-project-anda.your-subdomain.workers.dev
Test agent live:
curl -X POST https://agent-project-anda.your-subdomain.workers.dev/chat \ -H "Content-Type: application/json" \ -d '{"message":"Hello! Siapa awak?","sessionId":"test-live"}'
Kongsi URL dengan rakan sekelas:
- Bagi mereka URL worker anda
- Minta mereka hantar POST request ke /chat
- Atau bina HTML form ringkas yang POST ke URL agent
Test dari rakan:
curl -X POST https://agent-project-anda.workers.dev/chat \ -H "Content-Type: application/json" \ -d '{"message":"Test dari Ali!","sessionId":"rakan-1"}'

🌟 Cabaran Tambahan

Bina Frontend Ringkas: Buat HTML page dengan form input dan display area untuk chat dengan agent. Guna JavaScript fetch ke URL worker.
Tambah CORS: Pastikan agent boleh dipanggil dari mana-mana domain (Access-Control-Allow-Origin: *)
Custom Domain: Setup custom domain untuk agent (jika ada domain sendiri)
Rate Limiting: Tambah rate limiting untuk elakkan abuse

📷 Bukti Screenshot

📸

Screenshot agent yang berjaya di-deploy

Ambil screenshot yang menunjukkan: (1) Terminal output deploy — nampak URL worker, (2) curl command dan response dari agent live, (3) Dashboard Cloudflare yang menunjukkan worker sedang aktif.

✅ Checklist

CLAUDE_API_KEY telah di-set sebagai secret

npx wrangler deploy berjaya tanpa error

Agent boleh diakses di URL workers.dev

Memory berfungsi di production (agent ingat perbualan)

URL agent dikongsi dengan sekurang-kurangnya 2 rakan

Rakan berjaya test agent dan bagi feedback

Screenshot deployment diambil

💡 Tips

Guna AI Prompt: "Saya nak deploy AI Agent yang guna Claude API ke Cloudflare Workers. Berikan arahan untuk set secret, deploy guna wrangler, dan test agent."

Peringatan: URL worker adalah public. Sesiapa yang tahu URL boleh guna agent anda. Untuk production, tambah authentication. Untuk pembelajaran, ini adalah ciri — kongsi URL dengan semua!

Latihan AI Agent Builder

🎯 Objektif

📋 Prasyarat

🔧 Langkah-langkah

✅ Checklist

💡 Tips

🎯 Objektif

📋 Prasyarat

🔧 Langkah-langkah

📝 Output Dijangka

✅ Checklist

💡 Tips

🎯 Objektif

🔧 Langkah-langkah

🌟 Cabaran Tambahan

✅ Checklist

💡 Tips

🎯 Objektif

🔧 Langkah-langkah

📝 Output Dijangka

✅ Checklist

💡 Tips

🎯 Objektif

🔧 Langkah-langkah

🌟 Cabaran Tambahan

📷 Bukti Screenshot

✅ Checklist

💡 Tips

🏁 Rumusan Latihan