Πώς δημιουργώ ένα chatbot για την ιστοσελίδα του πορτοφολιού μου με Next.js 15, Vercel AI SDK και GPT-4o-mini

Η δημιουργία ενός chatbot για την ιστοσελίδα του πορτοφολίου μου, vks.gr, ήταν ένα από τα πιο συναρπαστικά έργα που έχω αναλάβει ως προγραμματιστής ιστού. Ήθελα κάτι διαδραστικό, φιλικό προς τον χρήστη και σύγχρονο για να επιδείξω τις ικανότητές μου ενώ βοηθάω τους επισκέπτες να εξερευνήσουν τη δουλειά μου. Σε αυτό το σεμινάριο, θα σας καθοδηγήσω για το πώς δημιούργησα τον "Vai"—τον AI βοηθό μου—χρησιμοποιώντας το Next.js 15, το Vercel AI SDK, το Tailwind CSS και το μοντέλο GPT-4o-mini της OpenAI. Είτε είστε αρχάριος είτε έμπειρος προγραμματιστής, αυτός ο οδηγός βήμα-βήμα έχει σχεδιαστεί για να είναι εύκολος στην παρακολούθηση, με αποσπάσματα κώδικα που μπορείτε να προσαρμόσετε για τα δικά σας έργα.

Μέχρι το τέλος, θα έχετε ένα κομψό, λειτουργικό chatbot ενσωματωμένο στην ιστοσελίδα σας—τέλειο για πορτοφόλια, ηλεκτρονικό εμπόριο ή οποιαδήποτε εφαρμογή ιστού. Ας ξεκινήσουμε!

Γιατί Δημιούργησα Αυτό το Chatbot

Ως ελεύθερος προγραμματιστής, ήθελα το vks.gr να ξεχωρίζει. Ένα chatbot φαινόταν ο τέλειος τρόπος για να:

• Εμπλέκω τους επισκέπτες με άμεσες απαντήσεις σχετικά με το πορτφόλιο, τις υπηρεσίες και το blog μου.
• Δείξω τις ικανότητές μου με προηγμένες τεχνολογίες όπως η AI και το Next.js.
• Κάνω τον ιστότοπο πιο διαδραστικό και διασκεδαστικό.

Επέλεξα το Next.js 15 για τον App Router και τις δυνατότητες server-side, το Vercel AI SDK για απρόσκοπτη ενσωμάτωση AI, το Tailwind CSS για γρήγορο στυλ και το GPT-4o-mini για την αποδοτικότητα και την οικονομία του. Έτοιμοι να δημιουργήσετε το δικό σας; Ας ξεκινήσουμε.

Προαπαιτούμενα

Πριν ξεκινήσουμε, βεβαιωθείτε ότι έχετε:

• Node.js (v18 ή νεότερη έκδοση) εγκατεστημένο.
• Μια βασική κατανόηση του React και του TypeScript.
• Ένα OpenAI API key (αποκτήστε ένα από platform.openai.com).
• Ένα έργο Next.js ρυθμισμένο (npx create-next-app@latest).

Βήμα 1: Ρύθμιση του έργου σας Next.js

Αν δεν έχετε ήδη μια εφαρμογή Next.js, δημιουργήστε μία:

npx create-next-app@15 my-chatbot-app
cd my-chatbot-app
npm install

Χρησιμοποίησα TypeScript για ασφάλεια τύπων, οπότε επιλέξτε αυτή την επιλογή όταν σας ζητηθεί. Στη συνέχεια, εγκαταστήστε τις βασικές εξαρτήσεις:

npm install @ai-sdk/openai ai tailwindcss framer-motion @heroicons/react firebase-admin

• @ai-sdk/openai: Συνδέεται με το API του OpenAI μέσω του Vercel AI SDK.
• ai: Κύριο πακέτο του Vercel AI SDK.
• tailwindcss: Για τη στυλιστική διαμόρφωση του UI του chatbot.
• framer-motion: Για ομαλές animations.
• @heroicons/react: Εικονίδια για το UI.
• firebase-admin: Προαιρετικό, για την αποθήκευση των συνεδριών συνομιλίας (χρησιμοποίησα το Firebase, αλλά μπορείτε να το παραλείψετε).

Ρυθμίστε το Tailwind CSS εκτελώντας npx tailwindcss init και ενημερώνοντας το tailwind.config.ts—ελέγξτε τα έγγραφα του Tailwind για λεπτομέρειες.

