بداية المحادثة

تطبيق دردشة ذكاء اصطناعي يعمل بالكامل، مجاني وقابل للنشر بنقرة واحدة. الشريط الجانبي للتطبيق، وملحّن على شكل حبة مع رقاقة النموذج وعنصر تحكم الإيقاف، ومؤشر تفكير، وردود متدفقة مع إجراءات النسخ والقراءة بصوت عالٍ، وقضيب سجل الدردشة الذي يعيش في متصفح الزائر. خلفه، مسار واحد يقرأ مفتاح مزودك من جانب الخادم ويبث الإجابات بـ Vercel AI SDK. كل شيء يُثبَّت كمصدر، فهو لك لتغييره.

معاينة مباشرة
بداية المحادثة
علامة تبويب جديدة
boardui.com/templates/chat-starter
محادثة جديدة

كيف يمكنني مساعدتك؟

تعمل هذه المحادثة باستخدام مفتاح API الخاص بك. يبقى السجل في هذا المتصفح.

غير مُهيَّأ
محادثة جديدة

النشر على Vercel

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

النشر على Vercelعرض على GitHub

يُحيل الفاتورة إلى مالك المفتاح، ويمكن لأي شخص لديه الرابط إرسالها. أنشئ المفتاح بحد إنفاق، وضع حد معدل أمام /api/chat قبل إتاحته للجمهور.

التثبيت

هل لديك مشروع Next.js بالفعل؟ يمكن تثبيت نفس الشاشة باستخدام CLI، بما في ذلك وقت التشغيل.

الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.

npx boardui@latest add agent-chat

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

أحضر مفتاحك الخاص

متغيّر واحد، AI_API_KEY. يُقرأ المزوّد من المفتاح نفسه، لذا لا يوجد شيء آخر للتهيئة:

  • sk-ant-...Anthropic
  • sk-or-...OpenRouter
  • sk-...OpenAI
  • AIza...Google Gemini
  • vck_...Vercel AI Gateway
  • gsk_...Groq
  • xai-...xAI

أنشئ المفتاح بحد إنفاق حيثما يتيح المزوّد ذلك. يمكن لـ OpenRouter تحديد سقف للرصيد الذي يمكن للمفتاح إنفاقه، وتتيح OpenAI حدود استخدام لكل مشروع. لا يصل المفتاح أبدًا إلى المتصفح، لكن المحادثة مفتوحة لأي شخص لديه الرابط، لذا فإن السقف هو ما يحدد التكلفة.

تعيين CHAT_MODEL لاختيار نموذج مختلف. بالنسبة لـ Mistral أو DeepSeek، التي لا تمتلك مفاتيحها شكلًا مميزًا، أضف AI_PROVIDER=mistral أو AI_PROVIDER=deepseek. أي خادم متوافق مع OpenAI، من Ollama على جهازك المحمول إلى LiteLLM في الإنتاج، يعمل مع AI_BASE_URL و CHAT_MODEL. المتغير المعتاد لكل مزوّد (OPENAI_API_KEY, ANTHROPIC_API_KEY، وهكذا) يعمل أيضًا.

تشغيله محلياً

استنسخ المستودع الذي نشرته، أو القالب نفسه، وأعطه مفتاحاً:

npm installcp .env.example .env.local # put your key in AI_API_KEYnpm run dev

ما المتضمَّن

مكوّنات مجانية فقط، مثبتة كمصدر: الشريط الجانبي للتطبيق مع قوائم الفريق والمستخدم، والمحرر ومعالجة التحميل الخاصة به، ومؤشر التفكير، وقضيب سجل الدردشة مع إعادة التسمية والرسائل غير المقروءة والتصدير، وإجراءات الرسائل، وكل مكوّن أساسي تعتمد عليه. يحمل التطبيق المنشور أيضاً لوحة تحكم مع مخططَي البيانات المجانيَّين وشاشتَي تسجيل الدخول والتسجيل المبنيتَين من نفس المكوّنات المجانية، بحيث لا يرتبط الشريط الجانبي إلا بصفحات موجودة. بالإضافة إلى app/api/chat/route.ts، وبيئة التشغيل، وقواعد تصميم BoardUI لوكلاء البرمجة في AGENTS.md، حتى تتحدث الشاشة التالية التي يبنيها الوكيل اللغةَ ذاتها. تُثبَّت قوالب Pro في المشروع نفسه عند الحاجة إليها.