Günümüzde e-ticaret siteleri, kullanıcıların dikkatini çekmek ve satışları arttırmak için kişiselleştirilmiş deneyimler sunmak zorundadır. Şuan kullandıkları geleneksel öneri sistemleri etkili olsa da karmaşık veri işleme ve bakım gerektirmektedir. Dolayısı ile tam da burada OpenAI'nin güçlü dil modelleri devreye giriyor.

Bu makalemde, Next.js ile OpenAI kullanarak, klasik ürün öneri sisteminin yerine yapay zeka ile akıllı ürün öneri sistemini anlatmaya çalışacağım.

İzlenen Yol

• Kullanıcı "Bütçem 5000 TL, koşu için hafif ayakkabı öner" diye yazdığı zaman, sistem bu prompta göre ürün önerecek.
• Küçük / Orta ölçekli sistemler için veritabanına gerek yok, ürünler JSON formatında prompta gömülüyor ve YZ'ye karşılaştırma yapmasını sağlıyoruz.
• Geçmiş sohbeti hafızada tutuyoruz, böylece önerileri ona göre iyileştiriyoruz.

Gereksinimler

• Next.js 14+ (App Route önerilir)
• OpenAI API anahtarı (gpt-4o-mini modeli için)
• Tailwind CSS (tasarım için, isteğe göre)
• Sunucu (Vercel ve ya Node.js çalıştıran bir panel)

Projeyi başlatmak için:

    npx create-next-app@latest my-recommendation-app --typescript --tailwind --eslint --app --src-dir
    cd my-recommendation-app
    npm install openai @ai-sdk/openai

Adım 1: Ürün Kataloğunu Oluşturma

• Ürünleri bir JSON dosyasında tutalım: src/data/proucts.json:

    [
      {
        "id": 1,
        "name": "Nike Air Zoom Pegasus",
        "category": "Koşu Ayakkabısı",
        "price": 4500,
        "features": ["Hafif taban", "Nefes alabilir kumaş", "Yastıklama teknolojisi", "Dayanıklı dış taban"],
        "description": "Günlük koşu ve uzun mesafe için ideal, hafif ve konforlu ayakkabı."
      },
      {
        "id": 2,
        "name": "Adidas Ultraboost",
        "category": "Koşu Ayakkabısı",
        "price": 6000,
        "features": ["Boost köpük taban", "Yüksek enerji dönüşü", "Primeknit üst kısım"],
        "description": "Maksimum enerji dönüşü sağlayan premium koşu ayakkabısı."
      }
      // Daha fazla ürün ekleyin...
    ]

Adım 2: API Route ile OpenAI Entegrasyonu

• src/app/api/recommend/route.ts dosyası oluşturun.
• Bu route, kullanıcının gönderdiği mesajı alıp YZ'ye göndererek öneri üretmesini sağlar.

    import { NextRequest } from 'next/server';
    import { openai } from '@ai-sdk/openai';
    import products from '@/data/products.json';

    const systemPrompt = `
    Sen bir e-ticaret ürün öneri asistanısın. Ürün kataloğu şöyle:
    ${JSON.stringify(products)}

    Kullanıcı mesajına göre en uygun 3-5 ürünü öner. Her öneri için:
    - Ürün adı ve fiyatı
    - Neden önerdiğini detaylı açıkla (kullanıcı istekleriyle eşleşme puanları ver, 1-10 arası)
    - Alternatifler sun

    Yanıtını JSON formatında ver: { "recommendations": [{ "product": {...}, "reason": "string", "score": number }], "responseText": "Kullanıcıya doğal dilde yanıt" }
    Sadece JSON döndür, ekstra metin yok!
    `;

    export async function POST(req: NextRequest) {
      const { message, history } = await req.json(); // history: önceki mesajlar için

      const chatHistory = [
        { role: 'system', content: systemPrompt },
        ...(history || []),
        { role: 'user', content: message }
      ];

      const result = await openai.chat.completions.create({
        model: 'gpt-4o-mini',
        messages: chatHistory,
        response_format: { type: "json_object" },
        temperature: 0.2, // tutarlı sonuçlar için düşük değer
      });

      const jsonResponse = JSON.parse(result.choices[0].message.content || '{}');

      return Response.json(jsonResponse);
    }

Adım 3: Frontend Arayüz

• src/app/page.tsx dosyasında basit bir chat arayüzü oluşturalım.

    'use client';

    import { useState } from 'react';

    export default function Home() {
      const [messages, setMessages] = useState<{ role: string; content: string }[]>([]);
      const [input, setInput] = useState('');
      const [loading, setLoading] = useState(false);

      const sendMessage = async () => {
        if (!input.trim()) return;

        const userMessage = { role: 'user', content: input };
        setMessages(prev => [...prev, userMessage]);
        setLoading(true);

        const res = await fetch('/api/recommend', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ message: input, history: messages }),
        });

        const data = await res.json();
        setLoading(false);

        setMessages(prev => [
          ...prev,
          { role: 'assistant', content: data.responseText },
          // Önerileri kart olarak render etmek için ekstra logic ekleyebilirsiniz
        ]);

        setInput('');
      };

      return (
        <div className="max-w-2xl mx-auto p-4">
          <h1 className="text-3xl font-bold mb-8">Akıllı Ürün Öneri Asistanı</h1>
          <div className="border rounded-lg p-4 h-96 overflow-y-auto mb-4">
            {messages.map((msg, i) => (
              <div key={i} className={`mb-4 ${msg.role === 'user' ? 'text-right' : 'text-left'}`}>
                <span className={`inline-block p-3 rounded-lg ${msg.role === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}>
                  {msg.content}
                </span>
              </div>
            ))}
            {loading && <p>Yükleniyor...</p>}
          </div>
          <div className="flex">
            <input
              className="flex-1 border rounded-l-lg p-3"
              value={input}
              onChange={e => setInput(e.target.value)}
              onKeyDown={e => e.key === 'Enter' && sendMessage()}
              placeholder="Ne arıyorsunuz? (Örn: Bütçe 3000 TL, yürüyüş ayakkabısı)"
            />
            <button onClick={sendMessage} className="bg-blue-600 text-white px-6 rounded-r-lg">Gönder</button>
          </div>
        </div>
      );
    }

İyileştirmeler

• Önerilen ürünleri, ürün kartları olarak daha görsel açıdan hazırlayabilirsiniz.
• NextAuth ile kullanıcı işlemleri ekleyerek, geçmiş satın alımları prompta dahil ederek daha etkili sistem oluşturabilirsiniz.
• Daha büyük sistemleri için, Pinecone gibi vektör veritabanı ekleyerek arama işlemini genişletebilirsiniz.

Sonuç

Yukarıda anlattığım sistem, Next.js'in hızı ve SSR yetenekleri ile OpenAI zekasını birleştirerek, kullanıcıların alışveriş deneyimlerini yükseltiyor. Dolayısı ile uygulamaya SEO açısından da olumlu etkiler katıyor.