🚀 Day 5 — Proyek Akhir: Agentic RAG + Voice Agent + Twilio

Minggu 2 · Hari 5 — Green Day (Proyek) Topik: Agentic RAG Agent (Gemini + Supabase), Voice Agent ElevenLabs, Integrasi Webhook, Deployment Produksi, Twilio Phone Number

📋 Daftar Isi

Recap & Game Plan
Fase 2: Question-Answering Agent
Mengubah ke Webhook untuk Voice
Integrasi ElevenLabs + n8n
Deploy ke Produksi
Twilio Phone Number (Opsional)
Rangkuman & Poin Penting

🔄 Recap & Game Plan

Progress dari Kemarin

Kemarin kita menyelesaikan Fase 1 — Data Ingest Pipeline:

✅ Google Sheets (60 produk) → Edit Fields → Chunk → OpenAI Embeddings → Supabase Vector Store

Hari ini kita membangun Fase 2 — Question Answering plus integrasi suara!

Rencana Hari Ini

╔════════════════════════════════════════════════════════════════╗
║  Step 1: Bangun Chat-Based RAG Agent  (teks)                 ║
║  Step 2: Konversi ke Webhook Endpoint  (API)                 ║
║  Step 3: Hubungkan dengan ElevenLabs   (suara)               ║
║  Step 4: Deploy ke Produksi            (live)                 ║
║  Step 5: (Bonus) Twilio Phone Number   (telepon)             ║
╚════════════════════════════════════════════════════════════════╝

🤖 Fase 2: Question-Answering Agent

Arsitektur Agentic RAG

         ┌──────────────────────────────────────────┐
         │            AI AGENT (Gemini)              │
         │                                          │
         │  System Prompt:                          │
         │  "You are a product expert..."           │
         │                                          │
         │  ┌──────────────┐   ┌────────────────┐  │
         │  │  LLM Model   │   │     Tool:      │  │
         │  │  Gemini 2.0  │   │  Supabase      │  │
         │  │  Flash       │   │  Vector Store  │  │
         │  └──────────────┘   │  (Retrieval)   │  │
         │         ▲           └───────┬────────┘  │
         │         │                   │            │
         │    Answers with          Searches        │
         │    retrieved context     for relevant    │
         │                          products        │
         └──────────────────────────────────────────┘
                      ▲         │
                      │         ▼
               User Question   Answer with
               "What keyboard  product data
                is best for    from Supabase
                gaming?"

Langkah Membangun

1. Trigger: On Chat Message

Kita mulai dengan trigger Chat (bawaan n8n) untuk testing cepat.

2. AI Agent Node

Parameter	Nilai
Agent Type	Tools Agent
System Prompt	"You are a product expert for a computer accessories store. Use the provided tools to look up product information."
Input	`{{ $json.chatInput }}` (default dari Chat trigger)

3. Sub-node: LLM (Gemini)

Parameter	Nilai
Provider	Google Gemini
Model	gemini-2.0-flash
Credentials	Google AI API key (gratis)

4. Sub-node: Tool — Supabase Vector Store

Parameter	Nilai
Operation	Retrieve documents (as tool)
Table	knowledge_base
Credentials	Supabase (sama seperti kemarin)
Top K (Limit)	10 (ambil 10 dokumen paling relevan)
Tool Description	"Use this tool to look up any product information"

💡 Tool Description sangat penting. Ini yang dibaca LLM untuk memutuskan kapan harus menggunakan tool ini. Deskripsi yang baik = penggunaan tool yang tepat.

Sub-node di Dalam Tool: Embedding Model

Parameter	Nilai
Provider	OpenAI Embeddings
Model	text-embedding-3-small

⚠️ Model harus SAMA dengan yang digunakan saat data ingest! Jika ingest pakai text-embedding-3-small, retrieval juga harus pakai model yang sama.

Testing Chat Agent

