🔗 Day 2 — Integrasi ElevenLabs + n8n: Dua Pendekatan Voice Agent

Minggu 2 · Hari 2 — Yellow Day (Integration) Topik: Dua pola integrasi (n8n orchestrates vs ElevenLabs orchestrates), terminologi HTTP/webhook, membangun kedua pendekatan, deploy ke production

📋 Daftar Isi

Dua Pola Integrasi
Terminologi HTTP & Webhook
Node Generik: HTTP Request & Webhook
Pendekatan 1: n8n Orchestrates
Pendekatan 2: ElevenLabs Orchestrates
Deploy ke Production
Rangkuman & Poin Penting

🔀 Dua Pola Integrasi

Ada dua cara fundamental untuk mengintegrasikan ElevenLabs dengan n8n. Pemahaman kedua pola ini sangat penting karena masing-masing memiliki kelebihan dan kekurangan yang jelas.

╔══════════════════════════════════════════════════════════════════════╗
║                                                                      ║
║   Pendekatan 1: n8n Orchestrates        Pendekatan 2: 11Labs        ║
║   ─────────────────────────────         Orchestrates                ║
║                                          ─────────────────          ║
║   ┌─────────┐                           ┌──────────────┐            ║
║   │  Audio   │                           │  11Labs      │            ║
║   │  Input   │                           │  Voice Agent │            ║
║   └────┬────┘                           └──────┬───────┘            ║
║        │                                        │                    ║
║   ┌────▼────┐                           ┌──────▼───────┐            ║
║   │ 11Labs  │ ◀── API call              │  Webhook     │            ║
║   │ STT API │    (Speech→Text)          │  Tool Call   │            ║
║   └────┬────┘                           └──────┬───────┘            ║
║        │                                        │                    ║
║   ┌────▼────┐                           ┌──────▼───────┐            ║
║   │  n8n    │                           │  n8n         │            ║
║   │ AI Agent│                           │  Business    │            ║
║   └────┬────┘                           │  Logic       │            ║
║        │                                └──────┬───────┘            ║
║   ┌────▼────┐                           ┌──────▼───────┐            ║
║   │ 11Labs  │ ◀── API call              │  Response    │            ║
║   │ TTS API │    (Text→Speech)          │  → 11Labs    │            ║
║   └────┬────┘                           └──────┬───────┘            ║
║        │                                        │                    ║
║   ┌────▼────┐                           ┌──────▼───────┐            ║
║   │  Audio  │                           │  11Labs      │            ║
║   │ Output  │                           │  Speaks      │            ║
║   └─────────┘                           └──────────────┘            ║
║                                                                      ║
║   ⚠️ Latency tinggi                    ✅ Latency rendah            ║
║   ✅ Semua di satu canvas              ✅ Best of both worlds       ║
║   ✅ Vendor-switchable                 ✅ Real-time voice           ║
║                                        ★ DIREKOMENDASIKAN ★         ║
╚══════════════════════════════════════════════════════════════════════╝

Perbandingan Detail

Aspek	n8n Orchestrates	ElevenLabs Orchestrates (★)
Siapa bos-nya?	n8n mengontrol seluruh alur	ElevenLabs mengelola voice flow
Latency	Tinggi (linear: STT→Agent→TTS)	Rendah (real-time conversion)
Kompleksitas	Sederhana, satu canvas	Sedikit lebih kompleks
Fidelitas suara	Standard API call	Fitur penuh 11Labs (filler, etc)
Vendor lock-in	Rendah (mudah ganti API)	Lebih terikat ke 11Labs
Fitur telepon	Tidak tersedia	Bisa hubungkan ke Twilio
Rekomendasi	Untuk bagian dari workflow besar	Untuk voice agent dedicated

🎯 Rekomendasi: Pendekatan 2 (ElevenLabs Orchestrates) adalah pilihan terbaik karena latency rendah sangat krusial dalam voice agent. ElevenLabs secara otomatis melakukan konversi speech real-time tanpa proses linear.

📡 Terminologi HTTP & Webhook

