استخدام Discourse MCP لبناء قالب بسرعة

,

غالبًا، أكبر عائق أمام بدء إنشاء مجتمع هو “تخصيصه”.

تريد أن يكون الخط، والأسلوب، والمظهر مطابقًا لعلامتك التجارية.

في هذا المنشور، أودّ أن أغطي ما يمكن تحقيقه بطريقة بسيطة إلى حد ما باستخدام:

اخترت Codex هنا، لأن GPT-6 Astra الذي تم إصداره مؤخرًا هو فنان بصري موهوب بشكل لا يصدق. Kimi K3 و Fable قويان أيضًا في هذا المجال، لكنني أستخدم Astra في هذا العرض التوضيحي.

الخطوة 1 - إنشاء مفتاح API

انتقل إلى: your.site/admin/api/keys/new

أنشئ مفتاح API عالميًا.

ملاحظة أمنية: حافظ على سرية هذا المفتاح، وفكّر في إلغائه بمجرد انتهاء العمل، فهو يوفر وصولًا غير مقيد إلى الموقع.

الخطوة 2 - إضافة Discourse MCP

في هذا الشرح، أستخدم codex:

حرر: ~/.codex/config.toml

[mcp_servers.discourse]
command = "npx"
args = [
  "-y",
  "@discourse/mcp@latest",
  "--toolsets",
  "all",
  "--allow-writes",
  "--site",
  "https://figment123.discourse.group",
  "--auth_pairs",
  '[{"site":"YOUR_SITE","api_key":"YOUR_API_KEY","api_username":"system"}]',
]

(ملاحظة: لا يسمح لك Codex باختيار أي من MCPs يجب تفعيلها أو تعطيلها، فكل ما هو موجود في الإعدادات سيتم تفعيله. يمكنك وضع enabled = false لتعطيل MCP مؤقتًا)

:writing_hand: ملاحظة حول الأدوات: يدعم Discourse MCP أكثر من 140 أداة، وهذا الإعداد يجعل جميعها متاحة. يمكن لأطر العمل الحديثة مثل Claude وCodex التعامل مع هذا العدد جيدًا، ومع ذلك، قد تواجه العديد من أطر العمل صعوبة مع عدد أدوات بهذا القدر - على سبيل المثال، سيتطلب Grok build تصفية الأدوات)

بمجرد إضافة Discourse MCP، تأكد من أن وكيلك (Agent) يمكنه الوصول إليه:

الخطوة 3 - امنح وكيلك الأدوات التي يحتاجها للقيام بالعمل

سيؤدي الوكيل أداءً أفضل بكثير إذا كان لديه:

  1. عيون، أي القدرة على رؤية عمله. (playwright MCP، استخدام الحاسوب، إلخ)
  2. سياق، يساعد Discourse MCP في ذلك، وكذلك يساعد كود مصدر Discourse
  3. توليد الصور - في حال كنت بحاجة إلى أصول بصرية (Assets) وما إلى ذلك.

تطبيق ChatGPT يحتوي على متصفح مدمج، تأكد من استخدامه. تأكد من استنساخ قاعدة كود discourse/discourse وبدء وكيلك من مجلد Discourse.

لا شيء من هذا مطلوب، لكن وجوده سيؤدي إلى نتائج أفضل بكثير.

الخطوة 4 - امنح وكيلك الذكاء وتعليمات واضحة

في هذه الحالة، بما أنني أريد رؤية نتائج جيدة جدًا، فقد اخترت GPT-6 Astra XHIGH.

ثم كتبت موجزًا صغيرًا مع ذكائي الاصطناعي حول ما أردته (سمة لمجتمع New Yorker)

موجز من تأليف الذكاء الاصطناعي