User:  "What keyboard do you have?"
Agent: "We have several keyboards:
        1. NovaKey Tactile Keyboard ($129.99) - Premium mechanical...
        2. ProType Slim Keyboard ($89.99) - Ultra-slim wireless...
        3. ..."

User:  "Which one is best for gaming?"
Agent: "For gaming, I'd recommend the NovaKey Tactile Keyboard
        because of its mechanical switches and low latency..."

Agen berhasil:

✅ Menerima pertanyaan
✅ Menggunakan tool Supabase untuk cari produk
✅ Mendapat 10 dokumen relevan
✅ Menjawab berdasarkan data produk nyata

🔀 Mengubah ke Webhook untuk Voice

Mengapa Perlu Webhook?

Chat trigger hanya untuk testing. Untuk integrasi dengan ElevenLabs, kita butuh HTTP endpoint yang bisa dipanggil dari luar.

Perubahan Arsitektur

SEBELUM (Chat-based):                    SESUDAH (Webhook-based):
┌─────────────┐                          ┌─────────────────┐
│ Chat Message│──▶ AI Agent ──▶ Chat     │ Webhook (POST) │──▶ AI Agent
│ Trigger     │                          │ /rag-agent      │       │
└─────────────┘                          └─────────────────┘       │
                                                                    ▼
                                                          ┌─────────────────┐
                                                          │ Respond to      │
                                                          │ Webhook         │
                                                          │ (JSON response) │
                                                          └─────────────────┘

Langkah Konversi

Ganti trigger dari "Chat Message" → Webhook (POST)
Sesuaikan input AI Agent: {{ $json.chatInput }} → {{ $json.body.question }}
Hapus Memory node — setiap panggilan dari ElevenLabs adalah request independen, tidak perlu konteks percakapan sebelumnya
Tambahkan "Respond to Webhook" di akhir flow — return jawaban agent sebagai JSON response

Konfigurasi Webhook

Parameter	Nilai
Method	POST
Path	rag-agent
Response	Respond to Webhook node

Konfigurasi Respond to Webhook

Parameter	Nilai
Respond With	Text
Response Body	`{{ $json.output }}`

💡 Mengapa hapus memory? Setiap request dari ElevenLabs adalah independent call. ElevenLabs menangani konteks percakapan di sisi mereka. Backend n8n cukup menjawab pertanyaan satuan.

🎙️ Integrasi ElevenLabs + n8n

Setup ElevenLabs Agent

Buat agent baru: "Electronics E-commerce Sales Expert"
System prompt: Expert di aksesoris komputer, ramah, helpful

Konfigurasi Webhook Tool di ElevenLabs

Parameter	Nilai
Tool Type	Webhook
Tool Name	Product Lookup
URL	n8n Webhook URL (test URL dulu, production nanti)
Method	POST
Body Parameter	`question` (type: string)
Timeout	60 detik (beri waktu cukup)
Pre-tool Speech	✅ Enable
Typing Sound	✅ Enable

Pre-tool Speech

Saat agent memanggil tool (yang butuh waktu), daripada diam saja →
Agent akan bilang sesuatu seperti:
"Let me check our product catalog for you..."

Ini membuat pengalaman lebih natural — user tidak merasa ditinggalkan.

Alur Lengkap (Round-trip)

┌──────────┐    ┌──────────────┐    ┌─────────┐    ┌──────────────┐
│   User   │───▶│  ElevenLabs  │───▶│   n8n   │───▶│  AI Agent    │
│  "What   │    │  Voice Agent │    │ Webhook │    │  (Gemini +   │
│  keyboard│    │  (STT)       │    │  /rag   │    │   Supabase)  │
│  is best │    │              │    │         │    │              │
│  for     │    │              │    │         │    │              │
│  gaming?"│    │              │    │         │    │              │
└──────────┘    └──────┬───────┘    └─────────┘    └──────┬───────┘
                       │                                    │
                       │           ┌─────────┐              │
                       │           │Supabase │◀─────────────┘
                       │           │ Vector  │  Tool call:
                       │           │ Search  │  "gaming keyboard"
                       │           └────┬────┘
                       │                │ Returns 10 relevant products
                       │                ▼
                       │         ┌──────────────┐
                       │         │  Gemini LLM  │
                       │         │  Generates   │
                       │◀────────│  Answer      │
                       │         └──────────────┘
                       │
                ┌──────▼───────┐
                │  ElevenLabs  │
                │  (TTS)       │───▶ 🔊 "For gaming, I'd recommend..."
                └──────────────┘