Sebelum membangun integrasi, penting memahami terminologi dasar komunikasi antar platform.

Istilah Kunci

Istilah	Definisi	Contoh Penggunaan
API Call	Membuat web request menggunakan HTTP ke sebuah URL	n8n memanggil ElevenLabs API
Endpoint	URL yang dituju saat melakukan API call	`https://api.elevenlabs.io/v1/...`
Webhook	URL yang kamu sediakan agar pihak lain bisa memanggil-mu	n8n menyediakan URL untuk dipanggil 11Labs
HTTP GET	Jenis request untuk mengambil data (response: JSON)	Mengambil daftar produk
HTTP POST	Jenis request untuk mengirim data, dengan body berisi JSON	Mengirim pertanyaan ke n8n
Body	Bagian dari HTTP POST yang berisi data JSON yang dikirim	`{"question": "Berapa harga..."}`
Method/Verb	Jenis HTTP request (GET, POST, PUT, DELETE, dll.)	Dipilih dari dropdown di webhook/tool

Cara Menggunakan dalam Kalimat

"Saya memanggil API (calling an API) dengan membuat HTTP request
 ke sebuah endpoint (URL)."

"Saya sudah menyiapkan webhook — silakan buat HTTP request
 ke sana untuk memberi tahu saya tentang sebuah event."

"Saya menggunakan HTTP POST untuk mengirim pertanyaan dalam body
 berupa JSON ke webhook n8n."

🔧 Node Generik: HTTP Request & Webhook

Selain node-node spesifik (Slack node, Telegram node, dll.), n8n memiliki node generik untuk berintegrasi dengan platform apapun.

┌──────────────────────────────────────────────────────┐
│           Node Integrasi di n8n                      │
├──────────────────┬───────────────────────────────────┤
│  Spesifik        │  Generik                          │
├──────────────────┼───────────────────────────────────┤
│ Slack Node       │ HTTP Request Node                 │
│ Telegram Node    │  → Panggil URL endpoint apapun    │
│ Google Sheets    │  → Output = response JSON         │
│ Supabase Node    │                                   │
│ ElevenLabs Node  │ Webhook Node                      │
│ dll.             │  → Terima panggilan dari luar      │
│                  │  → Test URL + Production URL       │
│                  │  → Respond segera / via node lain  │
└──────────────────┴───────────────────────────────────┘

💡 Kapan menggunakan node generik? Saat platform target belum memiliki node spesifik di n8n, atau saat kamu ingin interaksi yang lebih fleksibel.

🔨 Pendekatan 1: n8n Orchestrates

Setup ElevenLabs API Key

Masuk ke ElevenLabs → Developers → API Keys
Buat key baru dengan monthly limit 500 credits
Berikan akses ke semua service (read access)
Simpan key dengan aman

Workflow n8n

┌──────────┐    ┌───────────┐    ┌───────────┐    ┌───────────┐    ┌───────────┐
│ Webhook  │───▶│ 11Labs    │───▶│ AI Agent  │───▶│ 11Labs    │───▶│ Respond   │
│ (POST)   │    │ STT       │    │ (Gemini)  │    │ TTS       │    │ Webhook   │
│          │    │ Audio→Text│    │           │    │ Text→Audio│    │ (binary)  │
└──────────┘    └───────────┘    └───────────┘    └───────────┘    └───────────┘

Langkah-langkah Build

Webhook Node — Menerima audio via HTTP POST
ElevenLabs Speech-to-Text — Konversi audio menjadi teks
- Install node ElevenLabs (community node)
- Hubungkan credential (API key)
AI Agent (Gemini 3 Flash) — Proses teks, hasilkan jawaban
- Set input: {{ $json.text }} (dari STT output)
- Konfigurasi: "Define below" (bukan connected chat trigger)
ElevenLabs Text-to-Speech — Konversi jawaban menjadi audio
- Voice: Miss Walker atau Jason
- Text: {{ $json.output }} (expression dari agent output)
Respond to Webhook — Kirim file audio kembali ke pemanggil

