بث استجابات Anthropic باستخدام LLM Resayil في Next.js

البث (Streaming) هو تقنية تقوم بتسليم الرموز (Tokens) المُنشأة من نموذج لغوي كبير (LLM) إلى العميل فور إنتاجها، بدلاً من الانتظار حتى اكتمال الإجابة بالكامل. في تطبيقات الدردشة في الوقت الفعلي، هذا يعني أن المستخدم يرى إجابة المساعد تظهر كلمة بكلمة، مما يخلق تجربة أكثر تفاعلية بكثير. بالنسبة للمطورين الذين يبنون واجهة دردشة Next.js، يلغي البث التأخير الملحوظ الذي يمكن أن يجعل المحادثة تبدو آلية.

مقدمة حول بث استجابات Anthropic باستخدام LLM Resayil

يعمل LLM Resayil (https://llm.resayil.io) كبوابة متوافقة مع Anthropic تقع فوق كتالوج من 39 نموذجًا. نظرًا لأنه ينفذ نفس عقد /v1/messages الذي تستخدمه واجهة Anthropic API، يمكنك تغيير عنوان URL لنقطة النهاية والاستمرار في استخدام SDK الرسمي لـ Anthropic دون تغييرات في الكود. تدعم البوابة أيضًا البث، واستدعاء الدوال، واستخدام الأدوات، ويتم فرض الفواتير جميعها على نموذج ائتمان بسيط للدفع مقابل الاستخدام. الاستضافة في الولايات المتحدة الأمريكية (USA)، ويتم قبول المدفوعات عبر Stripe أو PayPal بعملة USD. ي_walkك لك هذا المقال كل ما تحتاجه لبث استجابات على غرار Anthropic من LLM Resayil في مشروع Next.js.

مقارنة سريعة

| الميزة | LLM Resayil | واجهة Anthropic API المباشرة | |---|---|---| | توافق OpenAI | ✅ | ❌ | | توافق Anthropic | ✅ | ✅ | | استجابات البث | ✅ | ✅ | | استدعاء الدوال | ✅ | ✅ | | استخدام الأدوات | ✅ | ✅ | | اعتمادات الدفع مقابل الاستخدام | ✅ (USD) | ✅ (USD) | | حزم SDK المتكاملة | OpenAI SDK, Anthropic SDK, Python, JavaScript, cURL, LangChain, LiteLLM, n8n | Anthropic SDK, OpenAI SDK | | موقع الاستضافة | USA | مناطق US (تختلف) | | طرق الدفع | Stripe, PayPal | Stripe |

ما يقدمه LLM Resayil

يقدم LLM Resayil واجهة برمجة تطبيقات متوافقة مع Anthropic تتضمن جميع الميزات الحديثة التي يتوقعها المطورون: تسليم الرموز عبر البث، واستدعاء الدوال، واستخدام الأدوات. نظرًا لأن الخدمة أيضًا متوافقة مع OpenAI، يمكنك إعادة استخدام كود SDK الخاص بـ OpenAI الحالي عند الحاجة إلى تبديل المزودين. تدعم المنصة إنشاء متعدد اللغات، مع تركيز خاص على دعم اللغة العربية، مما يجعلها خيارًا متعدد الاستخدامات للتطبيقات العالمية.

يتم الوصول إلى جميع النماذج من خلال مجموعة نقاط نهاية واحدة (/v1/chat/completions, /v1/messages, إلخ)، ويعني نموذج تسعير الدفع مقابل الاستخدام أنك تدفع فقط مقابل الرموز التي تقوم بإنشائها فعليًا. يتم التعامل مع الفواتير بعملة USD عبر Stripe أو PayPal، وتتم استضافة الخدمة في الولايات المتحدة الأمريكية لضمان زمن وصول منخفض للمستخدمين في أمريكا الشمالية. تجعل التكاملات مع أدوات المطورين الشائعة مثل LangChain وLiteLLM وn8n وحزم SDK القياسية من السهل تضمين LLM Resayil في أي مكدس تقني.

إعداد LLM Resayil في مشروع Next.js

إنشاء تطبيق Next.js (إذا لم يكن لديك واحد بالفعل):
```
npx create-next-app@latest my‑chat‑app
cd my‑chat‑app
```
تثبيت Anthropic SDK (يعمل SDK لأن LLM Resayil يتبع نفس العقد). يمكنك أيضًا استخدام OpenAI SDK العام، لكن Anthropic SDK يمنحك مساعدات بث مدمجة.
```
npm install @anthropic-ai/sdk
```
أضف مفتاح API الخاص بـ LLM Resayil إلى ملف .env.local. تتوقع البوابة ترويسة ANTHROPIC_API_KEY القياسية.
```
ANTHROPIC_API_KEY=sk‑your‑resayil‑key‑here
RESAYIL_BASE_URL=https://llm.resayil.io
```

أنشئ غلافًا رفيعًا يشير إلى SDK على عنوان URL الأساسي لـ Resayil. يسمح لك Anthropic SDK بتجاوز عنوان URL الأساسي عبر خيار baseURL.

// lib/resayilClient.js
import Anthropic from "@anthropic-ai/sdk";

const client = new Anthropic({
  apiKey: process.env.ANTHROPIC_API_KEY,
  baseURL: process.env.RESAYIL_BASE_URL, // يشير إلى LLM Resayil
});

export default client;

اختبر الاتصال بطلب بسيط في مسار API الخاص بـ Next.js.

// pages/api/health.js
import client from "../../lib/resayilClient";

export default async function handler(req, res) {
  try {
    const health = await fetch(`${process.env.RESAYIL_BASE_URL}/v1/health`);
    const data = await health.json();
    res.status(200).json(data);
  } catch (e) {
    res.status(500).json({ error: e.message });
  }
}

يجب أن تؤدي زيارة /api/health إلى إرجاع حمولة JSON تؤكد أن الخدمة تعمل.

مع هذه الخطوات، أصبح لديك عميل موثق بالكامل ومتوافق مع Anthropic جاهز لبث الاستجابات.

استخدام نقطة النهاية `/v1/messages` للبث

تُعد نقطة النهاية /v1/messages المتوافقة مع Anthropic نقطة الدخول المفضلة لتفاعلات نمط الدردشة. لاستلام تدفق رموز مباشر، قم بتعيين العلم stream إلى true في جسم الطلب. فيما يلي مثال كامل باستخدام طريقة messages.create الخاصة بـ Anthropic SDK.

// lib/streamChat.js
import client from "./resayilClient";

export async function streamChat(messages, onToken) {
  const response = await client.messages.create({
    model: "deepseek-v4-flash", // أي slug من الكتالوج يعمل
    max_tokens: 1024,
    stream: true,
    messages,
  });

  // يعيد SDK مكررًا غير متزامن عندما يكون stream:true
  for await (const chunk of response) {
    // تحتوي كل قطعة على دلتا جزئية لمخرج المساعد
    if (chunk.type === "content_block_delta") {
      const token = chunk.delta?.text ?? "";
      onToken(token);
    }
  }
}

إذا كنت تفضل استدعاء fetch على مستوى أدنى، يمكن إجراء نفس الطلب باستخدام Web Streams API:

export async function fetchStream(messages, onToken) {
  const resp = await fetch(`${process.env.RESAYIL_BASE_URL}/v1/messages`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-api-key": process.env.ANTHROPIC_API_KEY,
    },
    body: JSON.stringify({
      model: "deepseek-v4-flash",
      max_tokens: 1024,
      stream: true,
      messages,
    }),
  });

  const reader = resp.body.getReader();
  const decoder = new TextDecoder("utf-8");
  let done = false;
  while (!done) {
    const { value, done: streamDone } = await reader.read();
    done = streamDone;
    if (value) {
      const chunk = decoder.decode(value);
      // يبث Anthropic أحداثًا من جانب الخادم (SSE) – كل سطر يبدأ بـ "data:"
      const lines = chunk.split("\n").filter(l => l.startsWith("data:"));
      for (const line of lines) {
        const json = JSON.parse(line.replace(/^data:\s*/, ""));
        if (json.type === "content_block_delta") {
          onToken(json.delta?.text ?? "");
        }
      }
    }
  }
}

