أنشئ تطبيق دردشة بالذكاء الاصطناعي باستخدام AI SDK وLLM Blueprint

دع Sentra يكتب رمز التكامل نيابةً عنك.
استخدم مساعدنا للذكاء الاصطناعي في VS Code أو Cursor أو Windsurf لإنشاء رمز SDK/API ورمز تكامل LLM Blueprint وwebhooks وغير ذلك، وذلك بمجرد وصف ما تريده.جرّب Sentra: التكامل المدعوم بالذكاء الاصطناعي →

في هذا البرنامج التعليمي، ستنشئ تطبيق دردشة بالذكاء الاصطناعي مع فوترة تلقائية مستندة إلى الاستخدام. سننشئ كل شيء من الصفر: عدّاد الفوترة، وإعداد المنتج، ورمز التطبيق الذي يشغّل المحادثات ويتتبّع استخدام الرموز في الوقت الفعلي.

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

بنهاية هذا البرنامج التعليمي، ستحصل على تطبيق دردشة يعمل ويستطيع:

تشغيل محادثات الذكاء الاصطناعي باستخدام Google Gemini (AI SDK)
تتبّع استخدام الرموز تلقائيًا (من دون رمز يدوي)
فرض رسوم على العملاء بناءً على استهلاكهم الفعلي للرموز
تضمين واجهة دردشة جميلة

ما سنبنيه

لنبدأ بفهم خدمة الدردشة بالذكاء الاصطناعي لدينا:

الخدمة: دردشة مدعومة بالذكاء الاصطناعي باستخدام Google Gemini (AI SDK)
نموذج التسعير: الدفع لكل رمز (0.01$ لكل 1,000 رمز)
الخطة المجانية: 10,000 رمز مجاني لكل عميل شهريًا
الميزات: سجل المحادثات، والتتبّع التلقائي للرموز

قبل أن نبدأ، تأكد من توفر ما يلي لديك:

حساب Dodo Payments
مفتاح Google AI API (احصل على واحد من aistudio)
تثبيت Node.js الإصدار 16 أو أحدث

الخطوة 1: أنشئ عدّاد الاستخدام

سنبدأ بإنشاء عدّاد في لوحة تحكم Dodo Payments يتتبّع استخدام رموز الذكاء الاصطناعي.

ما سنبنيه: عدّاد باسم “AI Token Usage Meter” يجمع جميع الرموز المستهلكة في محادثات الدردشة.

Open the Meters section

سجّل الدخول إلى لوحة تحكم Dodo Payments
انقر على Products في الشريط الجانبي الأيسر
انقر على Meters
انقر على زر Create Meter

ستظهر لك استمارة سنضبط فيها تتبّع الرموز.

Fill in the basic meter information

سنُدخل الآن التفاصيل المحددة لخدمة الدردشة بالذكاء الاصطناعي:اسم العدّاد → AI Token Usage Meterالوصف → Tracks token consumption from AI chat conversations using AI SDKاسم الحدث → ai_chat_usage

يجب أن يطابق اسم الحدث ai_chat_usage تمامًا ما سنرسله من رمز التطبيق لاحقًا. أسماء الأحداث حساسة لحالة الأحرف!

Configure how we count tokens

اضبط التجميع (طريقة عدّ العدّاد لأحداثنا):نوع التجميع: اختر Sum من القائمة المنسدلةالتجميع على أساس: اكتب → totalTokensوحدة القياس: اكتب → tokens

نستخدم “Sum” لأننا نريد جمع جميع الرموز المستهلكة عبر رسائل دردشة متعددة. يرسل SDK تلقائيًا totalTokens في كل حدث.

Create your meter

تحقّق مرة أخرى من أن جميع إعداداتك تطابق القيم أعلاه
انقر على Create Meter

تم إنشاء العدّاد! أصبح “AI Token Usage Meter” جاهزًا لبدء عدّ الرموز. سنربطه بعد ذلك بمنتج فوترة.

الخطوة 2: احصل على مفاتيح API الخاصة بك