Halaman Test: voice.html

File HTML sederhana (dibuat ChatGPT) untuk menguji webhook:

Masukkan URL webhook n8n
Tekan "Start Recording" → bicara → "Stop" → "Send to n8n"
Audio dikirim via POST, respons dimainkan otomatis

Troubleshooting Build

Masalah	Penyebab	Solusi
"Cannot read properties of undefined"	Node cari field `data`, tapi audio masuk sebagai `audio`	Ubah field input menjadi `audio`
"Connected chat trigger node"	AI Agent masih expect chat input	Ubah ke "Define below", gunakan `{{ $json.text }}`

⭐ Pendekatan 2: ElevenLabs Orchestrates (Direkomendasikan)

Arsitektur

┌─────────────────────────────────────────────────────────────┐
│                    ElevenLabs                                │
│  ┌──────────────┐                                           │
│  │  Voice Agent  │──── Bicara dengan pengguna               │
│  │  (Russell)    │                                          │
│  │               │     ┌────────────────────────────┐       │
│  │  Tool:        │────▶│  Webhook POST ke n8n       │       │
│  │  "Equity      │     │  Body: { question: "..." } │       │
│  │   Portfolio   │◀────│  Response: JSON jawaban     │       │
│  │   Question"   │     └────────────────────────────┘       │
│  └──────────────┘                                           │
└─────────────────────────────────────────────────────────────┘
                              │
                    ┌─────────▼───────────┐
                    │       n8n           │
                    │  ┌───────────┐      │
                    │  │ Webhook   │      │
                    │  │ (POST)    │      │
                    │  └─────┬─────┘      │
                    │  ┌─────▼─────┐      │
                    │  │ AI Agent  │      │
                    │  │ (Gemini)  │      │
                    │  │ + Google  │      │
                    │  │   Sheets  │      │
                    │  │   Tool    │      │
                    │  └─────┬─────┘      │
                    │  ┌─────▼─────┐      │
                    │  │ Respond   │      │
                    │  │ Webhook   │      │
                    │  └───────────┘      │
                    └─────────────────────┘

Konfigurasi di ElevenLabs

Buat Agent Baru → "Blank Agent" → nama: "n8n Agent"
System Prompt: "You are a helpful assistant"
Voice: Russell (outgoing, excited)
Buat Tool Webhook:

Parameter	Nilai
Nama	`equity_portfolio_question_tool` (tanpa spasi!)
Deskripsi	"Use this tool to ask any question about the user's equity portfolio to a specialist assistant"
Method	POST
URL	URL webhook dari n8n (test/production)
Timeout	60 detik
Pre-tool speech	Force (agar agent bicara sebelum tool dieksekusi)

Body Parameters:

Field	Type	Identifier	Required	Filled By	Deskripsi
question	String	`question`	Ya	LLM	Pertanyaan tentang equity portfolio user

Konfigurasi di n8n

Webhook (POST) → terima panggilan dari ElevenLabs
AI Agent (Gemini 3 Flash):
- Input: {{ $json.body.question }} (pertanyaan dari body POST)
- Tool: Google Sheets (baca portfolio saham)
- Tanpa memory (setiap panggilan independen)
Respond to Webhook → kirim JSON jawaban kembali ke ElevenLabs

Perbedaan Kunci pada AI Agent

Pendekatan 1 (n8n orchestrates):
  Input = {{ $json.text }}         ← dari transcription

Pendekatan 2 (11Labs orchestrates):
  Input = {{ $json.body.question }} ← dari webhook POST body

Mengapa Tanpa Memory?

Pada pendekatan 2, n8n dipanggil sebagai "backend tool" — setiap panggilan independen. Memory ada di sisi ElevenLabs yang mengelola percakapan secara keseluruhan.

🚀 Deploy ke Production

Langkah Deploy

Di n8n:
- Salin Production URL dari Webhook node
- Klik Publish (workflow aktif di production)
Di ElevenLabs:
- Update URL tool: ganti Test URL → Production URL
- Klik Save (jangan lupa!)
- Klik Publish → agent live
- Copy Shareable Link → buka di browser baru