Βήμα 2: Δημιουργία της Διαδρομής API για το Chat

Ο chatbot χρειάζεται ένα backend για να επεξεργάζεται μηνύματα και να επικοινωνεί με το GPT-4o-mini. Δημιούργησα μια διαδρομή API στο app/api/chat/route.ts. Ακολουθεί μια απλοποιημένη έκδοση:

// app/api/chat/route.ts
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";

export const maxDuration = 60; // Όριο χρόνου Vercel

export async function POST(req: Request) {
  const { messages } = await req.json();

  const systemPrompt = `
    Είσαι ο Vai, ένας AI βοηθός για μια ιστοσελίδα χαρτοφυλακίου (vks.gr).
    Να είσαι φιλικός, συνοπτικός και χρήσιμος. Να απαντάς σε ερωτήσεις σχετικά με τη δουλειά μου, τις υπηρεσίες ή οτιδήποτε σχετίζεται με την ιστοσελίδα!
  `;

  const result = await streamText({
    model: openai("gpt-4o-mini"),
    system: systemPrompt,
    messages,
  });

  return result.toDataStreamResponse();
}

Τι Συμβαίνει Εδώ;

• Εισαγωγές: Φέρνουμε το OpenAI και τις δυνατότητες streaming από το Vercel AI SDK.
• Διαχειριστής POST: Δέχεται μηνύματα χρηστών μέσω ενός JSON αιτήματος.
• Σύστημα Προτροπής: Λέει στο GPT-4o-mini ότι είναι "Vai" και ρυθμίζει τον τόνο του.
• Streaming: Χρησιμοποιεί το streamText για να στείλει απαντήσεις σε πραγματικό χρόνο, βελτιώνοντας την εμπειρία χρήστη.
• Περιβάλλον: Προσθέστε το κλειδί API του OpenAI σε ένα αρχείο .env: OPENAI_API_KEY=your-key-here.

Αυτή η API στέλνει απαντήσεις από το GPT-4o-mini, κρατώντας το chatbot γρήγορο και ανταγωνιστικό. Στην πλήρη έκδοσή μου, έχω επίσης αντλήσει δεδομένα χαρτοφυλακίου από JSON και Firebase—μη διστάσετε να το προσαρμόσετε με το δικό σας περιεχόμενο!

Βήμα 3: Δημιουργία του Στοιχείου UI Συνομιλίας

Τώρα, ας δημιουργήσουμε το front-end. Έχω τοποθετήσει το chatbot μου στο app/components/chat/Chat.tsx. Ορίστε μια απλοποιημένη έκδοση:

// app/components/chat/Chat.tsx
"use client";

import { useChat } from "@ai-sdk/react";
import React, { useState } from "react";
import { XMarkIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";
import { motion } from "framer-motion";

export default function Chat() {
  const [isOpen, setIsOpen] = useState(false);
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: "/api/chat",
    initialMessages: [
      {
        id: "welcome",
        role: "assistant",
        content: "Είμαι η Vai — η AI βοηθός σας! Πώς μπορώ να σας βοηθήσω σήμερα;",
      },
    ],
  });

  const onSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    handleSubmit(e);
  };

  return (
    <>
      {!isOpen && (
        <motion.button
          onClick={() => setIsOpen(true)}
          className="fixed bottom-4 right-4 px-4 py-2 bg-yellow-400 text-gray-900 rounded-full shadow-lg"
          whileHover={{ scale: 1.1 }}
          whileTap={{ scale: 0.9 }}
        >
          Συνομιλία με τη Vai
        </motion.button>
      )}
      {isOpen && (
        <section className="fixed bottom-4 right-4 w-[90vw] md:w-[400px] h-[500px] bg-gray-800 text-white rounded-xl shadow-2xl flex flex-col">
          <header className="p-4 border-b border-gray-700 flex justify-between">
            <h2 className="text-lg font-semibold">Vai — AI Βοηθός</h2>
            <button onClick={() => setIsOpen(false)}>
              <XMarkIcon className="w-5 h-5" />
            </button>
          </header>
          <div className="flex-1 p-4 overflow-y-auto">
            {messages.map((m) => (
              <div
                key={m.id}
                className={`p-3 rounded-lg my-2 ${
                  m.role === "user" ? "bg-yellow-400 text-black ml-auto" : "bg-gray-700"
                }`}
              >
                {m.content}
              </div>
            ))}
          </div>
          <form onSubmit={onSubmit} className="p-4 border-t border-gray-700 flex gap-2">
            <textarea
              value={input}
              onChange={handleInputChange}
              placeholder="Ρωτήστε οτιδήποτε"
              className="flex-1 p-2 bg-gray-700 rounded-xl text-white"
              rows={2}
            />
            <button type="submit" className="p-2 bg-yellow-400 rounded-full">
              <PaperAirplaneIcon className="w-5 h-5 text-gray-900" />
            </button>
          </form>
        </section>
      )}
    </>
  );
}