قبل إنشاء التطبيق، لنجمع مفاتيح API التي سنحتاج إليها.

Get Dodo Payments API Key

في لوحة تحكم Dodo Payments، انتقل إلى Developers ← API Keys
انقر على Create API Key
انسخ مفتاح API؛ سيبدو بهذا الشكل: test_abc123...

احفظ مفتاح API هذا؛ سنضيفه إلى ملف .env لاحقًا.

Get Google AI API Key

انتقل إلى aistudio.google.com
انقر على Get API Key
أنشئ مفتاح API جديدًا أو استخدم مفتاحًا موجودًا
انسخ المفتاح

احتفظ بهذا المفتاح بأمان؛ سنضيفه أيضًا إلى ملف .env.

الخطوة 3: أنشئ منتج الفوترة

نحتاج الآن إلى إنشاء منتج يحدد أسعارنا (0.01$ لكل 1,000 رمز مع 10,000 رمز مجاني). يربط هذا العدّاد بالفوترة الفعلية.

ما سنبنيه: منتج باسم “AI Chat Service” يفرض رسومًا بناءً على استهلاك الرموز مع طبقة مجانية سخية.

Navigate to Products

في لوحة تحكم Dodo Payments، انقر على Products في الشريط الجانبي الأيسر
انقر على Create Product
اختر Usage-Based نوعًا للمنتج

يُخبر هذا Dodo Payments بأن الفوترة ستعتمد على استخدام العدّاد، وليس على اشتراك ثابت.

Enter product details

أدخل التفاصيل المطلوبة:اسم المنتج: → AI Chat Serviceالوصف: → AI-powered chat service with automatic token-based billingصورة المنتج: ارفع صورة مناسبة

ستظهر هذه البيانات في فواتير العملاء، لذا اجعلها واضحة واحترافية.

Connect your meter

قبل ربط العدّاد، تأكد من اختيار Usage Based Billing كنوع سعر لمنتجك.بالإضافة إلى ذلك، اضبط Fixed Price على 0 لضمان فرض الرسوم على العملاء بناءً على استخدامهم فقط، من دون رسوم أساسية.اربط الآن العدّاد الذي أنشأته للتو:

مرّر لأسفل إلى قسم Associated Meter
انقر على Add Meters
من القائمة المنسدلة، اختر “AI Token Usage Meter” (العدّاد الذي أنشأته سابقًا)
تأكد من ظهوره في إعدادات منتجك

تم الآن ربط العدّاد بهذا المنتج بنجاح.

Set your pricing

هنا نحدد نموذج أعمالنا:السعر لكل وحدة: أدخل → 0.00001 (أي 0.01

لكل 1,000 رمز أو 0.00001

لكل رمز)الحد المجاني: أدخل → 10000 (يحصل العملاء على 10,000 رمز مجاني شهريًا)

آلية عمل الفوترة: إذا استخدم العميل 25,000 رمز خلال شهر، فستُفرض عليه رسوم مقابل 15,000 رمز (25,000 - 10,000 مجانًا) = 15,000 × 0.00001

= 0.15

Save your product

راجع جميع إعداداتك:
- الاسم: AI Chat Service
- العدّاد: AI Token Usage Meter
- السعر: 0.01$ لكل 1,000 رمز
- الطبقة المجانية: 10,000 رمز
انقر على Save Changes

تم إنشاء المنتج! تم الآن إعداد الفوترة. ستُفرض الرسوم على العملاء تلقائيًا بناءً على استخدامهم للرموز.

الخطوة 4: نفّذ عملية شراء اختبارية

قبل أن نبدأ في إنشاء التطبيق، لننشئ عميلًا اختباريًا بإجراء عملية شراء.

Get your payment link

في لوحة تحكم Dodo Payments، انتقل إلى Products
اعثر على منتج “AI Chat Service”
انقر على زر Share بجانب منتجك
انسخ رابط الدفع الذي يظهر

Complete a test purchase

