Vercel AI SDK 5: محادثة آمنة الأنواع، البث والحلقات الوكيلة مع Next.js

npm install ai @ai-sdk/openai

npm list ai

OPENAI_API_KEY=sk-...

import { openai } from '@ai-sdk/openai';
import {
  convertToModelMessages,
  streamText,
  UIMessage,
  tool,
  stepCountIs,
} from 'ai';
import { z } from 'zod';
 
export const maxDuration = 30;
 
export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();
 
  const result = streamText({
    model: openai('gpt-4o'),
    system: 'أنت مساعد مفيد. استخدم الأدوات عند الاقتضاء.',
    messages: convertToModelMessages(messages),
    stopWhen: stepCountIs(5),
    tools: {
      getWeather: tool({
        description: 'احصل على الطقس الحالي لمدينة ما',
        inputSchema: z.object({
          city: z.string().describe('اسم المدينة'),
        }),
        execute: async ({ city }) => {
          // استبدل هذا باستدعاء API طقس حقيقي في الإنتاج
          return { city, temperature: 22, condition: 'مشمس' };
        },
      }),
    },
    onFinish: async ({ messages: finalMessages }) => {
      // احفظ المحادثة هنا — finalMessages هو UIMessage[]
      console.log('اكتملت المحادثة:', finalMessages.length, 'رسائل');
    },
  });
 
  return result.toUIMessageStreamResponse();
}

'use client';
 
import { useChat } from '@ai-sdk/react';
import { useState } from 'react';
 
export default function ChatPage() {
  const [input, setInput] = useState('');
  const { messages, sendMessage, status } = useChat();
 
  return (
    <div className="flex flex-col max-w-2xl mx-auto h-screen p-4">
      <div className="flex-1 overflow-y-auto space-y-4 py-4">
        {messages.map(message => (
          <div key={message.id} className="space-y-1">
            <strong className="capitalize text-sm text-gray-500">
              {message.role === 'user' ? 'أنت' : 'المساعد'}
            </strong>
            <div>
              {message.parts.map((part, i) => {
                if (part.type === 'text') {
                  return <p key={i} className="text-gray-800">{part.text}</p>;
                }
                if (part.type === 'tool-getWeather') {
                  return (
                    <div key={i} className="bg-blue-50 border border-blue-200 rounded p-3 text-sm">
                      <span className="font-medium">الطقس في {part.result.city}:</span>{' '}
                      {part.result.temperature}°م، {part.result.condition}
                    </div>
                  );
                }
                return null;
              })}
            </div>
          </div>
        ))}
        {status === 'streaming' && (
          <div className="text-gray-400 text-sm italic">جارٍ التفكير...</div>
        )}
      </div>
 
      <form
        onSubmit={e => {
          e.preventDefault();
          sendMessage({ text: input });
          setInput('');
        }}
        className="flex gap-2 pt-4 border-t"
      >
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          placeholder="اسأل عن الطقس في أي مدينة..."
          className="flex-1 border rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
          disabled={status === 'streaming'}
        />
        <button
          type="submit"
          disabled={status === 'streaming'}
          className="px-4 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50 hover:bg-blue-700"
        >
          إرسال
        </button>
      </form>
    </div>
  );
}

import { stepCountIs, toolCalls, textIncludes } from 'ai';
 
const result = streamText({
  model: openai('gpt-4o'),
  messages: convertToModelMessages(messages),
  stopWhen: [
    stepCountIs(10),                // حد أقصى صارم: التوقف بعد 10 خطوات
    toolCalls('submitFinalAnswer'), // التوقف عند إشارة النموذج بالانتهاء
    textIncludes('TASK_COMPLETE'),  // التوقف على سلسلة محددة في المخرجات
  ],
  tools: { /* ... */ },
});

const result = streamText({
  model: openai('gpt-4o'),
  messages: convertToModelMessages(messages),
  prepareStep: async ({ stepNumber, messages }) => {
    // أجبر الخطوة الأولى على استدعاء أداة الطقس فورًا
    if (stepNumber === 0) {
      return {
        toolChoice: { type: 'tool', toolName: 'getWeather' },
        activeTools: ['getWeather'],
      };
    }
 
    // اختصر السجل للوكلاء طويلي الأمد للتحكم في تكاليف الرموز
    if (messages.length > 20) {
      return { messages: messages.slice(-10) };
    }
 
    // إعادة كائن فارغ يستخدم الإعدادات الافتراضية لهذه الخطوة
    return {};
  },
  tools: { /* ... */ },
});

import { InferUITools, ToolSet, UIMessage, tool } from 'ai';
import { z } from 'zod';
 
// 1. البيانات الوصفية المُلحقة بكل رسالة
const metadataSchema = z.object({
  model: z.string(),
  latencyMs: z.number().optional(),
  tokensUsed: z.number().optional(),
});
export type MessageMetadata = z.infer<typeof metadataSchema>;
 
// 2. أجزاء البيانات المخصصة المُرسَلة في منتصف الرد
const dataPartSchema = z.object({
  weatherCard: z.object({
    city: z.string(),
    temperature: z.number(),
    condition: z.string(),
  }),
});
export type MessageDataPart = z.infer<typeof dataPartSchema>;
 
// 3. تعريفات الأدوات المشتركة — استوردها في مسار API الخاص بك أيضًا
export const appTools: ToolSet = {
  getWeather: tool({
    description: 'احصل على الطقس الحالي لمدينة ما',
    inputSchema: z.object({ city: z.string() }),
    execute: async ({ city }) => ({
      city,
      temperature: 22,
      condition: 'مشمس',
    }),
  }),
};
 
// 4. استنتاج أنواع نتائج الأدوات تلقائيًا
type AppTools = InferUITools<typeof appTools>;
 
// 5. رسالتك المُحدَّدة الأنواع بالكامل — استخدمها في كل مكان
export type AppUIMessage = UIMessage<MessageMetadata, MessageDataPart, AppTools>;

// مسار API — جسم الطلب محدد الأنواع
const { messages }: { messages: AppUIMessage[] } = await req.json();
 
// مكوّن العميل — Hook محدد الأنواع
const { messages } = useChat<AppUIMessage>();
 
// الآن يعرف TypeScript:
// message.metadata.model         → string
// message.metadata.latencyMs     → number | undefined
// part.type === 'tool-getWeather' → part.result.city سلسلة نصية

import { generateSpeech } from 'ai';
import { openai } from '@ai-sdk/openai';
 
export async function POST(req: Request) {
  const { text } = await req.json();
 
  const { audio } = await generateSpeech({
    model: openai.speech('tts-1-hd'),
    text,
    voice: 'nova',
  });
 
  return new Response(audio.uint8Array, {
    headers: {
      'Content-Type': 'audio/mpeg',
      'Cache-Control': 'no-store',
    },
  });
}

async function speakMessage(text: string) {
  const response = await fetch('/api/speech', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text }),
  });
  const audioBlob = await response.blob();
  const audioUrl = URL.createObjectURL(audioBlob);
  new Audio(audioUrl).play();
}

npm run dev