ابنِ The Salon، سمة Discourse مصقولة تُظهر كيف يمكن لعميل أن يحوّل هوية Discourse بشكل جذري. المرجع الإبداعي هو The New Yorker: مؤسسة تحريرية يشارك قراؤها في المحادثة. أنشئ هوية أصلية، وليس نسخة - لا شعارات مستعارة أو خطوط مملوكة غير مرخصة. استخدم العاجي الدافئ (#F7F4ED)، والحبر شبه الأسود (#20201E)، والأحمر التحريري المقيد (#B52B32)، وخطوطًا رفيعة، ومساحة بيضاء سخية، وعناوين رئيسية بخط Serif تعبيرية، ونصًا أساسيًا بخط Serif سهل القراءة، وبيانات وصفية بخط Sans-serif مضغوط. يجب أن تضيف الرسومات أحادية اللون ذكاءً وشخصية. لديك حرية إبداعية في تجميع أو تنزيل أو توليد أي أصول يحتاجها العرض التوضيحي - الخطوط، الرسومات، التصوير الفوتوغرافي، الصور الرمزية والأيقونات - باستخدام مواد مرخصة بشكل مناسب والاحتفاظ بالإسناد حيثما يلزم. تجنب بطاقات SaaS العامة، والرقائق الزائفة، والفوضى الزخرفية. استهدف مجلة أدبية معاصرة مع مجتمع حي بداخلها، وليس منتدى قوالب بألوان مختلفة.

تم تفويضك صراحةً لتجهيز نسخة العرض التوضيحي بالفئات والمواضيع والردود وملفات المساهمين الخيالية والمحتوى الداعم اللازم لجعل التجربة مقنعة. حافظ على المحتوى الحقيقي الموجود مسبقًا، وابقِ النشاط الخيالي قابلًا للتعرف عليه بوضوح كبيانات عرض توضيحي. أنشئ خمسة أقسام تحريرية - The Commons, Arts & Letters, City Life, Science & Ideas, Table Talk - مع أوصاف ورسومات مميزة. ابنِ شعار THE SALON قويًا، ومناقشة رائدة منسقة بعناية، وعناوين فرعية، وقسم للمحادثات الأحدث. املأ بمناقشات متنوعة ومدروسة مثل “متى أصبح كل هواية عملًا جانبيًا؟” و"ما الذي سيغير رأيك فعليًا؟"، مع منشورات افتتاحية مقنعة، وخلافات جوهرية، وردود قصيرة، واقتباسات، وصور مختارة بعناية. املأ بمحتوى كافٍ لإظهار الكثافة والتمرير والتنقل؛ لا تستخدم مواد حشو متكررة أو تترك الشاشات المهمة فارغة. يجب أن تفتح كل عنوان رئيسي موضوعًا حقيقيًا، ويجب أن تبقى حالة النشاط وعدد الردود وحالة غير المقروء مرئية. احمل الهوية عبر قوائم الفئات وصفحات المواضيع والبحث والمحرر: يجب أن تبدو المنشورات الافتتاحية كمقالات مصممة بشكل جميل، بينما تبقى الردود محادثات مضغوطة وقابلة للاستخدام. يجب أن يصبح الهاتف المحمول تجربة هادئة من عمود واحد، ويجب أن تبدو الوضع الداكن متعمدًا بنفس القدر.

افحص إصدار Discourse المستهدف وواجهات برمجة التطبيقات (APIs) المدعومة للسمة قبل اختيار تفاصيل التنفيذ. فضّل سمة قابلة للصيانة ومكونات سمة مركزة؛ تجنب ترميمات النواة، والإضافات غير الضرورية، والتلاعب الهش بـ DOM، والوظائف المخترعة. اجعل التنسيق التحريري صريحًا وقابلًا للضبط. اعمل بشكل مستقل على قرارات التصميم والأصول والتجهيز القابلة للعكس بدلاً من طلب الموافقة على كل تفصيلة؛ أقّم اللغة البصرية بصفحة رئيسية تمثيلية وصفحة موضوعات مملوءة، ثم أكمل الأسطح الداعمة. سلّم سمة قابلة للتثبيت، والمكونات المطلوبة، وإعداد محتوى العرض التوضيحي القابل للتكرار، وأصل الأصول، وتعليمات تركيب موجزة. تحقق من النتيجة في نسخة Discourse حقيقية على سطح المكتب والهاتف المحمول، بما في ذلك التنقل بلوحة المفاتيح، والتباين، وحالات غير المقروء، والبحث، والاقتباس، والتأليف. التقط نفس المجتمع المجهز قبل وبعد تطبيق السمة حتى تكون التحوّل لا جدال فيه. المعيار هو عرض توضيحي جاهز للعميل - ليس مجرد نموذج، وليس مجرد صفحة رئيسية جميلة، بل مجتمع متماسك وعامل مع إحساس مختلف تمامًا بالمكان.

  • استشر كود مصدر Discourse عند الحاجة
  • https://figment123.discourse.group/ هو موقع عرض توضيحي، يمكنك فعل ما تشاء به، انظر إلى النتائج أثناء تقدمك، فعّل السمة
  • أنشئ المواضيع عند الحاجة

الخطوة 5 - تبدو رائعة!

بعد ساعة وعشر دقائق، انتهى Astra Xhigh من العمل.

سمة جميلة مستوحاة من New Yorker.

السمة ليست مثالية، لديها حالات حافة (Edge cases)، وأوصي بـ الخطوة 6 للتحسين، حيث تلصق المناطق التي يكون فيها التصميم غير صحيح ويصلحها الوكيل. لكن كنقطة انطلاق، من المذهل حقًا أننا نستطيع القيام بهذا اليوم. لم يكن ذلك ممكنًا قبل عام.

مثال على التحسين في الوقت الفعلي:

24 إعجابًا

ما لم أكن أغفل شيئًا، يبدو أنك أنشأت إطار عمل (harness) مخصصًا لوكيل ذكاء اصطناعي للقيام بذلك. :high_five: :+1:

بما أن إطار عمل وكيل الذكاء الاصطناعي مفهوم أوسع من إطار عمل برمجة الذكاء الاصطناعي — مثل Claude Code، أو OpenAI Codex، أو OpenCode — فقد بحثت عن مرجع تمهيدي جيد لأي شخص جديد على المصطلحات ويأمل في تبديد بعض الغموض:

إذا كان عليك تذكر سطر واحد فقط:

النموذج يفكر. الوكيل يتصرف. والإطار يمنع الوكيل من التصرف كالأحمق.


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

بدلًا من مجرد السؤال: «ما الوكيل الذي تستخدمه؟»، قد يصبح السؤال الأكثر فائدة بشكل متزايد: «ما الإطار الذي بنيتَه حوله؟»

إعجابَين (2)

لا، لقد قمتُ ببناء إطار عمل مخصص، لكن هذا كله يعتمد على تطبيق ChatGPT الأصلي على نظام Linux، وDiscourse MCP، وتجربة Discourse.

على نظام Mac، يكون ChatGPT أغنى بكثير، إذ يمكنه التحكم في أي تطبيق، لذا على سبيل المثال، يمكنه الاختبار في Firefox وChrome أثناء عملية البناء، أو حتى في محاكي iPhone.

يمكن لإطار العمل المخصص لديّ تحقيق نتائج مشابهة، وسأشارك عينة مختلفة. https://chatgpt.com/download/

6 إعجابات

أضيف فقط إصدارًا جديدًا لفت انتباهي، لمن يرغب في مقارنة وتقييم بديل خارج نطاق النماذج الأمريكية:

إعجاب واحد (1)

بالتأكيد يمكنني إجراء عرض توضيحي سريع لها لاحقًا، لكني أشكّ في أنها تقترب من مستوى أسترا.

3 إعجابات

رائع! أشعر بالتعاطف بشكل خاص مع المقال الرئيسي! :sweat_smile:

كنتُ متشككًا جدًا في ذلك الوقت، وأثبت لي DeepSeek أنه يستحق ذلك في إصداره V4. نموذج GPT-6 Astra هو نموذج متقدم (Frontier)، لكن من المرجح جدًا أن يكون DS 4.1 بديلًا جيدًا جدًا لمهام مثل هذه.

نعم، من أجل إجراء اختبار عادل، أحتاج إلى إعادة العمل على Astra باستخدام إطار الاختبار الخاص بي، ثم تبديل النموذج اللغوي، لذا سيستغرق الأمر بعض الوقت.

هذا يعمل أيضًا مع أولئك الذين يستضيفون الخدمة بأنفسهم


أيضًا، هذه محاولتي في الأمر. سأقول إنني لا أحبها تمامًا للمشروع/المجتمع الذي أعمل عليه، لكنها قامت بعمل جيد على أي حال.


4 إعجابات

هذا رائع! أقدّر أيضًا الواقعية في تجربتك مع الذكاء الاصطناعي (“يا رجل…” هههه) :laughing:

إعجاب واحد (1)

أجريتُ تجربةً تجريبية على DeepSeek 4.1 flash max.

يمكنك العثور على المحادثة الكاملة هنا: https://gisthost.github.io/?28dedf78da999ccca5b5b4feb1d58fc9/index.html

كانت التجربة مُلوِّثةً إلى حدٍّ ما، لأنني شغّلت الاختبار على حاوية dv، وفي مرحلةٍ ما قرر الوكيل (Agent) أنه من الأفضل استخدام Docker بشكلٍ أكثر كفاءةً لإجراء التغييرات بدلاً من الاعتماد على MCP الخاص بنا.

استخدمتُ Qwen 3 Image لتوليد الصور.

للمعاينة البصرية، زوّدتُ الوكيل بـ chrome-devtools-mcp. يمكن بسهولة ضبط هذا الأداة لاستخدام Chromium على Linux، وهو الخيار الذي أميل إليه عادةً:

   "chromium-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--headless=true",
        "--executable-path=/usr/bin/chromium",
        "--chrome-arg=--no-sandbox",
        "--chrome-arg=--disable-dev-shm-usage"
      ]
    },