افتح رابط الدفع في علامة تبويب جديدة في المتصفح
أدخل بيانات الدفع الاختبارية وأكمل عملية الشراء

بعد نجاح الدفع، ستحصل على معرّف عميل سنستخدمه في رمز التطبيق.

Find your customer ID

عُد إلى لوحة تحكم Dodo Payments
انتقل إلى Sales -> Customers في الشريط الجانبي الأيسر
اعثر على العميل الذي أنشأته للتو (باستخدام البريد الإلكتروني الاختباري)
انسخ معرّف العميل؛ سيبدو بهذا الشكل: cus_123

احفظ معرّف العميل هذا؛ سنستخدمه عند اختبار تطبيق الدردشة.

الخطوة 5: أنشئ تطبيق الدردشة

اكتمل الآن إعداد الفوترة وأنشأنا عميلًا اختباريًا. لننشئ تطبيق الدردشة بالذكاء الاصطناعي مع التتبّع التلقائي للرموز.

Set up your project

أنشئ مجلدًا جديدًا وتهيئة المشروع:

mkdir ai-chat-app
cd ai-chat-app
npm init -y

Install dependencies

ثبّت الحزم التي نحتاج إليها:

npm install express ai @ai-sdk/google @dodopayments/ingestion-blueprints dotenv
npm install --save-dev typescript @types/express @types/node tsx

Configure TypeScript

أنشئ tsconfig.json:

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

حدّث package.json لإضافة نوع الوحدة والبرامج النصية:

package.json

{
  "type": "module",
  "scripts": {
    "dev": "tsx src/server.ts",
    "build": "tsc",
    "start": "node dist/server.js"
  }
}

Create project structure

أنشئ المجلدات والملفات:

mkdir src public

Set up environment variables

أنشئ ملف .env في جذر مشروعك:

.env

DODO_PAYMENTS_API_KEY=your_dodo_api_key_here
DODO_ENVIRONMENT=test_mode
GOOGLE_GENERATIVE_AI_API_KEY=your_google_api_key_here
PORT=3000

استبدل القيم النائبة بمفاتيح API الفعلية من الخطوة 2.

Create the backend server

أنشئ src/server.ts وانسخ رمز الخادم الكامل هذا:

إليك خادم الدردشة الكامل بالذكاء الاصطناعي مع الفوترة المدمجة:

import express, { Request, Response } from 'express';
import { generateText } from 'ai';
import { google } from '@ai-sdk/google';
import { createLLMTracker } from '@dodopayments/ingestion-blueprints';
import 'dotenv/config';

const app = express();
app.use(express.json());
app.use(express.static('public'));

// Replace with your test customer ID
const CUSTOMER_ID = 'cus_123';

// Create tracker once with your meter event name
const llmTracker = createLLMTracker({
  apiKey: process.env.DODO_PAYMENTS_API_KEY!,
  environment: process.env.DODO_ENVIRONMENT as 'test_mode' | 'live_mode',
  eventName: 'ai_chat_usage', // Must match your meter configuration
});

// Chat endpoint with conversation support
app.post('/chat', async (req: Request, res: Response) => {
  try {
    const { messages } = req.body;

    if (!messages || !Array.isArray(messages)) {
      return res.status(400).json({ 
        error: 'Missing required field: messages (array)' 
      });
    }

    // Wrap AI SDK with automatic token tracking
    const trackedClient = llmTracker.wrap({
      client: { generateText },
      customerId: CUSTOMER_ID
    });

    // Generate AI response - tokens are automatically tracked!
    const response = await trackedClient.generateText({
      model: google('gemini-2.5-flash'),
      messages: messages
    });

    res.json({
      message: response.text,
      usage: {
        totalTokens: response.usage.totalTokens
      }
    });

  } catch (error: any) {
    console.error('Chat error:', error);
    res.status(500).json({ 
      error: 'Failed to process chat',
      details: error.message 
    });
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`🚀 Server running at http://localhost:${PORT}`);
  console.log(`📊 Tracking event: ai_chat_usage`);
  console.log(`👤 Customer ID: ${CUSTOMER_ID}`);
  console.log(`🔧 Environment: ${process.env.DODO_ENVIRONMENT}`);
});

