Artifacts
Code editor and live preview for websites, documents, and code generated in chat
Artifacts
The Artifacts feature provides a dedicated panel for viewing, editing, and previewing code and documents generated by AI in chat conversations.
What Are Artifacts?
Artifacts are AI-generated outputs that appear in a special preview panel:
- Code: HTML, CSS, JavaScript, and other code
- Websites: Live website previews
- Documents: Formatted documents and content
- Interactive Content: Dynamic, interactive elements
Instead of just showing code in the chat, Artifacts provide a better way to view and interact with generated content.
How Artifacts Work
Automatic Display
When AI generates compatible content:
- AI creates code or document
- Artifacts panel opens automatically
- Content appears in the panel
- You can view, edit, and interact
Artifacts Panel
The panel provides:
- Code Editor: Syntax-highlighted code editing
- Live Preview: See the result in real-time
- Split View: Code and preview side-by-side
- Full Screen: Expand for better viewing
Features
Code Editor
- Syntax highlighting
- Line numbers
- Code formatting
- Edit directly in the panel
- Real-time updates
Live Preview
- Instant preview of HTML/web content
- See changes in real-time
- Interactive elements work
- Responsive preview
View Modes
Code View:
- See the source code
- Edit and modify
- Copy code
- Download code
Preview View:
- See the rendered result
- Interact with content
- Test functionality
- Share preview
Split View:
- Code and preview together
- See both simultaneously
- Edit and see results
- Best for development
Panel Controls
Expand/Collapse:
- Expand panel for more space
- Collapse when not needed
- Resize to preferred size
- Save size preference
Code Actions:
- Copy code to clipboard
- Download as file
- Open in full screen
- Share artifact
Supported Content Types
HTML Pages
- Full web pages
- Landing pages
- Forms and layouts
- Interactive elements
Web Components
- UI components
- Widgets
- Interactive elements
- Styled components
Documents
- Formatted documents
- Markdown content
- Rich text
- Structured content
Code Examples
- JavaScript code
- CSS styling
- HTML markup
- Other languages
Using Artifacts
Generate Content
Ask AI to create content that displays in Artifacts:
- "Create a landing page for a coffee shop"
- "Build a contact form with validation"
- "Design a pricing table"
- "Generate an interactive quiz"
Edit and Refine
Once content appears:
- Review in preview mode
- Switch to code view
- Edit directly in panel
- See changes live
- Ask AI for modifications
Share Artifacts
Share your generated content:
- Generate shareable link
- Send link to others
- Others can view without logging in
- Perfect for client presentations
Download and Export
Save your artifacts:
- Download HTML file
- Copy code to clipboard
- Export for use elsewhere
- Save to project
Common Use Cases
Landing Pages
Create complete landing pages:
- Hero sections
- Feature showcases
- Pricing tables
- Contact forms
- Call-to-action buttons
Email Templates
Generate email layouts:
- Newsletter templates
- Marketing emails
- Transactional emails
- Responsive designs
Website Mockups
Quick website prototypes:
- Layout concepts
- Design iterations
- Client presentations
- Quick demos
UI Components
Build reusable components:
- Navigation bars
- Card layouts
- Form elements
- Interactive widgets
Documentation
Create formatted docs:
- User guides
- API documentation
- How-to guides
- Reference materials
Integration with Chat
Seamless Workflow
- Describe what you want in chat
- AI generates content
- Content appears in Artifacts
- Continue chatting to refine
- AI updates the artifact
Iterative Improvement
- Request changes in chat
- AI modifies the artifact
- See updates in real-time
- Refine until perfect
Context Awareness
- AI remembers artifact content
- Can reference and modify
- Maintains consistency
- Builds on previous versions
Best Practices
Requesting Artifacts
Be Specific:
- Describe desired layout
- Specify features needed
- Mention style preferences
- Include content details
Examples:
- "Create a modern landing page for a SaaS product with hero section, features, and pricing"
- "Build a responsive contact form with name, email, message fields and validation"
- "Design a dark-themed portfolio page with project cards"
Editing Artifacts
Direct Editing:
- Make small changes in code view
- Test immediately in preview
- Ask AI for major changes
- Combine manual and AI editing
AI Assistance:
- Ask AI to modify specific parts
- Request style changes
- Add new features
- Fix issues
Sharing
For Clients:
- Generate shareable link
- Present live preview
- Gather feedback
- Iterate based on input
For Teams:
- Share with teammates
- Collaborate on designs
- Get approvals
- Finalize together
Tips for Success
- Clear Requests: Be specific about what you want
- Iterate: Start simple, refine progressively
- Use Both Views: Code for details, preview for overall look
- Save Work: Download or copy code regularly
- Share Early: Get feedback with shareable links
- Combine Skills: Use AI for generation, manual for tweaks
- Test: Check functionality in preview
- Learn: Study generated code to improve requests
Limitations
Content Types
- Best for HTML/web content
- Other code types show in code view
- Complex applications may have limitations
- Interactive features depend on browser support
Preview Features
- Preview runs in sandbox
- Some features may be limited
- External resources may not load
- Security restrictions apply
Editing
- Best for HTML, CSS, JavaScript
- Other languages have basic highlighting
- Complex IDEs features not available
- Best for light editing
Advanced Usage
Custom Styling
- Request specific CSS frameworks
- Use custom color schemes
- Apply design systems
- Match brand guidelines
Responsive Design
- Request mobile-responsive layouts
- Test different screen sizes
- Ensure compatibility
- Modern CSS practices
Interactive Elements
- Add JavaScript functionality
- Form validation
- Dynamic content
- User interactions
Integration
- Export for use in projects
- Adapt to your needs
- Customize further externally
- Deploy to production
Troubleshooting
Artifacts not opening?
- Check if content type is supported
- Try requesting HTML explicitly
- Refresh page
- Contact support
Preview not updating?
- Switch between views
- Make a change to trigger update
- Collapse and expand panel
- Reload if needed
Can't edit code?
- Ensure you're in code view
- Check edit mode is enabled
- Try copying and re-pasting
- Request new artifact if broken
Share link not working?
- Check link was copied correctly
- Verify sharing is enabled
- Try generating new link
- Contact support if persists