Κύρια Χαρακτηριστικά:

• useChat Hook: Διαχειρίζεται την κατάσταση της συνομιλίας και τις κλήσεις API χωρίς κόπο.
• Σχεδίαση Modal: Ένα πλωτό κουμπί ανοίγει το παράθυρο συνομιλίας.
• Tailwind CSS: Στυλ όπως bg-yellow-400 και rounded-xl το κρατούν καθαρό και μοντέρνο.
• Framer Motion: Προσθέτει διακριτικές κινήσεις στο κουμπί (whileHover, whileTap).
• Προσβασιμότητα: Βασικές ετικέτες ARIA και διαχείριση εστίασης (η πλήρης έκδοσή μου έχει περισσότερα).

Στην πραγματική μου εφαρμογή, πρόσθεσα πλοήγηση με πληκτρολόγιο, διατήρηση συνεδρίας με Firebase, και ανάλυση Markdown επίσης.

Βήμα 4: Ενσωμάτωσε το Chatbot στο Layout σου

Για να κάνω το chatbot προσβάσιμο σε όλο το site, το πρόσθεσα στο app/layout.tsx:

// app/layout.tsx
import Chat from "@/app/components/chat/Chat";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="min-h-screen flex flex-col">
        {children}
        <div className="fixed bottom-10 right-10">
          <Chat />
        </div>
      </body>
    </html>
  );

Αυτό τοποθετεί το chatbot στην κάτω δεξιά γωνία, αιωρούμενο πάνω από το περιεχόμενο. Χρησιμοποίησα επίσης προσαρμοσμένες γραμματοσειρές (Comfortaa, Montserrat) και μια γραμμή προόδου μέσω του nextjs-toploader—μικρές πινελιές για να τελειοποιήσουν την εμπειρία.

Βήμα 5: Δοκιμή και Ανάπτυξη

Εκτελέστε την εφαρμογή σας τοπικά:

npm run dev

Κάντε κλικ στο κουμπί "Chat with Vai", πληκτρολογήστε ένα μήνυμα και παρακολουθήστε την απάντηση του Vai! Αν λειτουργεί, αναπτύξτε το στο Vercel:

vercel

Οι serverless functions του Vercel διαχειρίζονται τέλεια τη διαδρομή API, και η streaming απάντηση διατηρεί την ταχύτητα.

Μπόνους: Συμβουλές Προσαρμογής

• Στυλ: Ρυθμίστε τις κλάσεις Tailwind ώστε να ταιριάζουν με την επωνυμία σας (χρησιμοποίησα κίτρινες λεπτομέρειες για το vks.gr).
• Μοντέλο AI: Αντικαταστήστε το GPT-4o-mini με άλλο μοντέλο μέσω του @ai-sdk/openai.
• Δεδομένα: Τροφοδοτήστε το chatbot σας με προσαρμοσμένο περιεχόμενο (χρησιμοποίησα JSON και Firebase για τα δεδομένα του χαρτοφυλακίου).
• Κινήσεις: Προσθέστε περισσότερα εφέ Framer Motion στο παράθυρο συνομιλίας.

Συμπέρασμα

Η κατασκευή του Vai για vks.gr ήταν εκπληκτική, και ελπίζω αυτό το tutorial να σας εμπνεύσει να προσθέσετε ένα chatbot στον δικό σας ιστότοπο. Με το Next.js 15, το Vercel AI SDK και το Tailwind CSS, είναι πιο εύκολο από ποτέ. Έχετε ερωτήσεις; Αφήστε ένα σχόλιο ή επικοινωνήστε—θα ήθελα να ακούσω πώς το προσαρμόζετε για τα έργα σας!