بناء تطبيق دردشة ذكاء اصطناعي متعدد النماذج مع Together AI SDK و Next.js 15

npx create-next-app@latest together-chat --typescript --tailwind --app --src-dir
cd together-chat

npm install together-ai

TOGETHER_API_KEY=your_api_key_here

echo ".env.local" >> .gitignore

import Together from 'together-ai';
 
export const together = new Together({
  apiKey: process.env.TOGETHER_API_KEY,
});
 
export const AVAILABLE_MODELS = [
  {
    id: 'meta-llama/Llama-3.3-70B-Instruct-Turbo',
    name: 'Llama 3.3 70B',
    provider: 'Meta',
  },
  {
    id: 'mistralai/Mixtral-8x7B-Instruct-v0.1',
    name: 'Mixtral 8x7B',
    provider: 'Mistral AI',
  },
  {
    id: 'Qwen/Qwen2.5-72B-Instruct-Turbo',
    name: 'Qwen 2.5 72B',
    provider: 'Alibaba',
  },
  {
    id: 'deepseek-ai/DeepSeek-V3',
    name: 'DeepSeek V3',
    provider: 'DeepSeek',
  },
];

import { together } from '@/lib/together';
import { NextRequest } from 'next/server';
 
export const runtime = 'nodejs';
export const maxDuration = 60;
 
export async function POST(req: NextRequest) {
  const { messages, model } = await req.json();
 
  if (!messages || !Array.isArray(messages)) {
    return new Response(JSON.stringify({ error: 'Invalid messages format' }), {
      status: 400,
      headers: { 'Content-Type': 'application/json' },
    });
  }
 
  const selectedModel = model || 'meta-llama/Llama-3.3-70B-Instruct-Turbo';
 
  const systemMessage = {
    role: 'system' as const,
    content: 'أنت مساعد ذكاء اصطناعي مفيد. كن موجزاً ودقيقاً في إجاباتك.',
  };
 
  const stream = await together.chat.completions.create({
    messages: [systemMessage, ...messages],
    model: selectedModel,
    stream: true,
    max_tokens: 2048,
    temperature: 0.7,
  });
 
  const encoder = new TextEncoder();
 
  const readable = new ReadableStream({
    async start(controller) {
      try {
        for await (const chunk of stream) {
          const content = chunk.choices[0]?.delta?.content || '';
          if (content) {
            controller.enqueue(encoder.encode(content));
          }
        }
      } catch (err) {
        controller.error(err);
      } finally {
        controller.close();
      }
    },
  });
 
  return new Response(readable, {
    headers: {
      'Content-Type': 'text/plain; charset=utf-8',
      'Transfer-Encoding': 'chunked',
      'X-Content-Type-Options': 'nosniff',
    },
  });
}

export type Role = 'user' | 'assistant' | 'system';
 
export interface Message {
  id: string;
  role: Role;
  content: string;
}

'use client';
 
import { useState, useRef, useEffect } from 'react';
import { AVAILABLE_MODELS } from '@/lib/together';
import { Message } from '@/types/chat';
 
