DEV Community

Cover image for الحصول على API مجاني وغير محدود لـ Claude Opus 4.7
Yusuf Khalidd
Yusuf Khalidd

Posted on • Originally published at apidog.com

الحصول على API مجاني وغير محدود لـ Claude Opus 4.7

تُعد عائلة نماذج Claude من Anthropic خيارًا قويًا للبرمجة، الوكلاء (agentic workflows)، والاستدلال طويل السياق، لكن تكلفة API قد تجعل التجارب الجانبية مكلفة بسرعة. باستخدام Puter.js يمكنك استدعاء نماذج Claude مثل Opus 4.7 وSonnet 4.6 وHaiku 4.5 من المتصفح بدون مفتاح Anthropic، حيث يتحمل المستخدم النهائي الاستهلاك عبر حساب Puter بدلًا من المطور.

جرّب Apidog اليوم

هذا الدليل يوضح طريقة التنفيذ عمليًا: التثبيت، اختيار النموذج، أول استدعاء، البث، المحادثات متعددة الأدوار، وكيفية مقارنة Puter مع Anthropic API الرسمية قبل الانتقال للإنتاج.

خلاصة القول

  • Puter.js يتيح استدعاء Claude من المتصفح بدون مفتاح Anthropic API.
  • المستخدم النهائي يستخدم حساب Puter الخاص به، لذلك لا تتحمل أنت فاتورة Anthropic.
  • النماذج المدعومة تشمل: Opus 4.7, Opus 4.6, Opus 4.6 Fast, Opus 4.5, Opus 4.1, Opus 4, Sonnet 4.6, Sonnet 4.5, Sonnet 4, Haiku 4.5.
  • تحتاج فقط إلى وسم <script> واستدعاء puter.ai.chat.
  • يدعم Puter المحادثات، المطالبات النظامية، والبث.
  • يمكنك استخدام Apidog لمقارنة نفس المطالبة بين Puter وAnthropic API الرسمية.

كيف يعمل النموذج بدون مفتاح API؟

Puter.js مكتبة تعمل من المتصفح. بدلًا من تخزين مفتاح Anthropic في تطبيقك أو خادمك، يسجّل المستخدم الدخول إلى Puter، ثم تُنفّذ الطلبات باستخدام حسابه.

هذا يعني عمليًا:

  • لا يوجد مفتاح API في الكود: لا أسرار، لا تدوير مفاتيح، ولا خطر تسريب.
  • لا توجد فاتورة Anthropic عليك: كل مستخدم يرتبط بحسابه الخاص.
  • لا تحتاج خادمًا وسيطًا: مناسب للمواقع الثابتة، النماذج الأولية، والهاكاثونات.

القيد الرئيسي: Puter مناسب أولًا لتطبيقات المتصفح. إذا كنت تحتاج بوت خلفي، وظيفة Cron، أو معالجة دفعية Server-side، فغالبًا ستحتاج Anthropic API الرسمية.

الخطوة 1: أضف Puter.js

في أبسط حالة، أضف السكريبت التالي إلى صفحة HTML:

<script src="https://js.puter.com/v2/"></script>
Enter fullscreen mode Exit fullscreen mode

مثال صفحة كاملة:

<!DOCTYPE html>
<html lang="ar">
<body>
  <script src="https://js.puter.com/v2/"></script>
  <script>
    async function main() {
      const response = await puter.ai.chat(
        "اشرح مفهوم REST API باختصار",
        { model: "claude-sonnet-4-6" }
      );

      puter.print(response.message.content[0].text);
    }

    main();
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

إذا كنت تستخدم Vite أو Webpack أو مشروعًا يعتمد على NPM:

npm install @heyputer/puter.js
Enter fullscreen mode Exit fullscreen mode 
import { puter } from "@heyputer/puter.js";
Enter fullscreen mode Exit fullscreen mode

استخدم CDN للنماذج الأولية السريعة، واستخدم NPM عندما تحتاج دمجًا داخل تطبيق Frontend منظم.

الخطوة 2: اختر نموذج Claude المناسب

يعتمد اختيار النموذج على نوع المهمة. استخدم الجدول التالي كبداية:

معرف النموذج متى تستخدمه؟
claude-opus-4-7 للاستدلال العميق، مراجعة الكود المعقدة، والمهام الوكالية متعددة الخطوات
claude-opus-4-6 مهام برمجية قوية مع جودة عالية
claude-opus-4.6-fast عندما تحتاج Opus بزمن استجابة أقل
claude-opus-4-5 خيار مستقر للوكلاء وتطبيقات الإنتاج
claude-opus-4-1 نموذج أقدم بسلوك مستقر ومفهوم
claude-opus-4 الإصدار الأساسي من Opus 4
claude-sonnet-4-6 الخيار الافتراضي لمعظم التطبيقات اليومية
claude-sonnet-4-5 خيار جيد وأرخص نسبيًا لمعظم المهام
claude-sonnet-4 الإصدار الأساسي من Sonnet 4
claude-haiku-4-5 للتصنيف السريع والمهام كبيرة الحجم منخفضة التعقيد

قاعدة عملية:

  • استخدم claude-sonnet-4-6 كافتراضي.
  • استخدم claude-haiku-4-5 للتصنيف السريع أو الردود القصيرة.
  • استخدم claude-opus-4-7 عندما تكون جودة الاستدلال أهم من السرعة.

الخطوة 3: نفّذ أول استدعاء إلى Claude

أبسط استدعاء:

<!DOCTYPE html>
<html>
<body>
  <script src="https://js.puter.com/v2/"></script>
  <script>
    puter.ai.chat(
      "Explain quantum computing in simple terms",
      { model: "claude-sonnet-4-6" }
    ).then(response => {
      puter.print(response.message.content[0].text);
    });
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

شكل الاستجابة يشبه Anthropic Messages API:

response.message.content[0].text
Enter fullscreen mode Exit fullscreen mode

إذا كانت الاستجابة تحتوي على أكثر من جزء، يمكنك المرور على كل الكتل:

for (const block of response.message.content) {
  if (block.type === "text") {
    console.log(block.text);
  }
}
Enter fullscreen mode Exit fullscreen mode

الخطوة 4: فعّل البث Streaming

لتحسين تجربة المستخدم في الردود الطويلة، استخدم stream: true:

const response = await puter.ai.chat(
  "اكتب شرحًا مفصلًا عن تأثير الذكاء الاصطناعي على تطوير البرمجيات",
  {
    model: "claude-sonnet-4-6",
    stream: true
  }
);

for await (const part of response) {
  puter.print(part?.text);
}
Enter fullscreen mode Exit fullscreen mode

في واجهة دردشة، ألحق كل جزء بفقاعة الرسالة:

const output = document.querySelector("#output");

for await (const part of response) {
  if (part?.text) {
    output.textContent += part.text;
  }
}
Enter fullscreen mode Exit fullscreen mode

الخطوة 5: استخدم محادثات متعددة الأدوار

بدلًا من إرسال نص واحد، أرسل مصفوفة رسائل:

const messages = [
  {
    role: "user",
    content: "أبني تطبيق Next.js يستخدم PostgreSQL."
  },
  {
    role: "assistant",
    content: "تمام. ما الجزء الذي تحتاج مساعدة فيه؟"
  },
  {
    role: "user",
    content: "كيف أنظم مجلد migrations؟"
  }
];

const response = await puter.ai.chat(messages, {
  model: "claude-opus-4-7"
});

console.log(response.message.content[0].text);
Enter fullscreen mode Exit fullscreen mode

للحفاظ على سياق المحادثة، خزّن الرسائل في مصفوفة واحدة وأضف كل رسالة جديدة إليها:

const messages = [];

async function sendMessage(userText) {
  messages.push({ role: "user", content: userText });

  const response = await puter.ai.chat(messages, {
    model: "claude-sonnet-4-6"
  });

  const assistantText = response.message.content[0].text;

  messages.push({
    role: "assistant",
    content: assistantText
  });

  return assistantText;
}
Enter fullscreen mode Exit fullscreen mode

الخطوة 6: أضف مطالبة نظامية

