> ## Documentation Index
> Fetch the complete documentation index at: https://phaseo.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# أنشئ تطبيق دردشة ويب باستخدام Next.js

> استخدم تطبيق الدردشة التجريبي الحالي لـ Next.js كدليل كامل، مع مطالبة إنشاء قابلة للنسخ في الأعلى۔

استخدم هذه الصفحة إذا أردت تطبيق دردشة صغيرًا وعمليًا باستخدام Next.js مع إبقاء مفتاح Phaseo API على الخادم。

**الهدف:** تشغيل تطبيق دردشة في المتصفح يكتشف النماذج ويرسل الردود عبر مسارات من جهة الخادم。

**النتيجة:** واجهة دردشة محلية تعمل دون كشف بيانات اعتماد Phaseo للمتصفح。

<Prompt description="أنشئ **تطبيق دردشة ويب باستخدام Next.js** بالاعتماد على Phaseo Gateway。" icon="message-square" actions={["copy", "cursor"]}>
  {`أنت بصدد إنشاء تطبيق دردشة صغير بأسلوب قريب من تطبيقات الإنتاج باستخدام Phaseo Gateway。

    أنشئ تطبيق Next.js يتضمن:
    - واجهة دردشة
    - محدد نماذج يعتمد على GET /v1/models
    - مسار من جهة الخادم يستدعي POST /v1/responses
    - إدارة مفتاح API على الخادم باستخدام PHASEO_API_KEY
    - حالات التحميل والنجاح والخطأ

    أبقِ التطبيق صغيرًا عمدًا وسهل الفحص。

    متطلبات التنفيذ:
    - استخدم مسار API محليًا واحدًا لاكتشاف النماذج。
    - استخدم مسار API محليًا واحدًا لإنشاء الردود。
    - أبقِ الأسرار على الخادم فقط。
    - وضّح تدفق الطلب والاستجابة في الشيفرة بوضوح。
    - أضف README موجزًا يوضح خطوات الإعداد والتشغيل。

    التحقق:
    - شغّل التطبيق إن أمكن。
    - تحقّق من نجاح جولة دردشة واحدة。
    - أبلغ عن الملفات التي تغيرت تحديدًا، وما تحققت منه، وأي افتراضات متبقية。`}
</Prompt>

## المشروع النموذجي

* GitHub: [examples/web-chat-nextjs](https://github.com/phaseoteam/Phaseo/tree/main/examples/web-chat-nextjs)
* مسار المشروع داخل المستودع: `examples/web-chat-nextjs`

## ما يفعله التطبيق

* * يجلب النماذج المتاحة باستخدام `GET /v1/models`
* * يرسل رسائل الدردشة باستخدام `POST /v1/responses`
* يحتفظ بمفتاح API على الخادم
* يوفر نقطة بداية بسيطة لمنتج حقيقي دون تعقيدات OAuth

## الملفات الرئيسية

* `app/api/models/route.ts`
* `app/api/responses/route.ts`
* `app/components/ChatClient.tsx`
* `lib/gateway.ts`

## لماذا بُني المثال بهذه الطريقة

### 1. المتصفح لا يستدعي Phaseo مباشرة

تتصل الواجهة أولًا بمسارات Next.js الخاصة بك، ثم تستدعي هذه المسارات Phaseo على الخادم。

وهذا يتيح لك:

* إدارة الأسرار على الخادم
* إدارة الترويسات ومحتوى الطلبات في مكان واحد
* إضافة المصادقة أو حدود الطلبات أو السجلات لاحقًا بسهولة أكبر

### 2. اكتشاف النماذج منفصل عن إنشاء الردود

أبقِ مسارات قائمة النماذج وإنشاء الدردشة منفصلة حتى يبقى كل جزء سهل الفهم:

* مسار لعرض قائمة النماذج
* مسار لتنفيذ طلب الدردشة

### 3. لا تدير الواجهة سوى حالة التفاعل

يتولى عميل React إدارة:

* حالة الإدخال
* حالة التحميل
* عرض الأخطاء
* الرسائل المعروضة

يتولى مسار الخادم استدعاء الذكاء الاصطناعي، بينما يدير المتصفح تجربة المستخدم فقط。

## المتطلبات المسبقة

* * Node.js ومدير حزم مدعوم
* مفتاح Phaseo API

## تشغيل المثال

<CodeGroup>
  ```bash npm theme={null}
  cd examples/web-chat-nextjs
  npm install
  cp .env.example .env.local
  ```

  ```bash pnpm theme={null}
  cd examples/web-chat-nextjs
  pnpm install
  cp .env.example .env.local
  ```

  ```bash yarn theme={null}
  cd examples/web-chat-nextjs
  yarn install
  cp .env.example .env.local
  ```

  ```bash bun theme={null}
  cd examples/web-chat-nextjs
  bun install
  cp .env.example .env.local
  ```
</CodeGroup>

عيّن:

* `PHASEO_API_KEY`
* `NEXT_PUBLIC_GATEWAY_URL`

ثم شغّل:

<CodeGroup>
  ```bash npm theme={null}
  npm run dev
  ```

  ```bash pnpm theme={null}
  pnpm dev
  ```

  ```bash yarn theme={null}
  yarn dev
  ```

  ```bash bun theme={null}
  bun run dev
  ```
</CodeGroup>

افتح `http://localhost:3000`.

## التحقق من التطبيق

* يجلب محدد النماذج البيانات من مسار الخادم。
* يؤدي إرسال رسالة إلى ظهور رد واحد من المساعد。
* لا تكشف لوحة الشبكة في المتصفح عن `PHASEO_API_KEY`.
* يظهر خطأ مفيد في الواجهة عند فشل طلب Gateway。

## تخصيص التطبيق

* غيّر النموذج الافتراضي إلى النموذج الذي اخترته للإنتاج
* أضف البث إذا كانت تجربة الاستخدام تحتاج إلى عرض الرموز واحدًا تلو الآخر
* أضف المصادقة لاحقًا إذا أصبح التطبيق متعدد المستخدمين
* استبدل التنفيذ الداخلي لمسار الخادم بـ TypeScript SDK لاحقًا إذا أردت عميلًا بمستوى تجريد أعلى

## متى تختار نقطة بداية أخرى

* استخدم البدء السريع لـ Node إذا كنت تريد سكربتًا أو اختبارًا للواجهة الخلفية بدلًا من واجهة
* استخدم البدء السريع لـ Python إذا كان أول تكامل في عامل أو CLI أو خدمة خلفية

## أدلة ذات صلة

* [مطالبات بدء تطبيق صغير](./mini-app-starter-prompts.mdx)
* [الأمثلة](../guides/examples.mdx)
* [البدء السريع](../quickstart.mdx)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.