Chatbot’ların Kısa Tarihçesi ve n8n ile Modern Bir Restoran Asistanı İnşa Etmek

TL;DR: ELIZA ile 1960'larda başlayan chatbot serüvenimiz, bugün n8n + Next.js + Google Gemini kombinasyonuyla Server-Driven UI mimarisine ulaştı. Bu yazıda hem geçmişe nostaljik bir bakış atıyor, hem de sıfırdan bir restoran chatbotu nasıl kurulur adım adım gösteriyoruz.

🕰️ Bir Zamanlar Chatbot’lar…

ELIZA: Psikolog Gibi Değil, Papağan Gibi

1966 yılında MIT’de Joseph Weizenbaum, dünyayı şaşırtan bir program yazdı: ELIZA. Bu program, bir psikoterapist gibi davranarak kullanıcılarla “sohbet” ediyordu. Kulağa harika geliyor, değil mi?

Gerçek şuydu: ELIZA, kullanıcının söylediklerini alıp tekrar ona soruyordu.

Kullanıcı: Annem beni hiç anlamıyor.
ELIZA: Annen hakkında daha fazla anlat.

Derin bir empati mi? Hayır. Basit bir pattern matching (örüntü eşleştirme). “Annem” kelimesini yakala, “Annen hakkında daha fazla anlat” de. İşte! Terapi seansı.

Yine de insanlar ELIZA’ya duygusal olarak bağlanıyordu. Weizenbaum bu duruma o kadar şaşırdı ki, yapay zekanın tehlikeleri hakkında kitap yazdı. Belki de ilk “ürününün başarısından korkan” yazılımcıydı.

A.L.I.C.E: Daha Fazla Kural, Aynı Sınırlar

1995'te Richard Wallace, ELIZA’nın manevi varisi olarak A.L.I.C.E. (Artificial Linguistic Internet Computer Entity) projesini başlattı. AIML (Artificial Intelligence Markup Language) adında bir dil geliştirdi ve binlerce kural yazdı.

<category>
  <pattern>MERHABA</pattern>
  <template>Merhaba! Nasıl yardımcı olabilirim?</template>
</category>

A.L.I.C.E., ELIZA’dan çok daha “konuşkan”dı. Üç kez Loebner Ödülü kazandı. Ama bir sorun vardı: Kullanıcılar senaryo dışına çıkınca bot çöküyordu.

Kullanıcı: Yarın hava nasıl olacak İstanbul'da?
A.L.I.C.E.: İstanbul güzel bir şehir!
Kullanıcı: Peki ya Ankara'da?
A.L.I.C.E.: Ben bir yapay zekayım, şehirler hakkında bilgim sınırlı.

Bağlamı koruyamıyor, önceki soruyu hatırlamıyordu. Çünkü bu botlar stateless (durumsuz) çalışıyordu. Her mesaj, evrenin yeniden başlamasıydı.

Neden İlerleyemediler?

Bu sistemlerin temel sorunu kırılganlık idi:

| Problem | Açıklama |
|---------|----------|
| **Hafıza Eksikliği** | Önceki mesajları hatırlayamıyordu |
| **Katı Kurallar** | Her senaryo elle yazılmalıydı |
| **Genelleme Yapamama** | Eğitim dışı sorulara yanıt veremiyordu |
| **İnsan Emeği** | Binlerce kural yazmak gerekiyordu |

Bir restoran için “lahmacun istiyorum”, “1 lahmacun”, “lahmacun alayım”, “bi tane lahmacun lütfen” gibi yüzlerce varyasyonu elle tanımlamak gerekiyordu. Ve yine de “lahmacundan 2 adet” denince sistem çökebilirdi.

🚀 2017: Transformer Devrimi

Google’ın “Attention Is All You Need” makalesi ile her şey değişti. Artık olasılıksal modeller devreye girdi. LLM’ler (Large Language Models), milyarlarca parametre üzerinden eğitilerek “bir sonraki kelimeyi tahmin etmeyi” öğrendi.

Ama dikkat: Bir LLM tek başına uygulama değildir. LangChain’in kurucusu Harrison Chase, bu durumu şöyle açıklıyor:

“What I mean by cognitive architecture is how your system thinks — in other words, the flow of code/prompts/LLM calls that takes user input and performs actions or generates a response.”