اعتمدت التجربة بأكملها على DeepSeek 4.1 flash لكلٍّ من الوكيل الرئيسي والوكلاء الفرعيين.

استخدمتُ term-llm.com لتشغيله في وضع واجهة المستخدم النصية (TUI):

النتائج:

الملاحظات

التوجيهات (Brief) أمرٌ حاسم؛ فإذا كان لديك توجيهات رائعة، ستكون النتائج رائعة، أما إذا كانت ضعيفة، فستكون في مهبّ نموذج اللغة (LLM). التوجيهات الجيدة تتحدث عن الهيكل والألوان وتعطي أمثلةً وغيرها.


كان DeepSeek 4.1 flash قادراً جداً في هذا الاختبار ورخيصاً للغاية. بنسبة قراءة من ذاكرة التخزين المؤقت (Cache) تبلغ 99% وبتكلفة قراءة 2.8 مليون توكن فقط، كان من المفترض أن تكون التكلفة حوالي 1.52 دولار خارج أوقات الذروة، أو 3.04 دولار في أوقات الذروة. Astra أكثر كفاءةً في استخدام التوكنز بشكلٍ كبير، لذا فإن المقارنة غير عادلة، ولكن من أجل السياق، ستكون تكلفة Astra لعدد مشابه من التوكنز حوالي 325 دولاراً.