يحترم كلا النهجين ميزة البث المدرجة في مجموعة ميزات LLM Resayil وسيقوم بتسليم الرموز إلى العميل بمجرد إنشائها.

التعامل مع استجابات البث في مكونات الخادم ومسارات API في Next.js

الخيار 1 – وكيل البث عبر مسار API

أنشئ مسارًا يعيد توجيه بث LLM Resayil مباشرة إلى المتصفح. يبقي هذا مفتاح API على الخادم ويسمح للعميل بمعالجة الاستجابة كـ ReadableStream عادي.

// pages/api/chat/stream.js
import { fetchStream } from "../../../lib/streamChat"; // استخدام إصدار fetch أعلاه

export const config = {
  runtime: "edge", // يُمكّن البث على دوال Vercel Edge
};

export default async function handler(req) {
  const { messages } = await req.json();

  const { readable, writable } = new TransformStream();
  const writer = writable.getWriter();

  // ابدأ البث من Resayil وقم بتوجيه كل رمز إلى العميل
  fetchStream(messages, (token) => {
    writer.write(new TextEncoder().encode(token));
  }).finally(() => writer.close());

  return new Response(readable, {
    headers: {
      "Content-Type": "text/event-stream",
      "Cache-Control": "no-cache",
      Connection: "keep-alive",
    },
  });
}

