أطلق نماذج أولية تفاعلية باستخدام القطع الحية

تعرض "قطع Claude" مخرجات حية وتفاعلية مباشرة في واجهة المحادثة: مكوّنات React بحالة وتفاعلية كاملتين، وصفحات HTML مع CSS وJavaScript، ورسومات SVG، ومخططات انسيابية Mermaid، ومستندات Markdown. وعندما يولّد Claude كوداً جوهرياً ومكتفياً بذاته (عادةً 15 سطراً أو أكثر)، فإنه يُفتح تلقائياً في لوحة معاينة مخصصة بجانب المحادثة. وتكون النتيجة كاملة الوظائف - تعمل تطبيقات React، وتحمّل صفحات HTML ملفات CSS وJavaScript، ويُعرض SVG بوضوح - ويمكنك التفاعل معها على الفور.

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

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

وتعمل الميزة عبر ستة أنواع من القطع: الكود العادي (مع إبراز الصياغة)، ومواقع HTML الكاملة، ومكوّنات React ذات الخطافات والحالة، ورسومات وأيقونات SVG، ومخططات Mermaid للهيكلية أو سير العمل، ومستندات Markdown للمواصفات والخطط. وهي متاحة في جميع خطط Claude - المجانية وPro وMax وTeam وEnterprise - دون تكلفة إضافية. وبالنسبة للقطع المعتمدة على البيانات، تدعم الخطط المدفوعة أيضاً "القطع الحية"، التي تستخدم بروتوكول سياق النموذج للاتصال بمصادر بيانات خارجية والتحديث تلقائياً بالمعلومات الحالية.