לא משנה כמה חשבתם שלכם קשה עם כל הספריות שמשתנות כל הזמן בעולם ה Full Stack, ל AI זה הרבה יותר קשה. אולי בגלל זה הם מצליחים לבנות משחק סנייק בפחות מדקה, אבל רק ננסה משהו שצריך ספריות מ npm והוא הולך לאיבוד בגירסאות. וזה חבל כי עדיין יש המון דברים ב npm שיכולים לחסוך לנו זמן פיתוח ובאגים. הדוגמה שלנו היום היא ספריות ה ai של Vercel.

1. מה יש בזה

ורסל פיתחו אוסף ספריות שמחברות בין AI Bots לממשק משתמש, כך שמצד אחד תוכלו לכתוב את הממשק בכל דרך שתרצו אבל מצד שני תקבלו גישה לכל הפינוקים הסטנדרטיים של ממשקי AI. בדוגמה של צ'ט בוט זה אומר שנקבל:

1. ממשק אחיד לשליחת הודעה ל AI Chat Bot.

2. הודעה שתישלח בממשק האחיד תוכל לחזור בתור זרם של תווים, וכך תוצג מהר יותר למשתמשים.

3. שימוש בכלים וממשק סטנדרטי להודעות שנוצרו על ידי כלים.

4. התאמת הודעות לסכימה כדי לוודא שמקבלים את המידע שרצינו ובפורמט שרצינו.

בואו נראה את התבנית לפיתוח Chat Bot בסיסי ובסוף קישור לתיעוד כדי שתוכלו להמשיך משם.

2. צ'ט בוט בסיסי ב Next.JS

בשביל לבנות Chat Bot בסיסי ב Next.JS עם החבילה של ורסל תחילה נתקין את החבילה עם:

$ npm add ai ai-sdk/react

ולאחר מכן נוסיף ספק AI שזה מודול לעבודה עם צ'ט בוט מסוים, הנה כמה ספקים לדוגמה (מספיק לבחור אחד):

$ npm add @ai-sdk/xai @ai-sdk/openai @ai-sdk/anthropic @ai-sdk/google

מבחינת הקוד יש לפרויקט בסך הכל שני קבצים. קוד צד לקוח שמציג חלון שיחה:

// file: page.tsx

'use client';

import { useChat } from '@ai-sdk/react';

export default function Page() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({});

  return (
    <>
      {messages.map(message => (
        <div key={message.id}>
          {message.role === 'user' ? 'User: ' : 'AI: '}
          {message.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input name="prompt" value={input} onChange={handleInputChange} />
        <button type="submit">Submit</button>
      </form>
    </>
  );
}

וקוד צד שרת שמטפל בפניות מהלקוח, מעביר את ההודעה לבוט השיחה ומחזיר את השיחה בזרם תווים:

// src/app/api/chat/route.ts

import { deepseek } from '@ai-sdk/deepseek';
import { streamText } from 'ai';

// Allow streaming responses up to 30 seconds
export const maxDuration = 30;

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

  const result = streamText({
    model: deepseek('deepseek-chat'),
    system: 'You are a helpful assistant.',
    messages,
  });

  return result.toDataStreamResponse();
}

קוד? בטח הנה זה כאן:

https://github.com/ynonp/nextjs-chatbot