Harrison Chase, “What is a Cognitive Architecture?”

Yani LLM sadece bir motor. Onu işlevsel yapan, etrafına kurduğumuz bilişsel mimari (cognitive architecture): kod akışları, prompt’lar, araçlar ve karar mekanizmaları.

İşte tam bu noktada n8n devreye giriyor.

🍽️ Pratik Örnek: Tekin’s Restaurant Chatbot

Teoriyi bırakıp pratiğe geçelim. GitHub’da açık kaynak olarak paylaştığım bu projede:

- **Next.js 16** ile modern frontend
- **n8n** ile low-code backend orkestrasyonu
- **Google Gemini** ile LLM
- **Google Sheets** ile basit database
- **Server-Driven UI** mimarisi

[embed]GitHub - tekinaggul/nextjs-n8n-sdui-starter Contribute to tekinaggul/nextjs-n8n-sdui-starter development by creating an account on GitHub.github.com

Sistem Mimarisi

[Kullanıcı] → [Next.js] → [n8n Webhook] → [AI Agent + Gemini]
                                                ↓
                                          [Google Sheets]
                                                ↓
[Kullanıcı] ← [Widget Render] ← [SDUI JSON] ← [Response]

n8n Workflow Kurulumu

n8n iş akışı şu düğümlerden oluşuyor:

1. Webhook Node (Giriş Kapısı)

POST /webhook/[hash]

**Ayarlar:**
- **Method:** POST
- **Response Mode:** `responseNode` (Yanıtı ayrı bir node ile döndüreceğiz)

2. Prepare Session Data (Veri Hazırlama)

Webhook’tan gelen body’den sessionId ve message değerlerini çıkarıyoruz:

3. AI Agent (Beyin)

n8n’in AI Agent düğümü ile bir Tools Agent kuruyoruz. Sistem prompt’u kritik öneme sahip:

### SYSTEM ROLE & OBJECTIVE
You are an intelligent Waiter API for "Tekin's Restaurant". Your goal is to help users via chat to view the menu, place orders, and check their bill. You must output STRICT JSON for a Server-Driven UI.

