الانتقال إلى المحتوى الرئيسي

نظرة عامة

تُعد Vercel AI SDK مجموعة أدوات TypeScript لبناء تطبيقات البث (streaming) المدعومة بالذكاء الاصطناعي باستخدام React و Next.js و Vue و Svelte وغيرها. تعمل LemonData بسلاسة من خلال المزود المتوافق مع OpenAI.

التثبيت

npm install ai @ai-sdk/openai

الإعداد الأساسي

import { createOpenAI } from '@ai-sdk/openai';

const lemondata = createOpenAI({
  apiKey: 'sk-your-lemondata-key',
  baseURL: 'https://api.lemondata.cc/v1',
});

توليد النصوص

import { generateText } from 'ai';

const { text } = await generateText({
  model: lemondata('gpt-4o'),
  prompt: 'What is LemonData?',
});

console.log(text);

بث النصوص (Streaming)

import { streamText } from 'ai';

const result = await streamText({
  model: lemondata('gpt-4o'),
  prompt: 'Write a poem about AI.',
});

for await (const textPart of result.textStream) {
  process.stdout.write(textPart);
}

رسائل الدردشة

import { generateText } from 'ai';

const { text } = await generateText({
  model: lemondata('gpt-4o'),
  messages: [
    { role: 'system', content: 'You are a helpful assistant.' },
    { role: 'user', content: 'What is the capital of France?' },
  ],
});

استخدام نماذج مختلفة

// OpenAI GPT-4o
const gpt4Response = await generateText({
  model: lemondata('gpt-4o'),
  prompt: 'Hello!',
});

// Anthropic Claude
const claudeResponse = await generateText({
  model: lemondata('claude-sonnet-4-5'),
  prompt: 'Hello!',
});

// Google Gemini
const geminiResponse = await generateText({
  model: lemondata('gemini-2.5-flash'),
  prompt: 'Hello!',
});

// DeepSeek
const deepseekResponse = await generateText({
  model: lemondata('deepseek-r1'),
  prompt: 'Hello!',
});

مسار API في Next.js

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

const lemondata = createOpenAI({
  apiKey: process.env.LEMONDATA_API_KEY,
  baseURL: 'https://api.lemondata.cc/v1',
});

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

  const result = streamText({
    model: lemondata('gpt-4o'),
    messages,
  });

  return result.toDataStreamResponse();
}

مكون الدردشة في React

'use client';

import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    api: '/api/chat',
  });

  return (
    <div>
      {messages.map((m) => (
        <div key={m.id}>
          {m.role}: {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button type="submit">Send</button>
      </form>
    </div>
  );
}

استدعاء الأدوات (Tool Calling)

import { generateText, tool } from 'ai';
import { z } from 'zod';

const { text, toolCalls } = await generateText({
  model: lemondata('gpt-4o'),
  tools: {
    weather: tool({
      description: 'Get the weather in a location',
      parameters: z.object({
        location: z.string().describe('The location to get weather for'),
      }),
      execute: async ({ location }) => {
        return { temperature: 72, condition: 'sunny' };
      },
    }),
  },
  prompt: 'What is the weather in San Francisco?',
});

المخرجات المهيكلة (Structured Output)

import { generateObject } from 'ai';
import { z } from 'zod';

const { object } = await generateObject({
  model: lemondata('gpt-4o'),
  schema: z.object({
    name: z.string(),
    age: z.number(),
    email: z.string().email(),
  }),
  prompt: 'Generate a fake user profile.',
});

console.log(object);

متغيرات البيئة

# .env.local
LEMONDATA_API_KEY=sk-your-lemondata-key
const lemondata = createOpenAI({
  apiKey: process.env.LEMONDATA_API_KEY,
  baseURL: 'https://api.lemondata.cc/v1',
});

أفضل الممارسات

استخدم البث دائمًا لتطبيقات الدردشة لتقديم استجابة فورية في الوقت الفعلي.
قم بتنفيذ حدود الأخطاء (error boundaries) المناسبة في مكونات React.
لا تقم أبدًا بالكشف عن مفتاح API الخاص بك في كود جانب العميل. استخدم دائمًا مسارات API من جانب الخادم.