🌐 Deploy ke Produksi

Langkah Deploy

n8n Side

Activate workflow (toggle ON)
Catat Production URL (berbeda dari Test URL!)
Pastikan workflow sudah di-publish

ElevenLabs Side

Update Webhook URL di tool config → ganti Test URL dengan Production URL
Test agent sekali lagi untuk memastikan production URL berfungsi
Publish agent → dapatkan shareable link

Testing Produksi

User (suara):  "Hey, can you tell me about your webcams?"
Agent (suara): "Absolutely! We have several webcams available..."
               [data real dari Supabase via n8n]

✅ Berhasil! Agent suara menjawab pertanyaan produk secara real-time dengan data dari vector database.

📞 Twilio Phone Number (Opsional)

Mengapa Twilio?

Sampai sekarang, voice agent hanya bisa dimainkan di widget web. Twilio memungkinkan user menelepon nomor telepon sungguhan dan berbicara dengan agent.

Setup

1. Beli Nomor Twilio

Detail	Nilai
Platform	twilio.com
Biaya nomor	~$1.25/bulan
Tipe	Phone number (US/International)
Per menit	~$0.0085/menit inbound

2. Import ke ElevenLabs

ElevenLabs → Agent → Phone Numbers tab
Klik Import from Twilio
Masukkan:
- Account SID (dari Twilio dashboard)
- Auth Token (dari Twilio dashboard)
Pilih nomor → Import
Assign nomor ke agent

Testing via Telepon

📱 Telepon nomor Twilio
    ↓
🔊 ElevenLabs menerima panggilan
    ↓
🗣️ User: "Do you have any good microphones?"
    ↓
🌐 ElevenLabs → n8n Webhook → Gemini + Supabase → Response
    ↓
🔊 Agent: "Yes! We carry three excellent microphones..."
    ↓
📱 User mendengar jawaban via telepon

🎉 Full round-trip berhasil! User menelepon nomor biasa → jawaban AI tentang produk dikirim via suara — semuanya otomatis.

Biaya Estimasi

Komponen	Biaya
Twilio number	~$1.25/bulan
Twilio minutes	~$0.0085/menit (inbound)
ElevenLabs	Tergantung plan (free tier ada)
OpenAI embed	~$0.02 per 1M tokens
Supabase	Free tier cukup
n8n Cloud	Tergantung plan

📊 Rangkuman

Proyek Lengkap Week 2: End-to-End Stack

╔══════════════════════════════════════════════════════════════════════╗
║                                                                      ║
║  ┌─────────┐  ┌───────────┐  ┌────────┐  ┌───────────┐             ║
║  │ Twilio  │  │ElevenLabs │  │  n8n   │  │ Supabase  │             ║
║  │ Phone # │─▶│Voice Agent│─▶│Webhook │─▶│ Vector DB │             ║
║  │         │  │(STT + TTS)│  │+ Agent │  │(pgvector) │             ║
║  └─────────┘  └───────────┘  │+ Gemini│  └───────────┘             ║
║                               └────────┘                             ║
║                                                                      ║
║  Data Pipeline:  Sheets → Edit Fields → Embed → Supabase            ║
║  Query Flow:     Phone → STT → Webhook → Agent → DB → TTS → Phone  ║
║                                                                      ║
╚══════════════════════════════════════════════════════════════════════╝

Poin-Poin Utama

