लाइव आर्टिफैक्ट्स के साथ इंटरैक्टिव प्रोटोटाइप तैयार करें

Claude Artifacts चैट इंटरफ़ेस में सीधे लाइव, इंटरैक्टिव आउटपुट प्रस्तुत करते हैं: पूर्ण स्टेट और इंटरैक्टिविटी वाले React कंपोनेंट, CSS और JavaScript वाले HTML पेज, SVG ग्राफ़िक्स, Mermaid फ़्लोचार्ट और मार्कडाउन दस्तावेज़। जब Claude पर्याप्त, स्व-निहित कोड (आमतौर पर 15+ पंक्तियां) जनरेट करता है, तो यह स्वचालित रूप से बातचीत के बगल में एक समर्पित पूर्वावलोकन पैनल में खुल जाता है। परिणाम पूरी तरह कार्यशील होता है-React ऐप्स चलते हैं, HTML पेज CSS और JavaScript लोड करते हैं, SVG स्पष्ट रूप से रेंडर होता है-और आप तुरंत इसके साथ इंटरैक्ट कर सकते हैं।

Artifacts का पेशेवर रूप से उपयोग करने के लिए: Claude से React डैशबोर्ड, इंटरैक्टिव फ़ॉर्म या डेटा विज़ुअलाइज़ेशन बनाने के लिए कहें। चैट बबल में कोड प्राप्त करने के बजाय जिसे आपको स्थानीय एडिटर में कॉपी करना होता, आप लाइव परिणाम को रीयल-टाइम में रेंडर होते देखते हैं। बातचीत जारी रखकर पुनरावृत्ति करें: "बटन का रंग हेडर से मिलाएं", "इस तालिका में खोज फ़िल्टरिंग जोड़ें", "यह डेटा लाइन चार्ट के रूप में दिखाएं"। Claude केवल कोड के प्रासंगिक हिस्से को अपडेट करता है, और पूर्वावलोकन तुरंत ताज़ा हो जाता है। यह कॉपी-पेस्ट-परीक्षण चक्र को पूरी तरह समाप्त कर देता है।

टीमों के लिए: Artifacts को एक निजी लिंक के माध्यम से साझा किया जा सकता है, ताकि गैर-तकनीकी हितधारक बिना कोड तक पहुंच की आवश्यकता के ठीक वही देख सकें जो आप बना रहे हैं। विकास से पहले प्रतिक्रिया प्राप्त करने के लिए उत्पाद प्रबंधकों, ग्राहकों या डिज़ाइनरों के साथ साझा करें। किसी Slack संदेश या ईमेल के साथ एक लाइव Artifact लिंक संलग्न करें और कोई भी क्लिक करके अपने प्रोटोटाइप की वर्तमान स्थिति देख सकता है-कोई बिल्ड टूल, कोई डिप्लॉयमेंट, कोई स्थानीय सेटअप आवश्यक नहीं।

यह सुविधा छह प्रकार के आर्टिफैक्ट्स में काम करती है: सादा कोड (सिंटैक्स-हाइलाइटेड), पूर्ण HTML वेबसाइटें, हुक्स और स्टेट वाले React कंपोनेंट, SVG ग्राफ़िक्स और आइकन, आर्किटेक्चर या वर्कफ़्लो के लिए Mermaid आरेख, और स्पेसिफिकेशन और योजनाओं के लिए मार्कडाउन दस्तावेज़। सभी Claude योजनाओं-Free, Pro, Max, Team, Enterprise-पर बिना किसी अतिरिक्त लागत के उपलब्ध। डेटा-संचालित आर्टिफैक्ट्स के लिए, सशुल्क योजनाएं Live Artifacts का भी समर्थन करती हैं, जो बाहरी डेटा स्रोतों से जुड़ने और वर्तमान जानकारी के साथ स्वचालित रूप से ताज़ा होने के लिए Model Context Protocol का उपयोग करते हैं।