Test vs Production

Aspek	Test Mode	Production Mode
URL	Test URL	Production URL
Eksekusi	Satu kali per "Execute Workflow"	Terus-menerus, otomatis
Multi-question	Tidak bisa (satu webhook call)	Bisa (berulang kali)
Kapan pakai	Saat development & debugging	Saat agent siap digunakan

Hasil Testing Production

Agent berhasil menjawab pertanyaan berturut-turut tentang portfolio saham:

"How many shares of SPY do I have?" → "You currently have 2 shares of SPY"
"What other stocks do I have?" → "BND, iShares Core Allocation ETF, iShares Core Aggressive Allocation ETF"

📊 Rangkuman

Poin-Poin Utama

#	Konsep	Deskripsi
1	Dua pola integrasi	n8n orchestrates vs ElevenLabs orchestrates
2	Latency = faktor kunci	11Labs orchestration menghasilkan latency jauh lebih rendah
3	Webhook tool di 11Labs	LLM mengisi body JSON → POST ke n8n webhook
4	Generic nodes di n8n	HTTP Request Node + Webhook Node untuk integrasi apapun
5	voice.html	Halaman test sederhana untuk menguji audio webhook
6	Gemini sebagai chat model	Gemini 3 Flash digunakan sebagai alternatif OpenAI
7	Test → Production deploy	Ubah URL webhook, publish kedua platform

Teknologi Yang Digunakan Hari Ini

┌─────────────┬────────────────────────────────┐
│ Platform    │ Peran                           │
├─────────────┼────────────────────────────────┤
│ ElevenLabs  │ Voice agent + STT/TTS API      │
│ n8n         │ Business logic & orchestration  │
│ Gemini      │ Chat model (AI Agent)           │
│ Google Sheets│ Data tool (equity portfolio)   │
│ voice.html  │ Test page untuk audio webhook   │
└─────────────┴────────────────────────────────┘

🏆 Pencapaian

╔══════════════════════════════════════════════════════════╗
║  ✅ Memahami dua pola integrasi 11Labs + n8n           ║
║  ✅ Membangun Pendekatan 1 (n8n orchestrates)          ║
║  ✅ Membangun Pendekatan 2 (11Labs orchestrates) ★     ║
║  ✅ Menggunakan generic Webhook + Respond to Webhook   ║
║  ✅ Konfigurasi webhook tool di ElevenLabs             ║
║  ✅ Deploy kedua platform ke production                ║
║                                                          ║
║  📊 Progress Kursus: 47% █████████░░░░░░░░░            ║
╚══════════════════════════════════════════════════════════╝

Selanjutnya: Memahami RAG (Retrieval-Augmented Generation) — teknik paling populer untuk memberikan LLM pengetahuan domain spesifik.

🔗 Day 2 — Integrasi ElevenLabs + n8n: Dua Pendekatan Voice Agent ​

📋 Daftar Isi ​

🔀 Dua Pola Integrasi ​

Perbandingan Detail ​

📡 Terminologi HTTP & Webhook ​

Istilah Kunci ​

Cara Menggunakan dalam Kalimat ​

🔧 Node Generik: HTTP Request & Webhook ​

🔨 Pendekatan 1: n8n Orchestrates ​

Setup ElevenLabs API Key ​

Workflow n8n ​

Langkah-langkah Build ​

Halaman Test: voice.html ​

Troubleshooting Build ​

⭐ Pendekatan 2: ElevenLabs Orchestrates (Direkomendasikan) ​

Arsitektur ​

Konfigurasi di ElevenLabs ​

Konfigurasi di n8n ​

Perbedaan Kunci pada AI Agent ​

Mengapa Tanpa Memory? ​

🚀 Deploy ke Production ​

Langkah Deploy ​

Test vs Production ​

Hasil Testing Production ​

📊 Rangkuman ​

Poin-Poin Utama ​

Teknologi Yang Digunakan Hari Ini ​

🏆 Pencapaian ​