Artefacts
Artefacts model files और code blocks को side preview panel बनाते हैं। Games, diagrams, HTML demos, JSON और scripts के लिए उपयोगी हैं। Work से अलग, वे normal response से browser में render होते हैं; persistent filesystem या shell नहीं देते।
समर्थित input
<artifact> blocks, supported fenced code, self-contained HTML, index.html/CSS/JavaScript bundles, JSX/TSX, Mermaid, SVG, JSON और code/text fragments।
Artefact प्रकार
| प्रकार | Preview |
|---|---|
| HTML | Scripts वाला sandboxed iframe |
| React | Tailwind/libraries सहित compiled JSX/TSX |
| Mermaid | App theme वाला diagram |
| SVG | Inline visual |
| JSON | Formatted code |
| Code/text | Syntax highlighting |
Multi-file HTML bundles
Libre linked HTML/CSS/JS को जोड़कर local references embed करता है। सबसे विश्वसनीय एक self-contained file है:
Create a complete self-contained HTML file with inline CSS and JavaScript.
It should run in a browser without local files.
Preview controls
Resizable panel में Preview/Code tabs, copy, download, new window और fullscreen हैं। Keyboard input से पहले preview click करें।
Sandbox
HTML GET /api/artifacts/sandbox से आता है। srcdoc app CSP inherit करके inline scripts रोकता, इसलिए अलग host अपनी policy देता है। Policy inline scripts और eval अनुमति देती है, बाहरी hosts नहीं। Frame forms/popups/downloads देता पर allow-same-origin नहीं; cookie, storage, DOM अलग हैं।
Artefact environment
React, ReactDOM, Framer Motion, Babel JSX/TSX, Tailwind, Recharts, Chart.js, Plotly, D3, Three.js, Lucide, Lodash, MathJS, Papa Parse, Tone.js और Mermaid locally embedded हैं। Unknown library स्पष्ट error देती है।
Opaque origin session cookies नहीं भेजता; embedding Cloudflare Access/Authelia/oauth2-proxy redirects हटाता है। React default export करें। Modules में import ... from 'react', import ... from '<name>' और अन्य libraries के लिए import ... from '<name>' उपयोग किया जा सकता है; compiler हर import को registry lookup में बदलता है और d3 तथा mermaid भी वहीं उपलब्ध हैं। CDN के <script> और <link> tags local bundles से बदलते हैं; registry में Chart, React और THREE.OrbitControls उपलब्ध हैं। localStorage, sessionStorage, document.cookie के memory-only substitutes हैं। Untrusted generated HTML की समीक्षा करें और secrets न दें।
बेहतर prompts
Build a complete browser game as one HTML file.
Use canvas.
Inline all CSS and JavaScript.
Show controls on screen.
Avoid external assets unless they are optional.
Create one self-contained HTML dashboard.
Use semantic HTML, responsive CSS, and no build step.
Include sample data inline.
Return one React component in a single jsx block.
Export it as the default export.
Style it with Tailwind classes.
Import anything you need from react, recharts, or lucide-react.
Return only one valid SVG code block with width, height, and viewBox.