Attaching Files

You can attach files to your messages to give AI more context or reference materials. This includes images, documents from your knowledge base, and UI components from your library.

Supported File Types

How to Attach Files

Using the Add Button

1. Click Add in the chat input area
2. Choose the file type:
   • Upload Images — Upload new images
   • Gallery — Select existing images
   • Documents — Attach documents
   • Components — Add UI components
3. Select your files
4. Files appear as badges above the chat input
5. Type your message and send

Drag and Drop

1. Drag files from your computer
2. Drop them onto the chat input area
3. Files upload automatically
4. A confirmation toast appears when done

Using Slash Commands

Type these commands to open specific pickers:

• /upload — Open file upload dialog
• /images — Open image gallery
• /documents — Open document selector
• /components — Open component library

Attaching Images

Images help AI understand visual context:

Use Cases

• Reference designs — "Make the hero look like this" with an inspiration image
• Brand assets — Attach logos or brand imagery to include in the page
• Screenshots — Show AI what you're trying to achieve
• Error examples — Attach a screenshot of a visual bug

Image Processing

When you attach an image:

1. Image uploads to your media library
2. AI analyzes the image content (transcription)
3. Processing status shows in the attachment badge
4. Once complete, AI can reference the image in its response

Attaching Documents

Documents add context from your knowledge base:

Use Cases

• Brand guidelines — AI follows your documented brand standards
• Product information — AI uses accurate product details
• Content briefs — Provide specific content requirements
• Research data — Include data AI should reference

Document Processing

When you attach a document:

1. Document uploads to your document library
2. Content is chunked and indexed for AI search
3. Document is added to your knowledge base
4. AI can query it during conversations

Supported Document Types

Attaching Components

Components give AI reusable UI patterns:

How to Attach

1. Open the component library (/components)
2. Find the component you want
3. Click to select — it's added as an attachment
4. Or copy a component and paste it into the chat (auto-detected)

Use Cases

• Request component usage — "Add a [component name] to the features section"
• Style reference — "Use this card component's style for the testimonials"
• Component customization — "Modify this component to show pricing tiers"

Managing Attachments

Viewing Attachments

Attached files appear as badges above the chat input:

• Image attachments show a thumbnail
• Documents show the file name
• Components show the component name

Processing Status

Attachments show their processing status:

• Processing — File is being analyzed
• Ready — File is ready to use
• Error — Processing failed

Removing Attachments

Click the X on any attachment badge to remove it before sending your message.

Limits and Restrictions

Per-Message Limits

• Maximum 5 files per message
• Maximum 50 MB per file
• Images and documents count toward the same limit

Storage Limits

• 1 GB total storage per project
• Includes all uploaded images and documents
• Delete unused files to free up space

File Type Restrictions

Only the supported formats listed above can be uploaded. Other file types will be rejected with an error message.

FAQ

Related Resources

• Using the Chat Interface
• Slash Commands
• Media Library
• Document Library