# Add your API keys here
DODO_PAYMENTS_API_KEY=your_dodo_api_key_here
DODO_ENVIRONMENT=test_mode
GOOGLE_GENERATIVE_AI_API_KEY=your_google_api_key_here
PORT=3000

{
  "name": "ai-chat-app",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "tsx src/server.ts",
    "build": "tsc",
    "start": "node dist/server.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "ai": "^3.0.0",
    "@ai-sdk/google": "^0.0.15",
    "@dodopayments/ingestion-blueprints": "latest",
    "dotenv": "^16.0.3"
  },
  "devDependencies": {
    "typescript": "^5.0.0",
    "@types/express": "^4.17.17",
    "@types/node": "^20.0.0",
    "tsx": "^3.12.7"
  }
}

الخطوة 6: أضف واجهة الدردشة

لنضف الآن واجهة دردشة جميلة مع سجل محادثات كامل! أنشئ public/index.html:

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AI Chat with Usage Billing</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, sans-serif;
        background: #0f0f1e;
        background-image: radial-gradient(
            at 0% 0%,
            rgba(102, 126, 234, 0.15) 0px,
            transparent 50%
          ),
          radial-gradient(
            at 100% 100%,
            rgba(118, 75, 162, 0.15) 0px,
            transparent 50%
          ),
          radial-gradient(
            at 50% 50%,
            rgba(102, 126, 234, 0.05) 0px,
            transparent 50%
          );
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        position: relative;
        overflow: hidden;
        margin: 0;
      }

      .chat-container {
        background: rgba(22, 22, 35, 0.95);
        border: 1px solid rgba(102, 126, 234, 0.2);
        border-radius: 0;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        width: 100%;
        max-width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        z-index: 1;
      }

      .chat-header {
        background: linear-gradient(
          135deg,
          rgba(102, 126, 234, 0.15) 0%,
          rgba(118, 75, 162, 0.15) 100%
        );
        border-bottom: 1px solid rgba(102, 126, 234, 0.2);
        color: white;
        padding: 24px 28px;
        position: relative;
        overflow: hidden;
      }

      .chat-header h1 {
        font-size: 26px;
        margin-bottom: 6px;
        font-weight: 700;
        letter-spacing: -0.5px;
        color: #fff;
      }

      .chat-header p {
        font-size: 13px;
        opacity: 0.6;
        font-weight: 500;
        letter-spacing: 0.3px;
      }

      .chat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 32px 10%;
        background: transparent;
        will-change: scroll-position;
        scroll-behavior: smooth;
      }

      .chat-messages::-webkit-scrollbar {
        width: 6px;
      }

      .chat-messages::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.05);
      }

      .chat-messages::-webkit-scrollbar-thumb {
        background: rgba(102, 126, 234, 0.3);
        border-radius: 3px;
      }

      .chat-messages::-webkit-scrollbar-thumb:hover {
        background: rgba(102, 126, 234, 0.5);
      }

      .message {
        margin-bottom: 20px;
        display: flex;
        gap: 12px;
        animation: slideIn 0.2s ease-out;
      }

      @keyframes slideIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .message.user {
        flex-direction: row-reverse;
      }

      .message-avatar {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      }

      .message.user .message-avatar {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }

      .message.assistant .message-avatar {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }

      .message-content {
        max-width: 65%;
      }

      .message-bubble {
        padding: 14px 18px;
        border-radius: 18px;
        line-height: 1.6;
        word-wrap: break-word;
        font-size: 15px;
        position: relative;
      }

      .message.user .message-bubble {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-bottom-right-radius: 6px;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
      }

      .message.assistant .message-bubble {
        background: rgba(255, 255, 255, 0.05);
        color: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom-left-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      }

      .message-meta {
        display: flex;
        gap: 10px;
        margin-top: 8px;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.4);
        font-weight: 500;
      }

      .message.user .message-meta {
        justify-content: flex-end;
      }

      .token-badge {
        background: rgba(102, 126, 234, 0.2);
        color: #a8b9ff;
        padding: 4px 10px;
        border-radius: 12px;
        font-weight: 600;
        border: 1px solid rgba(102, 126, 234, 0.3);
      }

      .chat-input-area {
        padding: 24px 10% 32px;
        background: rgba(22, 22, 35, 0.95);
        border-top: 1px solid rgba(102, 126, 234, 0.2);
      }

      .input-wrapper {
        display: flex;
        gap: 12px;
        align-items: flex-end;
      }

      #messageInput {
        flex: 1;
        background: rgba(255, 255, 255, 0.05);
        border: 2px solid rgba(102, 126, 234, 0.2);
        border-radius: 16px;
        padding: 14px 20px;
        font-size: 15px;
        font-family: inherit;
        resize: none;
        max-height: 120px;
        transition: border-color 0.2s ease, background 0.2s ease;
        color: white;
        will-change: border-color;
        overflow: hidden;
        scrollbar-width: none;
        /* Firefox */
      }

      #messageInput::-webkit-scrollbar {
        display: none;
      }

      #messageInput::placeholder {
        color: rgba(255, 255, 255, 0.3);
      }

      #messageInput:focus {
        outline: none;
        border-color: #667eea;
        background: rgba(255, 255, 255, 0.08);
      }

      #sendBtn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        width: 52px;
        height: 52px;
        border-radius: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        transition: transform 0.1s ease, box-shadow 0.1s ease;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
        position: relative;
      }

      #sendBtn:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
      }

      #sendBtn:active:not(:disabled) {
        transform: translateY(0);
      }

      #sendBtn:disabled {
        opacity: 0.4;
        cursor: not-allowed;
        box-shadow: none;
      }

      .typing-indicator {
        display: none;
        padding: 14px 18px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 18px;
        border-bottom-left-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        width: fit-content;
      }

      .typing-indicator.show {
        display: block;
      }

      .typing-dots {
        display: flex;
        gap: 6px;
      }

      .typing-dots span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #667eea;
        animation: typing 1.4s infinite ease-in-out;
        will-change: transform, opacity;
      }

      .typing-dots span:nth-child(2) {
        animation-delay: 0.2s;
      }

      .typing-dots span:nth-child(3) {
        animation-delay: 0.4s;
      }

      @keyframes typing {
        0%,
        60%,
        100% {
          transform: translateY(0) scale(1);
          opacity: 0.6;
        }

        30% {
          transform: translateY(-12px) scale(1.1);
          opacity: 1;
        }
      }

      .error-message {
        background: rgba(239, 68, 68, 0.15);
        color: #fca5a5;
        padding: 14px 18px;
        border-radius: 12px;
        margin-bottom: 12px;
        display: none;
        border: 1px solid rgba(239, 68, 68, 0.3);
        font-size: 14px;
        font-weight: 500;
      }

      .error-message.show {
        display: block;
        animation: slideIn 0.3s ease;
      }

      .empty-state {
        text-align: center;
        padding: 80px 20px;
        color: rgba(255, 255, 255, 0.5);
      }

      .empty-state-icon {
        font-size: 72px;
        margin-bottom: 20px;
        animation: float 3s ease-in-out infinite;
      }

      @keyframes float {
        0%,
        100% {
          transform: translateY(0px);
        }

        50% {
          transform: translateY(-10px);
        }
      }

      .empty-state h2 {
        font-size: 24px;
        margin-bottom: 10px;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 700;
        letter-spacing: -0.5px;
      }

      .empty-state p {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.4);
        font-weight: 500;
      }
    </style>
  </head>

  <body>
    <div class="chat-container">
      <div class="chat-header">
        <h1>🤖 AI Chat Assistant</h1>
        <p>Powered by AI-SDK & Dodo Payments</p>
      </div>

      <div class="chat-messages" id="chatMessages">
        <div class="empty-state" id="emptyState">
          <div class="empty-state-icon">💬</div>
          <h2>Start a Conversation</h2>
          <p>Ask me anything! Your token usage is automatically tracked.</p>
        </div>
      </div>

      <div class="chat-input-area">
        <div class="error-message" id="errorMessage"></div>
        <div class="input-wrapper">
          <textarea
            id="messageInput"
            placeholder="Type your message here..."
            rows="1"
          ></textarea>
          <button id="sendBtn" onclick="sendMessage()">➤</button>
        </div>
      </div>
    </div>

    <script>
      let conversationHistory = [];

      const messageInput = document.getElementById("messageInput");
      let resizeTimeout;
      messageInput.addEventListener("input", function () {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(() => {
          this.style.height = "auto";
          this.style.height = Math.min(this.scrollHeight, 120) + "px";
        }, 10);
      });

      // Send message on Enter (Shift+Enter for new line)
      messageInput.addEventListener("keydown", function (e) {
        if (e.key === "Enter" && !e.shiftKey) {
          e.preventDefault();
          sendMessage();
        }
      });

      async function sendMessage() {
        const input = document.getElementById("messageInput");
        const message = input.value.trim();

        if (!message) return;

        // Hide empty state
        document.getElementById("emptyState").style.display = "none";

        // Hide error
        document.getElementById("errorMessage").classList.remove("show");

        // Add user message to UI
        addMessage("user", message);

        // Add to conversation history
        conversationHistory.push({
          role: "user",
          content: message,
        });

        // Clear input
        input.value = "";
        input.style.height = "auto";

        // Show typing indicator
        showTypingIndicator();

        // Disable send button
        const sendBtn = document.getElementById("sendBtn");
        sendBtn.disabled = true;

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

          const data = await response.json();

          if (!response.ok) {
            throw new Error(data.error || "Failed to get response");
          }

          // Hide typing indicator
          hideTypingIndicator();

          // Add assistant response to UI
          addMessage("assistant", data.message, data.usage);

          // Add to conversation history
          conversationHistory.push({
            role: "assistant",
            content: data.message,
          });
        } catch (error) {
          hideTypingIndicator();
          showError(error.message);
          // Remove the last user message from history since it failed
          conversationHistory.pop();
        } finally {
          sendBtn.disabled = false;
        }
      }

      function addMessage(role, content, usage = null) {
        const messagesDiv = document.getElementById("chatMessages");

        const messageDiv = document.createElement("div");
        messageDiv.className = `message ${role}`;

        const avatar = role === "user" ? "👤" : "🤖";

        let metaHTML = "";
        if (usage) {
          metaHTML = `
                    <div class="message-meta">
                        <span class="token-badge">📊 ${usage.totalTokens} tokens</span>
                    </div>
                `;
        }

        messageDiv.innerHTML = `
                <div class="message-avatar">${avatar}</div>
                <div class="message-content">
                    <div class="message-bubble">${escapeHtml(content)}</div>
                    ${metaHTML}
                </div>
            `;

        messagesDiv.appendChild(messageDiv);
        requestAnimationFrame(() => {
          messagesDiv.scrollTop = messagesDiv.scrollHeight;
        });
      }

      function showTypingIndicator() {
        const messagesDiv = document.getElementById("chatMessages");

        const typingDiv = document.createElement("div");
        typingDiv.className = "message assistant";
        typingDiv.id = "typingIndicator";
        typingDiv.innerHTML = `
                <div class="message-avatar">🤖</div>
                <div class="typing-indicator show">
                    <div class="typing-dots">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            `;

        messagesDiv.appendChild(typingDiv);
        requestAnimationFrame(() => {
          messagesDiv.scrollTop = messagesDiv.scrollHeight;
        });
      }

      function hideTypingIndicator() {
        const typingIndicator = document.getElementById("typingIndicator");
        if (typingIndicator) {
          typingIndicator.remove();
        }
      }

      function showError(message) {
        const errorDiv = document.getElementById("errorMessage");
        errorDiv.textContent = "❌ " + message;
        errorDiv.classList.add("show");
      }

      function escapeHtml(text) {
        const div = document.createElement("div");
        div.textContent = text;
        return div.innerHTML.replace(/\n/g, "<br>");
      }
    </script>
  </body>