بشكلٍ محافظ، وحتى مع مراعاة كفاءة التوكنز، أعتقد أنه يمكن إنجاز تصميم كهذا باستخدام Astra مقابل 50 إلى 100 دولار، أما الحصول عليه مقابل 1.50 دولار فهو مستحيل بتكاليف واجهات برمجة التطبيقات (API) الحالية.

شغّلتُ هذا على خطتي OpenCode go، ولم أشعر حتى بوجود خدشٍ صغير في خطتي التي تكلف 10 دولارات شهرياً:

أشياءٌ قليلة أبهرتني في هذه التجربة، فقد استطاع العمل دون إشراف لمدد ساعات. تعامل مع التوجيهات دقيقة نفسها الموجودة في الموضوع الأصلي بجدّيةٍ وعناية. حاول معالجة كل نقطة في التوجيهات، واختبر كل شيء بدقة متناهية.

حصل على الكثير من الأمور بشكل صحيح والتصميم متين.

ومع ذلك، هذا ليس GPT 6 Astra؛ التصميم يبدو لي أكثر تشابهاً مع تصميمات نماذج اللغة. التباعد والخطوط والاهتمام بالتفاصيل لم تكن بنفس مستوى Astra. كما أنه من الواضح جداً أنه لا يملك نفس دقة الرؤية التي تتمتع بها Astra، فقد ظهرت أخطاء بصرية واضحة كثيرة بعد التكرار الأول، ومن الناحية الإيجابية، استطاع تصحيح معظمها عند طلب ذلك منه.

رفض إصلاح هذا الخطأ بالتحديد لسببٍ ما:

لكنه تعامل مع باقي الغرائب بشكل جيد.

أكثر جزءٍ مثيرٍ للإعجاب في البناء كان مدى انتظامه وإصراره على النظافة:

  • أنشأ مجلداً للأدلة (Evidence)
  • حاول هندسة السمة (Theme) بشكل نظيف وقسمها إلى ملفات كثيرة واختبرها حتى

بشكلٍ عام، لا تتوقع الحصول على مستوى Astra من نموذج أرخص بـ 50 أو 100 مرة، لكن كأداة، يمكنه بالتأكيد إنتاج نتائج مثيرة للاهتمام مقابل جزءٍ صغير من التكلفة.

بالمراجعة الرجعية، أوصي ببناء السمة مباشرةً داخل حاوية dv ثم رفعها، لأنك يمكنك تشغيلها بأمان في وضع YOLO (التنفيذ التلقائي دون تأكيد) والإعداد سهل جداً.


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

8 إعجابات

سأكون سعيدًا برؤية شيء من هذا القبيل أيضًا :eyes:

إعجابَين (2)

جربت هذا، ويبدو أن Astra فقط هو الذي يحقق المظهر بدقة كما هو معروض، بينما فشلت النماذج الأخرى في الحفاظ على الاتساق البصري بنفس الدرجة. هل لديك أي اقتراحات إضافية لإنشاء عناصر واجهة مستخدم مخصصة؟

بالنسبة لعناصر واجهة المستخدم المخصصة، أنصحك بشدة بالعمل داخل حاوية dv، حيث ستجعل ذلك العثور على أمثلة في الكود أسهل بكثير.

إعجاب واحد (1)