استخدم رسالة system لتحديد الدور، التنسيق، والقيود:

const messages = [
  {
    role: "system",
    content: "أنت مهندس Backend خبير. أجب بنقاط مرقمة ولا تتجاوز خمس نقاط."
  },
  {
    role: "user",
    content: "كيف أمنع SQL Injection في تطبيق Node.js؟"
  }
];

const response = await puter.ai.chat(messages, {
  model: "claude-sonnet-4-6"
});

console.log(response.message.content[0].text);
Enter fullscreen mode Exit fullscreen mode

استخدم المطالبة النظامية لتحديد:

  • أسلوب الرد
  • اللغة
  • طول الإجابة
  • صيغة الإخراج مثل JSON أو Markdown
  • قواعد الأمان والسلوك

مثال لإخراج JSON:

const messages = [
  {
    role: "system",
    content: "أرجع الإجابة بصيغة JSON فقط بدون Markdown."
  },
  {
    role: "user",
    content: "استخرج اسم المنتج والسعر من النص: iPhone بسعر 999 دولار"
  }
];

const response = await puter.ai.chat(messages, {
  model: "claude-sonnet-4-6"
});
Enter fullscreen mode Exit fullscreen mode

مقارنة النماذج على نفس المطالبة

لا تختَر النموذج بناءً على الاسم فقط. اختبر نفس المطالبة عبر أكثر من نموذج وقارن الزمن والجودة:

const models = [
  "claude-haiku-4-5",
  "claude-sonnet-4-6",
  "claude-opus-4-7"
];

const prompt = "Refactor this React component to use hooks: ...";

for (const model of models) {
  const start = performance.now();

  const response = await puter.ai.chat(prompt, { model });

  const elapsed = performance.now() - start;

  console.log(`${model}: ${elapsed.toFixed(0)}ms`);
  console.log(response.message.content[0].text);
  console.log("---");
}
Enter fullscreen mode Exit fullscreen mode

النتيجة المتوقعة غالبًا:

  • Haiku أسرع للمهام البسيطة.
  • Sonnet أفضل توازن لمعظم تطبيقات الإنتاج.
  • Opus أفضل للمهام الصعبة والمعقدة.

لمقارنة Puter مع Anthropic API الرسمية داخل نفس سير الاختبار، يمكنك إعداد بيئتين في Apidog والتبديل بينهما عند الحاجة.

ما الذي تحصل عليه عبر Puter؟

تحصل على:

  • وصول إلى نماذج Claude المتاحة عبر Puter.
  • محادثات متعددة الأدوار.
  • مطالبات نظامية.
  • بث الاستجابات.
  • تشغيل من المتصفح بدون خادم وسيط.
  • عدم تخزين مفتاح Anthropic في تطبيقك.

وقد لا تحصل على، حسب دعم Puter الحالي:

  • نفس تحكم Anthropic الرسمي الكامل في الأدوات Function Calling / Tool Use.
  • دعم الرؤية أو مرفقات الصور.
  • تخفيضات prompt caching من Anthropic.
  • تشغيل مباشر من الخادم بدون جلسة مستخدم.
  • رؤية كاملة لرؤوس rate limit الخاصة بـ Anthropic.

إذا كنت تبني تدفقات Tool Use أو MCP معقدة، فقد تحتاج واجهة Anthropic الرسمية أو اختبار خادم MCP عبر Apidog.

متى تستخدم Puter؟ ومتى تستخدم Anthropic API الرسمية؟

استخدم Puter عندما:

  • تبني تطبيقًا يعمل من المتصفح.
  • تريد نموذجًا أوليًا سريعًا بدون إعداد مفاتيح وفوترة.
  • تنشر موقعًا ثابتًا أو مشروع هاكاثون.
  • تريد تجنب تحمل تكلفة استخدام المستخدمين.
  • لا تمانع أن يسجل المستخدم الدخول إلى Puter.

استخدم Anthropic API الرسمية عندما:

  • تحتاج استدعاءات Server-side.
  • لديك وظائف Cron أو معالجة دفعية.
  • تحتاج prompt caching لتقليل التكلفة.
  • تحتاج Tool Use متقدمًا أو Files API أو رؤية.
  • لديك متطلبات امتثال أو تعاقدات محددة.
  • لا تريد أن يمر المستخدم بخطوة تسجيل دخول إلى Puter.