</html>

الخطوة 7: اختبر تطبيق الدردشة

حان وقت اختبار تطبيق الدردشة بالذكاء الاصطناعي ورؤية الفوترة أثناء العمل! لنتأكد من أن كل شيء يعمل من البداية إلى النهاية.

ما نختبره: سنجري بعض المحادثات مع الذكاء الاصطناعي، ونتحقق من وصول أحداث الرموز إلى Dodo Payments، ونتأكد من صحة حسابات الفوترة.

Start the server

أولًا، تأكد من إعداد كل شيء:

تحقّق من أن ملف .env يتضمن جميع مفاتيح API من الخطوة 2
شغّل خادم التطوير:

npm run dev

من المفترض أن ترى:

🚀 Server running at http://localhost:3000
📊 Tracking event: ai_chat_usage
👤 Customer ID: {YOUR CUSTOMER_ID}
🔧 Environment: test_mode

الخادم يعمل! حان وقت الدردشة.

Open the chat interface

افتح متصفحك
انتقل إلى http://localhost:3000
من المفترض أن ترى واجهة الدردشة الجميلة

تأكد من تحديث CUSTOMER_ID في server.ts بمعرّف العميل الاختباري الفعلي من الخطوة 4.

Have your first conversation

لنختبر التطبيق! جرّب هذه الرسائل:

“ما الذكاء الاصطناعي؟”
“كيف يعمل تعلّم الآلة؟”
“هل يمكنك شرح الشبكات العصبية؟”

راقب تحديث عرض استخدام الرموز بعد كل استجابة!

إذا رأيت الذكاء الاصطناعي يستجيب وظهور أعداد الرموز، فهذا يعني أن تطبيقك يعمل!

Check your Dodo Payments dashboard

لنتحقق الآن من استلام الأحداث:

افتح لوحة تحكم Dodo Payments
انتقل إلى Usage Billing → AI Token Usage Meter
انقر على علامة تبويب Events
من المفترض أن ترى أحداث الدردشة مدرجة

ما يجب البحث عنه:

أسماء الأحداث: ai_chat_usage
معرّف العميل: معرّف عميلك الاختباري

من المفترض أن ترى حدثًا واحدًا لكل رسالة أرسلتها!

Verify token counting

لنرسل المزيد من الرسائل ونتحقق من عمل تجميع الرموز:

في العدّاد، انتقل إلى علامة تبويب Customers
اعثر على عميلك الاختباري
تحقّق من عمود “Consumed Units”؛ من المفترض أن يعرض إجمالي الرموز المستخدمة

يجمع العدّاد تلقائيًا جميع قيم totalTokens!