يمكن للعميل بعد ذلك استخدام واجهة fetch الأصلية مع ReadableStream لاستهلاك الرموز.

الخيار 2 – البث مباشرة في مكون خادم (Next.js 13+)

يمكن لمكونات خادم Next.js إرجاع ReadableStream يتم عرضه أثناء الطيران. فيما يلي مثال بسيط.

// app/chat/stream.tsx
import { fetchStream } from "@/lib/streamChat";

export default async function ChatStream({ messages }: { messages: any[] }) {
  const { readable, writable } = new TransformStream();
  const writer = writable.getWriter();

  fetchStream(messages, (token) => {
    writer.write(new TextEncoder().encode(token));
  }).finally(() => writer.close());

  return (
    <div>
      <pre>
        {/* يتم استهلاك البث بواسطة المتصفح عند وصوله */}
        {await readable.getReader().read().then((r) => new TextDecoder().decode(r.value))}
      </pre>
    </div>
  );
}

التعامل مع الأخطاء – يجب أن يلتقط كلا النمطين أخطاء الشبكة وي forwarding حمولة خطأ JSON مع حالة HTTP مناسبة. يتم إدارة الضغط الخلفي تلقائيًا بواسطة واجهة TransformStream؛ سيتوقف الكاتب عندما تكون ذاكرة التخزين المؤقت للعميل ممتلئة، مما يمنع انفجار الذاكرة.

دمج البث في واجهة دردشة Next.js

على الواجهة الأمامية، تحافظ عادةً على قائمة رسائل في حالة React وتقوم بإلحاق رموز جديدة عند وصولها. فيما يلي خطاف بسيط يستهلك مسار API للبث الذي تم إنشاؤه أعلاه.

// hooks/useChatStream.ts
import { useState, useCallback } from "react";

export function useChatStream() {
  const [messages, setMessages] = useState<Array<{ role: string; content: string }>>([]);
  const [isLoading, setIsLoading] = useState(false);

  const sendMessage = useCallback(async (userText: string) => {
    setIsLoading(true);
    const userMsg = { role: "user", content: userText };
    setMessages((prev) => [...prev, userMsg]);

    const response = await fetch("/api/chat/stream", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ messages: [...messages, userMsg] }),
    });

    const reader = response.body?.getReader();
    const decoder = new TextDecoder();
    let assistantContent = "";
    while (reader) {
      const { value, done } = await reader.read();
      if (done) break;
      assistantContent += decoder.decode(value);
      // تحديث واجهة المستخدم بالمحتوى الجزئي
      setMessages((prev) => {
        const last = prev[prev.length - 1];
        if (last?.role === "assistant") {
          // استبدال آخر رسالة مساعد بالمحتوى المحدث
          return [...prev.slice(0, -1), { role: "assistant", content: assistantContent }];
        }
        return [...prev, { role: "assistant", content: assistantContent }];
      });
    }
    setIsLoading(false);
  }, [messages]);

  return { messages, sendMessage, isLoading };
}