export default function Chat() {
  const [messages, setMessages] = useState<Message[]>([]);
  const [input, setInput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [selectedModel, setSelectedModel] = useState(AVAILABLE_MODELS[0].id);
  const bottomRef = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);
 
  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!input.trim() || isLoading) return;
 
    const userMessage: Message = {
      id: crypto.randomUUID(),
      role: 'user',
      content: input.trim(),
    };
 
    const updatedMessages = [...messages, userMessage];
    setMessages(updatedMessages);
    setInput('');
    setIsLoading(true);
 
    const assistantId = crypto.randomUUID();
    setMessages(prev => [
      ...prev,
      { id: assistantId, role: 'assistant', content: '' },
    ]);
 
    try {
      const res = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          messages: updatedMessages.map(m => ({
            role: m.role,
            content: m.content,
          })),
          model: selectedModel,
        }),
      });
 
      if (!res.ok) throw new Error('Failed to fetch response');
      if (!res.body) throw new Error('No response body');
 
      const reader = res.body.getReader();
      const decoder = new TextDecoder();
 
      while (true) {
        const result = await reader.read();
        if (result.done) break;
        const text = decoder.decode(result.value, { stream: true });
        setMessages(prev =>
          prev.map(m =>
            m.id === assistantId
              ? { ...m, content: m.content + text }
              : m
          )
        );
      }
    } catch (err) {
      setMessages(prev =>
        prev.map(m =>
          m.id === assistantId
            ? { ...m, content: 'خطأ: تعذّر الحصول على رد. يرجى المحاولة مجدداً.' }
            : m
        )
      );
    } finally {
      setIsLoading(false);
    }
  }
 
  const modelInfo = AVAILABLE_MODELS.find(m => m.id === selectedModel);
 
  return (
    <div className="flex flex-col h-screen max-w-3xl mx-auto px-4" dir="rtl">
      <div className="flex items-center justify-between py-4 border-b">
        <h1 className="text-xl font-semibold">Together AI Chat</h1>
        <select
          value={selectedModel}
          onChange={e => setSelectedModel(e.target.value)}
          className="text-sm border rounded-lg px-3 py-1.5 bg-white dark:bg-zinc-900"
        >
          {AVAILABLE_MODELS.map(m => (
            <option key={m.id} value={m.id}>
              {m.name} ({m.provider})
            </option>
          ))}
        </select>
      </div>
 
      <div className="flex-1 overflow-y-auto py-4 space-y-4">
        {messages.length === 0 && (
          <div className="text-center text-zinc-400 mt-20">
            <p className="text-lg font-medium">ابدأ محادثة</p>
            <p className="text-sm mt-1">
              باستخدام {modelInfo?.name} من {modelInfo?.provider}
            </p>
          </div>
        )}
        {messages.map(message => (
          <div
            key={message.id}
            className={`flex ${message.role === 'user' ? 'justify-start' : 'justify-end'}`}
          >
            <div
              className={`max-w-[80%] rounded-2xl px-4 py-2.5 text-sm ${
                message.role === 'user'
                  ? 'bg-blue-600 text-white'
                  : 'bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100'
              }`}
            >
              {message.content || (
                <span className="animate-pulse">جارٍ التفكير...</span>
              )}
            </div>
          </div>
        ))}
        <div ref={bottomRef} />
      </div>
 
      <form onSubmit={handleSubmit} className="py-4 border-t">
        <div className="flex gap-2 flex-row-reverse">
          <input
            value={input}
            onChange={e => setInput(e.target.value)}
            placeholder="اكتب رسالتك..."
            className="flex-1 border rounded-xl px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-900 text-right"
            disabled={isLoading}
          />
          <button
            type="submit"
            disabled={isLoading || !input.trim()}
            className="px-4 py-2.5 bg-blue-600 text-white rounded-xl text-sm font-medium disabled:opacity-50 hover:bg-blue-700 transition-colors"
          >
            إرسال
          </button>
        </div>
      </form>
    </div>
  );
}

import Chat from '@/components/Chat';
 
export default function Home() {
  return <Chat />;
}

npm run dev

let usage: { total_tokens: number; prompt_tokens: number; completion_tokens: number } | null = null;
 
for await (const chunk of stream) {
  const content = chunk.choices[0]?.delta?.content || '';
  if (content) {
    controller.enqueue(encoder.encode(content));
  }
  if (chunk.usage) {
    usage = chunk.usage;
  }
}
 
if (usage) {
  console.log(
    `الرموز — التوجيه: ${usage.prompt_tokens}, ` +
    `الإكمال: ${usage.completion_tokens}, ` +
    `المجموع: ${usage.total_tokens}`
  );
}

npx vercel

vercel env add TOGETHER_API_KEY