Test the free tier

لنستخدم عددًا كافيًا من الرموز لتجاوز الطبقة المجانية:

أجرِ عدة محادثات إضافية (استهدف إجماليًا يبلغ نحو 15,000 رمز أو أكثر)
تحقّق من علامة تبويب Customers في لوحة العدّاد مرة أخرى
من المفترض أن ترى الآن:
- الوحدات المستهلكة: أكثر من 15,000 رمز
- الوحدات الخاضعة للرسوم: 5,000 (تم تطبيق 10,000 رمز مجاني)
- السعر الإجمالي: نحو 0.05$

نجاح! تعمل الفوترة المستندة إلى الاستخدام بشكل مثالي. ستُفرض الرسوم على العملاء تلقائيًا بناءً على استهلاكهم الفعلي للرموز.

استكشاف الأخطاء وإصلاحها

المشكلات الشائعة وحلولها:

Events not appearing in dashboard

الأسباب المحتملة:

لا يطابق اسم الحدث إعدادات العدّاد تمامًا
معرّف العميل غير موجود في حسابك
مفتاح API غير صالح أو منتهي الصلاحية
مشكلات في اتصال الشبكة

الحلول:

تحقّق من تطابق اسم الحدث مع إعدادات العدّاد تمامًا (حساس لحالة الأحرف: ai_chat_usage)
تحقّق من وجود معرّف العميل في لوحة تحكم Dodo Payments
اختبر مفتاح API باستدعاء API بسيط
تحقّق من سجلات الخادم بحثًا عن رسائل الخطأ