في مكون، يمكنك عرض قائمة الرسائل واستدعاء sendMessage عند إرسال النموذج. نظرًا لأن واجهة المستخدم يتم تحديثها بعد كل رمز، يرى المستخدمون تأثير كتابة يبدو طبيعيًا.

سيناريوهات متقدمة – استدعاء الدوال واستخدام الأدوات

يدعم LLM Resayil استدعاء الدوال واستخدام الأدوات أثناء البث. عند تضمين مصفوفة tools في حمولة الطلب، يمكن للنموذج إصدار دلتا tool_use في نفس البث. يمكن لمنطق العميل الخاص بك مراقبة قطع type: "tool_use"، واستدعاء دالة جانب الخادم المقابلة، وإعادة التغذية بالنتيجة إلى المحادثة. هذا يُمكّن أنماطًا قوية مثل البحث عن البيانات في الوقت الفعلي، أو تنفيذ الكود، أو إنشاء الصور دون كسر تدفق البث.

اعتبارات التسعير والفواتير لاستخدام البث

يتبع LLM Resayيل نموذج اعتمادات الدفع مقابل الاستخدام مفوتر بعملة USD. يمكنك شراء الاعتمادات عبر Stripe أو PayPal؛ لا توجد رسوم اشتراك خفية. لا يضيف البث تكلفة إضافية – يتم فرض الرسوم عليك فقط مقابل الرموز التي يتم إنشاؤها، سواء تم إرسالها في استجابة واحدة أو بثها رمزًا تلو الآخر.

جرّب واجهة LLM Resayil البرمجية

ابدأ مجاناً

لمعرفة الأسعار الحالية، اتصل بنقطة النهاية /v1/pricing أو قم بزيارة صفحة الأسعار. تعيد نقطة النهاية كائن JSON يحتوي على تسعير لكل 1000 رمز لكل نموذج. نظرًا لأنه يتم استخدام نفس عدد الرموز لاستدعاءات البث وغير البث، يمكنك التنبؤ بالتكاليف بدقة.

استكشاف أخطاء البث الشائعة وإصلاحها

| العرض | السبب المحتمل | الإصلاح | |---|---|---| | يتوقف البث بعد بضعة رموز | مهلة الشبكة أو حد من جانب الخادم | زيادة المهلة على العميل (fetch signal) والتأكد من أن max_tokens للنموذج عالية بما يكفي. | | لا تصل رموز، فقط خطأ 401 | مفتاح API غير صالح أو مفقود | تحقق من ANTHROPIC_API_KEY في .env.local وأن المفتاح ينتمي إلى حساب Resayil الخاص بك. | | جسم استجابة فارغ | توقف الخدمة | اتصل بـ /v1/health لتأكيد أن البوابة تعمل. إذا عاد غير صحي، انتظر أو اتصل بالدعم. | | أخطاء تحليل JSON جزئية | معالجة غير صحيحة لسطور SSE | تأكد من أنك تقسم على \n وتقوم بتصفية الأسطر التي تبدأ بـ data: قبل JSON.parse. |

بالنسبة للمشاكل المستمرة، تحقق من نقطة النهاية الصحة وراجع وثائق Resayil. قم بتنفيذ محاولات إعادة ارتباط أسية للأعطال الشبكية العابرة.

الأسئلة الشائعة

س: كيف أقوم بتمكين البث عند استدعاء نقطة النهاية /v1/messages المتوافقة مع Anthropic على LLM Resayil؟

ج: قم بتعيين المعامل stream إلى true في جسم الطلب. ستكون الاستجابة عبارة عن بث أحداث من جانب الخادم (SSE) يسلم دلتا الرموز أثناء إنشائها.

س: هل يمكنني استخدام SDK الرسمي لـ Anthropic مع LLM Resayil للبث؟