يمكنك البدء بـ Puter ثم الترحيل لاحقًا إلى Anthropic API الرسمية؛ شكل الرسائل قريب بما يكفي لجعل الترحيل مباشرًا نسبيًا.

لمثال مشابه مع GPT، راجع: كيفية استخدام واجهة برمجة تطبيقات GPT-5.5.

اختبار التكامل في Apidog

لأن Puter يعمل من المتصفح، لن تختبره بنفس طريقة اختبار REST API خلفي. النمط العملي:

  1. أنشئ صفحة HTML صغيرة تحتوي على Puter.js.
  2. اجعل الصفحة تقرأ المطالبة من Query String.
  3. اختبر Anthropic API الرسمية في Apidog كمسار بديل للإنتاج.
  4. احتفظ ببيئتين منفصلتين: واحدة للنموذج الأولي وواحدة للإنتاج.

مثال صفحة اختبار بسيطة:

<!DOCTYPE html>
<html>
<body>
  <pre id="output"></pre>

  <script src="https://js.puter.com/v2/"></script>
  <script>
    async function main() {
      const params = new URLSearchParams(location.search);
      const prompt = params.get("prompt") || "قل مرحبًا";

      const response = await puter.ai.chat(prompt, {
        model: "claude-sonnet-4-6"
      });

      document.querySelector("#output").textContent =
        response.message.content[0].text;
    }

    main();
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

ثم افتحها بهذا الشكل:

http://localhost:5173/puter-test.html?prompt=اشرح%20JWT
Enter fullscreen mode Exit fullscreen mode

صورة-28

قم بتنزيل Apidog، ثم أنشئ بيئتين:

  • puter-prototype: عنوان محلي يستضيف صفحة Puter.
  • anthropic-prod: https://api.anthropic.com/v1.

بهذا تستطيع مقارنة السلوك قبل الترحيل من Puter إلى Anthropic API الرسمية.

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

هل هذا غير محدود فعلًا؟

هو غير محدود من جهة المطور لأنك لا تدفع عن كل المستخدمين من حسابك. لكن المستخدم النهائي يعتمد على حساب Puter ورصيده الخاص.

هل أحتاج حساب Anthropic؟

لا. Puter يتولى الاتصال بـ Anthropic نيابة عن المستخدم.

هل يمكن استخدامه في الإنتاج؟

نعم لتطبيقات المتصفح، بشرط أن تكون تجربة تسجيل الدخول إلى Puter مقبولة لمستخدميك.

هل مخرجات Claude عبر Puter مختلفة عن Anthropic API؟

النموذج نفسه، لكن قد تختلف تفاصيل الواجهة أو زمن الاستجابة بسبب وجود طبقة Puter.

هل يدعم prompt caching؟

إذا كنت تحتاج خصائص Anthropic الرسمية مثل prompt caching لتقليل التكلفة، استخدم Anthropic API مباشرة.

هل يصلح لبوت Discord أو خدمة خلفية؟

ليس الخيار الأنسب. Puter مصمم أولًا لتدفقات المتصفح التي تتضمن جلسة مستخدم.

ما النموذج الافتراضي المقترح؟

ابدأ بـ claude-sonnet-4-6. استخدم claude-opus-4-7 للمهام الأصعب، وclaude-haiku-4-5 للمهام السريعة والبسيطة.

خاتمة

Puter.js يمنحك طريقة عملية لتشغيل Claude داخل تطبيقات المتصفح بدون إدارة مفاتيح API أو تحمل تكلفة الاستخدام عن المستخدمين. أضف السكريبت، اختر نموذجًا، أرسل الرسائل، وفعّل البث عند الحاجة.

إذا كان تطبيقك يحتاج خادمًا، وظائف خلفية، Tool Use متقدمًا، أو متطلبات امتثال، فواجهة Anthropic API الرسمية تبقى الخيار الأنسب.

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

Top comments (0)