#	Konsep	Penjelasan
1	Agentic RAG	AI Agent + Vector Store tool = agent yang bisa cari data
2	Tool Description	Deskripsi yang jelas → agent tahu kapan pakai tool
3	Webhook konversi	Chat trigger → Webhook + Respond to Webhook
4	Hapus memory untuk API	Setiap webhook call independen, tidak perlu history
5	Pre-tool speech	UX trick: agent bicara sambil menunggu tool
6	Production URL	HARUS ganti dari test URL sebelum deploy
7	Twilio integration	Import nomor ke ElevenLabs via Account SID + Auth Token

Teknologi Stack Minggu Ini

┌─────────────────┬───────────────────────────────────────┐
│ Layer           │ Teknologi                              │
├─────────────────┼───────────────────────────────────────┤
│ Voice I/O       │ ElevenLabs (STT + TTS)                │
│ Phone           │ Twilio (opsional)                      │
│ Orchestration   │ n8n (workflow + webhook)               │
│ AI/LLM          │ Gemini 2.0 Flash (gratis)             │
│ Embedding       │ OpenAI text-embedding-3-small (1536d) │
│ Vector DB       │ Supabase (PostgreSQL + pgvector)       │
│ Data Source      │ Google Sheets (60 produk)             │
│ Transform       │ Edit Fields node (n8n)                │
└─────────────────┴───────────────────────────────────────┘

🏆 Pencapaian

╔══════════════════════════════════════════════════════════════╗
║  ✅ Membangun Agentic RAG agent (Gemini + Supabase tool)   ║
║  ✅ Konversi chat → webhook endpoint                       ║
║  ✅ Integrasi ElevenLabs Voice Agent + n8n backend         ║
║  ✅ Deploy ke produksi (kedua platform)                    ║
║  ✅ Twilio phone number — agent bisa dihubungi via telepon ║
║  ✅ Full round-trip: telepon → STT → RAG → TTS → suara    ║
║                                                              ║
║  📊 Progress Kursus: 67% █████████████░░░░░░░              ║
╚══════════════════════════════════════════════════════════════╝

Week 2 Selesai! Selanjutnya: Week 3 — Multi-Agent Systems & MCP — menuju kemampuan tingkat lanjut.

🚀 Day 5 — Proyek Akhir: Agentic RAG + Voice Agent + Twilio ​

📋 Daftar Isi ​

🔄 Recap & Game Plan ​

Progress dari Kemarin ​

Rencana Hari Ini ​

🤖 Fase 2: Question-Answering Agent ​

Arsitektur Agentic RAG ​

Langkah Membangun ​

1. Trigger: On Chat Message ​

2. AI Agent Node ​

3. Sub-node: LLM (Gemini) ​

4. Sub-node: Tool — Supabase Vector Store ​

Sub-node di Dalam Tool: Embedding Model ​

Testing Chat Agent ​

🔀 Mengubah ke Webhook untuk Voice ​

Mengapa Perlu Webhook? ​

Perubahan Arsitektur ​

Langkah Konversi ​

Konfigurasi Webhook ​

Konfigurasi Respond to Webhook ​

🎙️ Integrasi ElevenLabs + n8n ​

Setup ElevenLabs Agent ​

Konfigurasi Webhook Tool di ElevenLabs ​

Pre-tool Speech ​

Alur Lengkap (Round-trip) ​

🌐 Deploy ke Produksi ​

Langkah Deploy ​

n8n Side ​

ElevenLabs Side ​

Testing Produksi ​

📞 Twilio Phone Number (Opsional) ​

Mengapa Twilio? ​

Setup ​

1. Beli Nomor Twilio ​

2. Import ke ElevenLabs ​

Testing via Telepon ​

Biaya Estimasi ​

📊 Rangkuman ​

Proyek Lengkap Week 2: End-to-End Stack ​

Poin-Poin Utama ​

Teknologi Stack Minggu Ini ​

🏆 Pencapaian ​