استبدال react-markdown بـ Streamdown لنص الذكاء الاصطناعي المتدفق

لمن يناسب

تناسب هذه المهارة من يعرض Markdown أصلًا في React ويستعد لاستبداله بما صُمم لمخرجات الذكاء الاصطناعي المتدفقة. رسميًا Streamdown بديل فوري لـ react-markdown، مصمم للتدفق المدفوع بالذكاء الاصطناعي. تناسب أيضًا المشاريع التي تستخدم Tailwind أصلًا ويمكنها تغيير globals.css.

لا تناسب من ليس لديه تطبيق React بعد، أو يرفض تغيير مدخل الأنماط. يطلب النص تحديث globals.css في Tailwind حتى يكتشف Tailwind أصناف الأدوات التي يستخدمها Streamdown. إن لم تُعرَّف تلك المتغيرات فقد يفتقر المكوّن إلى خلفية أو حدود أو يكون التباعد غير صحيح.

المستودع الرسمي هو

https://github.com/vercel/streamdown

اتبع الأوامر المكتوبة أصلًا في تلك الصفحة. كُتب الاستخدام على أنه مع AI SDK في تطبيق React، لكن النص الظاهر لا يعطي جدول خصائص مكوّن كامل.

أكمل أول محاولة في 3 دقائق

اسلك فقط مسار تثبيت الحزمة الواحد الذي يكتبه النص الرسمي.

الشرط المسبق: الدليل الحالي مشروع React يجوز كتابة تبعيات فيه، وهذا الجهاز يستطيع تشغيل npm. أكّد أولاً: npm i streamdown سيغيّر قائمة التبعيات. إن لم ترد تغيير هذا المشروع بعد فلا تنفّذ. لا تغيّر أنماط الإنتاج في هذه الخطوة ولا تنشر.

موضع التثبيت: في جذر المشروع أكّد تلك الآثار الجانبية ثم نفّذ:

npm i streamdown

تحقق منخفض المخاطر: بعد تثبيت الحزمة اطلب أولاً من الوكيل أن يشير للقراءة فقط إلى globals.css في Tailwind الذي يجب تغييره، وأن يشرح أن Tailwind يجب أن يكتشف أصناف أدوات Streamdown. لا تدعه يكتب CSS من تلقاء نفسه ولا تخترع مسارات @source أو أسماء متغيرات لم تظهر. إن كنت ستعرض نصًا متدفقًا عبر AI SDK فعلّم أولاً فقط المكوّن الذي سيستبدل react-markdown ثم غيّره بعد التأكيد.

إشارة النجاح: يظهر streamdown في التبعيات وتعرف أن الخطوة التالية يجب أن تغيّر globals.css. إن تخطى الوكيل الأنماط وقال إنه جاهز للإطلاق فتوقف.

حالات الاستخدام

الحالة الأولى: استبدال react-markdown القائم بـ Streamdown لعرض Markdown متدفق من الذكاء الاصطناعي. أمر التثبيت الرسمي هو npm i streamdown. يناسب من لديه أصلًا موضع عرض React ويريد التثبيت أولاً ثم مقارنة نقاط الاستبدال. التثبيت يكتب إلى القرص؛ أكّد قبل التشغيل. يقول النص فقط إنه «يمكن استخدامه مع AI SDK» ولا يسرد حقول واجهة التدفق؛ لا تخترع props.

الحالة الثانية: إكمال اكتشاف Tailwind ومتغيرات الأنماط. يطلب النص تحديث globals.css وإلا قد لا تُكتشف الأدوات؛ إن لم تُعرَّف المتغيرات فقد تغيب الخلفيات أو الحدود أو يظهر تباعد خاطئ. يناسب من ثبّت الحزمة أصلًا ويستعد لتغيير مدخل الأنماط. قبل تغيير CSS انسخ احتياطيًا أو اعرض معاينة رقعة. لا يلصق النص قائمة متغيرات كاملة في هذا المقطع فلا تخترع أسماء متغيرات.

حدود الاستخدام

أمر التثبيت الرسمي المكتوب واحد فقط: npm i streamdown. لا تضع مثبّتًا لم يظهر في المسار الرئيسي. موضعه بديل لـ react-markdown موجّه لتدفق الذكاء الاصطناعي؛ لا يثبت الاستخدام خارج React أو Tailwind.

الأنماط شرط صارم: يجب تحديث globals.css في Tailwind وتعريف تلك المتغيرات وإلا سيُنقص المظهر. استخدام AI SDK مكتوب فقط كـ «يمكن استخدامه هكذا»؛ إن لم يوجد مثال كامل فلا تتظاهر بوجود مقطع مكوّن رسمي.

الصفحة الرسمية هي

https://github.com/vercel/streamdown

إن اختلف أمر تثبيت أو اسم ورقة أنماط يقترحه وكيل عن تلك الصفحة فاعتد بتلك الصفحة.