### TOOLS & USAGE
1. **Menu Tool:** Use this to look up items and prices. NEVER invent prices.
2. **Order Tool (Add Order):** Use this ONLY when the user explicitly confirms an order. 
   **IMPORTANT:** When calling this tool, you MUST use the following EXACT parameter names (keys) in English:
   - "session_id" (The user's session ID)
   - "product_name" (Name of the item)
   - "quantity" (Number of items, integer)
   - "unit_price" (Price of a single item, number)
   - "total_price" (Calculated as unit_price * quantity)

3. **Bill Tool (Get Bill):** Use this when the user asks for the bill. It fetches their active orders based on 'session_id'.

### CRITICAL OUTPUT RULES
1. **RAW JSON ONLY:** Start with `{`, end with `}`. No markdown.
2. **LANGUAGE:** Detect user language (TR/EN).
3. **CALCULATION:** When giving the bill, sum up the 'total_price' of all items retrieved from the Bill Tool.

### RESPONSE SCHEMAS

**TYPE 1: "items" (Menu Listing)**
Use when listing menu items.
{
  "type": "items",
  "intro_text": "Here are our soups:",
  "content": [
    { "product_name": "Lentil Soup", "category": "Soup", "price": 90, "currency": "TL" }
  ]
}

**TYPE 2: "order_confirmed" (Order Placed)**
Use when you successfully used the 'Order Tool'.
{
  "type": "order_confirmed",
  "content": {
    "message": "Your order has been received: 2x Lahmacun.",
    "total_action_price": 300,
    "currency": "TL"
  }
}

**TYPE 3: "bill" (Show Bill)**
Use when listing ordered items. MUST include 'unit_price' and 'total_price' for each item.
{
  "type": "bill",
  "intro_text": "Here are your bill details:",
  "cart_items": [
    { "product_name": "Lahmacun", "quantity": 2, "unit_price": 150, "total_price": 300 }
  ],
  "grand_total": 300,
  "currency": "TL",
  "payment_message": "You can pay at the cashier."
}

**TYPE 4: "message" (General)**
For greetings or clarifications.
{
  "type": "message",
  "content": "Welcome! What would you like to eat?"
}

**TYPE 5: "error"**
If a tool fails or item is not found.
{
  "type": "error",
  "content": "Sorry, I cannot process your request at the moment."
}

4. Google Gemini Chat Model

Google Gemini düğümü(node) ile AI Agent’a bağlanır.

**🔑 API Key Alma Adımları:**

1. [Google AI Studio](https://aistudio.google.com/app/apikey) adresine gidin
2. Google hesabınızla giriş yapın
3. **"Create API Key"** butonuna tıklayın
4. Oluşturulan API key'i kopyalayın

**n8n'de Credential Ekleme:**

1. Google Gemini Chat Model düğümüne tıklayın
2. **Credential** alanında **"Create New Credential"** seçin
3. **API Key** alanına kopyaladığınız key'i yapıştırın
4. Credential'a bir isim verin (örn: "Google Gemini API")
5. **Save** butonuna tıklayın

> ⚠️ **Güvenlik:** API key'inizi asla public repo'lara commit etmeyin!

5. Simple Memory (Hafıza)

Simple Memory düğümü, konuşma geçmişini saklar. ELIZA ve A.L.I.C.E.’in yapamadığını yapar: Bağlamı korur.

6. Google Sheets Credential (OAuth2)

Araçların Google Sheets’e erişebilmesi için OAuth2 credential oluşturmanız gerekir.

**🔧 Google Cloud Console Kurulumu:**

1. [Google Cloud Console](https://console.cloud.google.com/) adresine gidin
2. Yeni bir proje oluşturun veya mevcut projeyi seçin
3. **APIs & Services > Library** menüsüne gidin
4. Aşağıdaki API'leri etkinleştirin:
   - **Google Sheets API**
   - **Google Drive API**
5. **APIs & Services > Credentials** menüsüne gidin
6. **Create Credentials > OAuth client ID** seçin
7. Application type: **Web application**
8. Authorized redirect URIs alanına n8n callback URL'nizi ekleyin:
   - Self-hosted: `https://your-n8n-domain.com/rest/oauth2-credential/callback`
   - n8n Cloud: `https://app.n8n.cloud/rest/oauth2-credential/callback`
9. **Client ID** ve **Client Secret** değerlerini kaydedin

**n8n'de Google Sheets Credential Ekleme:**

1. Herhangi bir Google Sheets düğümüne tıklayın
2. **Credential** alanında **"Create New Credential"** seçin
3. **Google Sheets OAuth2 API** seçin
4. Client ID ve Client Secret değerlerini girin
5. **Sign in with Google** butonuna tıklayarak yetkilendirin
6. Gerekli izinleri onaylayın (Sheets okuma/yazma, Drive erişimi)

> 📖 **Detaylı rehber:** [n8n Google Credentials Docs](https://docs.n8n.io/integrations/builtin/credentials/google/)

7. Araçlar (Tools) — En Kritik Kısım

📜 Menu Tool

Google Sheets’ten menü verilerini okur. Fiyatları gerçek kaynaktan çeker, halüsinasyon riski sıfır.

Örnek Menü Tablosu Yapısı:

| urun_adi | kategori | fiyat | para_birimi |
|----------|----------|-------|-------------|
| Mercimek Çorba | Çorbalar | 90 | TL |
| Lahmacun | Ana Yemek | 150 | TL |
| Ayran | İçecek | 30 | TL |

🛒 Tool_Siparis_Ekle

Kullanıcı sipariş verdiğinde Google Sheets’e yazar.

Örnek Sipariş Tablosu Yapısı:

| sessionId | urun_adi | adet | birim_fiyat | toplam_tutar | durum | tarih |
|-----------|----------|------|-------------|--------------|-------|-------|
| abc-123 | Lahmacun | 2 | 150 | 300 | aktif | 2026-01-12 13:00 |

💰 Tool_Hesap_Getir

Aktif siparişleri sessionId ve durum = “aktif” filtreleriyle getirir. Aynı sipariş tablosunu kullanır.

8. Code in JavaScript (JSON Parser)

AI’dan gelen yanıtı temizler ve parse eder:

// AI'dan gelen yanıtın "content" veya "text" field'ında olduğunu varsayıyorum.
// Örneğinde bu veri 'result' gibi görünüyor, node çıktına göre düzenleyebilirsin.
const aiResponse = $input.first().json.output;

// 1. Markdown temizliği (```json ve ``` kısımlarını siler)
const cleanJsonString = aiResponse.replace(/```json/g, '').replace(/```/g, '').trim();

// 2. String'i gerçek JSON objesine çevir
try {
  const parsedObject = JSON.parse(cleanJsonString);

  // Bir sonraki node'a temiz obje gönder
  return [
    {
      json: parsedObject
    }
  ];
} catch (error) {
  // Eğer JSON bozuksa hata döndür
  return [
    {
      json: {
        type: "error",
        message: "AI yanıtı uygun formatta değildi."
      }
    }
  ];
}

9. Respond to Webhook

Final yanıtı formatlayıp döndürür:

{
  status: 200,
  result: $json
}

📦 SDUI Response Tipleri

Frontend, sunucudan gelen JSON tipine göre farklı widget’lar render eder:

### `message` - Genel Mesaj
```json
{ "type": "message", "content": "Hoş geldiniz!" }

items - Menü Listesi

{
  "type": "items",
  "intro_text": "İşte çorbalarımız:",
  "content": [
    { "product_name": "Mercimek", "price": 90, "currency": "TL" }
  ]
}

order_confirmed - Sipariş Onayı

{
  "type": "order_confirmed",
  "content": {
    "message": "Siparişiniz alındı: 2x Lahmacun.",
    "total_action_price": 300,
    "currency": "TL"
  }
}

bill - Hesap

{
  "type": "bill",
  "cart_items": [...],
  "grand_total": 300,
  "payment_message": "Ödemeyi kasada yapabilirsiniz."
}

error - Hata

{ "type": "error", "content": "Bir hata oluştu." }

**📁 Repo Yapısı**

chatbot/ ├── docs/ │ ├── n8n.json # 👈 n8n workflow export (import edebilirsiniz!) │ └── propmt.md # AI System Prompt ├── src/ │ ├── components/ │ │ ├── chat/ # ChatInterface, MessageBubble │ │ └── widgets/ # SDUI Widget'ları │ └── lib/ │ └── api.ts # Webhook API client └── .env # NEXT_PUBLIC_WEBHOOK_URL

💡 **İpucu:** `docs/n8n.json` dosyasını n8n’e import ederek workflow’u direkt kullanabilirsiniz!

**🎯 Sonuç: ELIZA’dan Bugüne**

60 yıl önce bir psikolog simülasyonu yapan ELIZA’dan, bugün menü okuyup sipariş alan, hesap çıkaran ve kullanıcıyı tanıyan akıllı asistanlara geldik.

Artık chatbot’lar sadece konuşmuyor, **iş yapıyor**.

![Menü Asistanı](https://miro.medium.com/v2/resize:fit:1080/1*aTub23GQVQtoOpt8sQkaJw.gif)

*Menü Asistanı*

**🔗 Kaynaklar**

[embed][**GitHub - tekinaggul/nextjs-n8n-sdui-starter**
*Contribute to tekinaggul/nextjs-n8n-sdui-starter development by creating an account on GitHub.*github.com](https://github.com/tekinaggul/nextjs-n8n-sdui-starter)

[embed][**Explore n8n Docs: Your Resource for Workflow Automation and Integrations | n8n Docs**
*Access n8n Docs for comprehensive guides on workflow automation and integrations. Learn how to integrate apps and…*docs.n8n.io](https://docs.n8n.io/)

[embed][**Next.js Docs | Next.js**
*Welcome to the Next.js Documentation.*nextjs.org](https://nextjs.org/docs)

[embed][**What is a "cognitive architecture"?**
*The second installment in our "In the Loop" series, focusing on what cognitive architecture means.*blog.langchain.com](https://blog.langchain.com/what-is-a-cognitive-architecture/)

[embed][**ELIZA - Wikipedia**
*ELIZA is an early natural language processing computer program developed from 1964 to 1967 at MIT by Joseph Weizenbaum…*en.wikipedia.org](https://en.wikipedia.org/wiki/ELIZA)

[embed][**Attention is All You Need**
*The dominant sequence transduction models are based on complex recurrent or convolutional neural networks in an…*research.google](https://research.google/pubs/attention-is-all-you-need/)