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

لجعل وكيل البرمجة يكتب التكامل، ثبّت Dodo Agent Plugin. فهو يضيف مهارات Dodo Payments وخوادم MCP إلى Claude Code وCodex CLI وCursor وVS Code / GitHub Copilot وKiro وOpenCode.

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

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

عند الانتهاء، سيكون لديك تطبيق دردشة:

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

واجهة الدردشة لتطبيق الذكاء الاصطناعي المكتمل، تعرض محادثة مع أعداد الرموز أسفل كل استجابة

ما سنبنيه

تعمل خدمة الدردشة كما يلي:

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

قبل البدء، تحتاج إلى:

حساب Dodo Payments.
مفتاح Google AI API. احصل على واحد من Google AI Studio.
Node.js 22 أو إصدار أحدث.

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

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

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

Open the Meters Section

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

صفحة Meters في لوحة معلومات Dodo Payments مع زر Create Meter

يفتح نموذج المقياس.

Enter the Meter Details

أدخل تفاصيل خدمة الدردشة:اسم العدّاد → AI Token Usage Meterالوصف → Tracks token consumption from AI chat conversations using AI SDKاسم الحدث → ai_chat_usage

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

Configure How Tokens Are Counted

عيّن التجميع، الذي يتحكم في كيفية دمج المقياس للأحداث:نوع التجميع: Sumحسب الخاصية: totalTokensوحدة القياس: tokens

يجمع Sum الرموز من كل رسالة دردشة. يرسل LLM Blueprint القيم inputTokens وoutputTokens وtotalTokens في البيانات الوصفية لكل حدث، ويجمع هذا المقياس totalTokens.

Create the Meter

تحقق من أن كل إعداد يطابق القيم أعلاه. لا يمكنك تعديل المقياس بعد إنشائه.
انقر على Create Meter.

نموذج المقياس مملوء باسم AI Token Usage Meter وحدث ai_chat_usage وتجميع Sum

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

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

اجمع مفتاحي API اللذين يحتاجهما التطبيق.

Get a Dodo Payments API Key

في لوحة معلومات Dodo Payments، انتقل إلى Developer → API Keys.
انقر على Add API Key.
انسخ مفتاح API.

أنشئ المفتاح في وضع الاختبار: لا يعمل مفتاح وضع الاختبار إلا مع وضع الاختبار. ستضيف المفتاح إلى ملف .env في الخطوة 5.

Get a Google AI API Key

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

احتفظ بهذا المفتاح سريًا. ستضيفه إلى ملف .env في الخطوة 5.

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

أنشئ منتجًا يحدد التسعير: $0.01 لكل 1,000 رمز، مع 10,000 رمز مجاني. يربط المنتج المقياس بالفوترة.

ما ستنشئه: منتج باسم “AI Chat Service” يفرض رسومًا على استخدام الرموز الذي يتجاوز المستوى المجاني.

Navigate to Products

في لوحة معلومات Dodo Payments، انقر على Products في الشريط الجانبي.
انقر على Add Product.
ضمن Pricing Type، اختر Usage Based Billing.

مع نوع التسعير هذا، تصدر Dodo Payments الفواتير استنادًا إلى استخدام المقياس بدلًا من سعر اشتراك ثابت.

Enter Product Details

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

يظهر الاسم والوصف في فواتير العملاء.

Connect Your Meter

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

مرّر إلى قسم Associated Meters.
انقر على Add meters.
اختر “AI Token Usage Meter” من القائمة المنسدلة.
تأكد من ظهور المقياس في إعدادات المنتج.

تم ربط المقياس بالمنتج.

Set Your Pricing

حدد سعر كل رمز والمستوى المجاني:السعر لكل وحدة: → 0.00001. أي $0.00001 لكل رمز، أو $0.01 لكل 1,000 رمز.الحد المجاني: → 10000. يحصل كل عميل على 10,000 رمز مجاني شهريًا.

تسعير المقياس في منتج AI Chat Service، مع تعبئة السعر لكل وحدة والحد المجاني

آلية الفوترة: يدفع العميل الذي يستخدم 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_.

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

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

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

Set Up Your Project

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

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

Install Dependencies

ثبّت الحزم:

npm install express ai@5 @ai-sdk/google@2 @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 the Project Structure

أنشئ مجلدي المصدر والملفات الثابتة:

mkdir src public

Set Up Environment Variables

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

.env

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

استبدل القيم النائبة بمفاتيح API من الخطوة 2. يقرأ موفر Google في AI SDK القيمة GOOGLE_GENERATIVE_AI_API_KEY افتراضيًا.

Create the Backend Server

أنشئ src/server.ts والصق فيه رمز الخادم أدناه.

خادم الدردشة الكامل مع الفوترة، بالإضافة إلى ملفي .env وpackage.json المطابقين:

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_PAYMENTS_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_PAYMENTS_ENVIRONMENT}`);
});

# Add your API keys here
DODO_PAYMENTS_API_KEY=your_dodo_api_key_here
DODO_PAYMENTS_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": "^5.0.51",
    "@ai-sdk/google": "^2.0.16",
    "@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.

ما تختبره: تدردش مع الذكاء الاصطناعي، وتؤكد وصول أحداث الرموز إلى 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 تتلقى الأحداث:

افتح لوحة معلومات Dodo Payments.
انتقل إلى Products → Meters وافتح AI Token Usage Meter.
حدد علامة التبويب Events.
ابحث عن أحداث الدردشة في القائمة.

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

اسم الحدث: ai_chat_usage
معرّف العميل: معرّف العميل التجريبي

علامة تبويب Events في AI Token Usage Meter تعرض أحداث ai_chat_usage

تحتوي القائمة على حدث واحد لكل رسالة أرسلتها.

Verify Token Counting

أرسل بضع رسائل أخرى، ثم تحقق من التجميع:

في المقياس، حدد علامة التبويب Customers.
ابحث عن العميل التجريبي.
تحقق من عمود Consumed Units. يعرض إجمالي الرموز المستخدمة.

علامة تبويب Customers في المقياس تعرض الوحدات المستهلكة للعميل التجريبي

يجمع المقياس قيمة totalTokens من كل حدث.

Test the Free Tier

استخدم عددًا كافيًا من الرموز لتجاوز المستوى المجاني:

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

علامة تبويب Customers في المقياس تعرض الوحدات المستهلكة والقابلة للفوترة والسعر الإجمالي بعد المستوى المجاني

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

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

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

Events not appearing in dashboard

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

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

الحلول:

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

Token counts showing zero

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

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

الحلول:

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

const response = await generateText({ model: google('gemini-2.5-flash'), prompt: 'Hello' });
console.log('Usage:', response.usage);

حدّث حزمة Blueprints: npm install @dodopayments/ingestion-blueprints@latest

API key invalid error

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

مفتاح API ينتمي إلى الوضع الآخر.
يحتوي ملف .env على مسافات أو علامات اقتباس إضافية.

الحلول:

لا يعمل المفتاح إلا في الوضع الذي أُنشئ فيه. استخدم مفتاح وضع الاختبار مع DODO_PAYMENTS_ENVIRONMENT=test_mode، ومفتاح الوضع المباشر مع live_mode.
أزل أي علامات اقتباس حول المفاتيح في ملف .env.
أنشئ مفتاحًا جديدًا عند الحاجة.

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

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

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

تعرّف على المزيد

LLM Blueprint

تتبع استخدام رموز LLM باستخدام 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: اختبر تطبيق الدردشة

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

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

تعرّف على المزيد