ج: نعم. LLM Resayil متوافق مع Anthropic، لذا تحتاج فقط إلى تغيير عنوان URL الأساسي لـ SDK إلى https://llm.resayil.io. تعمل جميع طرق البث التي يوفرها Anthropic SDK دون تغيير.

س: هل يدعم LLM Resayil البث مع استدعاء الدوال أو استخدام الأدوات؟

ج: بالتأكيد. كل من استدعاء الدوال واستخدام الأدوات من الميزات المدعومة، وتعمل بسلاسة مع استجابات البث. ستتلقى دلتا tool_use في نفس بث SSE.

س: كيف أتعامل مع استجابات البث في مسارات API في Next.js؟

ج: استخدم معالج مسار ينشئ TransformStream، ويقوم بتوجيه قطع الرموز من LLM Resayil إلى الجانب القابل للكتابة، ويعيد الجانب القابل للقراءة كاستجابة HTTP. هذا يقوم بوكالة البث المباشر إلى العميل مع الحفاظ على أمان مفتاح API الخاص بك.

س: ما هي طرق الدفع المقبولة لاستخدام البث على LLM Resayil؟

ج: تتم معالجة المدفوعات عبر Stripe أو PayPal. الفواتير بعملة USD وتتبع نموذج اعتمادات بسيط للدفع مقابل الاستخدام.

لماذا يفوز LLM Resayil لدردشات Next.js في الوقت الفعلي

عند بناء تطبيق دردشة في الوقت الفعلي، تحتاج إلى ثلاثة أشياء: بث منخفض الكمون، وSDK مألوف، وتسعير يمكن التنبؤ به. يمنحك LLM Resayil كل هذا بينما يضيف أيضًا توافق OpenAI، ودعم اللغة العربية، وكتالوج واسع من 39 نموذجًا. نظرًا لأن البوابة مستضافة في الولايات المتحدة الأمريكية وتتكامل مع Stripe وPayPal، يواجه المطورون في أمريكا الشمالية مسارات شبكة سريعة وفواتير مباشرة. تعني القدرة على استخدام SDK الرسمي لـ Anthropic أنه يمكنك اعتماد البث مع الحد الأدنى من تغييرات الكود، ويسمح لك الدعم المدمج لاستدعاء الدوال واستخدام الأدوات بتنمية قدرات الدردشة بمرور الوقت.

ما تحصل عليه باستخدام LLM Resayil

بث متوافق مع Anthropic – شكل طلب مطابق للواجهة الرسمية.
اعتمادات الدفع مقابل الاستخدام بعملة USD، مفوترة عبر Stripe أو PayPal.
دعم SDK كامل – Anthropic، OpenAI، Python، JavaScript، cURL، بالإضافة إلى تكاملات مثل LangChain وLiteLLM.
إنشاء متعدد اللغات مع تركيز خاص على العربية. كل هذا يتم تسليمه من خدمة مستضافة في الولايات المتحدة الأمريكية تضمن الموثوقية وزمن الوصول المنخفض.

مثال كود: بث دردشة مع `deepseek-v4-flash`

import client from "./lib/resayilClient"; // Anthropic SDK تم تكوينه لـ Resayil

async function chatStream() {
  const messages = [{ role: "user", content: "Explain quantum entanglement in simple terms." }];
  const response = await client.messages.create({
    model: "deepseek-v4-flash", // slug الكتالوج
    max_tokens: 1024,
    stream: true,
    messages,
  });

  for await (const chunk of response) {
    if (chunk.type === "content_block_delta") {
      process.stdout.write(chunk.delta?.text ?? "");
    }
  }
}

chatStream();

تشغيل هذا البرنامج النصي يطبع إجابة المساعد رمزًا تلو الآخر، مما يوضح قدرة البث المباشر.

دعوة للعمل

هل أنت مستعد لإضافة استجابات LLM في الوقت الفعلي إلى تطبيق Next.js الخاص بك؟ سجل للحصول على مفتاح API، تحقق من صفحة الأسعار لمعرفة معدلات الاعتمادات، وغوص في الوثائق للحصول على أدلة التكامل الكاملة. ابدأ في بناء تجارب دردشة أكثر ذكاءً وسرعة وتفاعلية اليوم!