Token counts showing zero

الأسباب المحتملة:

لا يعرض النموذج معلومات الاستخدام
إصدار SDK غير صحيح

الحلول:

اختبر ما إذا كان النموذج يعرض الاستخدام:

const response = await generateText({...});
console.log('Usage:', response.usage);

حدّث إلى أحدث إصدار من Blueprints SDK: npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

الأسباب المحتملة:

مفتاح API غير صحيح للبيئة
مسافات أو علامات اقتباس إضافية في ملف .env

الحلول:

تأكد من أن مفتاح الاختبار يبدأ بـ test_، وأن المفتاح المباشر يبدأ بـ live_
أزل أي علامات اقتباس حول المفاتيح في ملف .env
أنشئ مفتاحًا جديدًا عند الحاجة

هل تحتاج إلى مساعدة؟

تهانينا! لقد أنشأت تطبيق دردشة بالذكاء الاصطناعي

أصبح لديك الآن تطبيق دردشة بالذكاء الاصطناعي يعمل بالكامل، مع تتبّع تلقائي لاستخدام الرموز وفوترة مدعومة من Dodo Payments. 🎉

تعلّم المزيد

LLM Blueprint

تعرّف على المزيد حول LLM Ingestion Blueprint

Ingestion Blueprints SDK

اطّلع على مستودع GitHub لمزيد من الأمثلة

Join Community

احصل على المساعدة وشارك مشاريعك على Discord

Integration Guides

Billing Deconstructions

Cookbooks

أنشئ تطبيق دردشة بالذكاء الاصطناعي باستخدام AI SDK وLLM Blueprint

ما سنبنيه

الخطوة 1: أنشئ عدّاد الاستخدام

الخطوة 2: احصل على مفاتيح API الخاصة بك

الخطوة 3: أنشئ منتج الفوترة

الخطوة 4: نفّذ عملية شراء اختبارية

الخطوة 5: أنشئ تطبيق الدردشة

الخطوة 6: أضف واجهة الدردشة

الخطوة 7: اختبر تطبيق الدردشة

استكشاف الأخطاء وإصلاحها

تهانينا! لقد أنشأت تطبيق دردشة بالذكاء الاصطناعي

تعلّم المزيد

LLM Blueprint

Ingestion Blueprints SDK

Join Community

​ما سنبنيه

​الخطوة 1: أنشئ عدّاد الاستخدام

​الخطوة 2: احصل على مفاتيح API الخاصة بك

​الخطوة 3: أنشئ منتج الفوترة

​الخطوة 4: نفّذ عملية شراء اختبارية

​الخطوة 5: أنشئ تطبيق الدردشة

​الخطوة 6: أضف واجهة الدردشة

​الخطوة 7: اختبر تطبيق الدردشة

​استكشاف الأخطاء وإصلاحها

​تهانينا! لقد أنشأت تطبيق دردشة بالذكاء الاصطناعي

​تعلّم المزيد

LLM Blueprint

Ingestion Blueprints SDK

Join Community

ما سنبنيه

الخطوة 1: أنشئ عدّاد الاستخدام

الخطوة 2: احصل على مفاتيح API الخاصة بك

الخطوة 3: أنشئ منتج الفوترة

الخطوة 4: نفّذ عملية شراء اختبارية

الخطوة 5: أنشئ تطبيق الدردشة

الخطوة 6: أضف واجهة الدردشة

الخطوة 7: اختبر تطبيق الدردشة

استكشاف الأخطاء وإصلاحها

تهانينا! لقد أنشأت تطبيق دردشة بالذكاء الاصطناعي

تعلّم المزيد