angen.ai
← Back to Documentation
Advanced Features•5 min read

Media Library

Upload and manage images to provide visual context for AI code generation - from UI mockups to error screenshots.

Media Library

The Media Library stores images you can attach to Work Items as visual context. This guide covers uploading, managing, and using images to improve AI code generation.

What Is the Media Library?

The Media Library is a collection of images associated with your project. When you attach images to a Work Item, AI analyzes them to understand:
  • UI designs and mockups
  • Error screenshots and bug reports
  • Architecture diagrams
  • Visual references and examples
Images help AI understand visual requirements that are difficult to describe in text.

Accessing the Media Library

Click Media in the sidebar to open the Media Library.
The library displays all uploaded images as a grid of thumbnails. Click an image to view it in full size.

Supported Formats

The Media Library accepts these image formats:
  • PNG - Best for screenshots and UI mockups
  • JPG/JPEG - Good for photos and complex images
  • GIF - Supports simple animations
  • WebP - Modern format with good compression
Note: Video and audio files are not supported in the Media Library.

Uploading Images

Upload via Button

  1. Click Upload in the Media Library
  2. Select one or more images from your computer
  3. Images upload and appear in the library

Drag and Drop

  1. Drag image files from your file explorer
  2. Drop them onto the Media Library area
  3. Images upload automatically

From Work Item Context Panel

  1. Open a Work Item
  2. Expand the Media section in the Context Panel
  3. Click Upload to add images directly

Use Cases

UI Mockups and Wireframes

Upload design files to help AI understand the visual goal:
  1. Upload your mockup image
  2. Create a Work Item describing the component
  3. Attach the mockup in the Context Panel
  4. AI generates code matching the design
Example prompt with mockup:
Create a React component matching the attached mockup.
Include the header with logo, navigation menu, and hero
section with the call-to-action button.

Error Screenshots

Share visual error context:
  1. Capture a screenshot of the error
  2. Upload to the Media Library
  3. Attach to your Work Item
  4. Describe the expected behavior
Example prompt with error screenshot:
Fix the layout bug shown in the attached screenshot.
The sidebar should align with the header, not overlap it.

Architecture Diagrams

Reference system designs:
  1. Upload your architecture diagram
  2. Ask AI to implement components shown in the diagram
  3. AI understands relationships between services
Example prompt with diagram:
Implement the authentication service shown in the attached
architecture diagram. Include the connection to the user
database and token generation service.

Design References

Show existing patterns to match:
  1. Screenshot an existing component or page
  2. Upload as reference
  3. Ask AI to create similar elements
Example prompt with reference:
Create a notification dropdown matching the style shown
in the attached reference. Use the same colors and spacing.

Managing Images

Viewing Images

Click any thumbnail to open the full-size preview. Press Escape or click outside to close.

Deleting Images

  1. Select the image you want to remove
  2. Click the Delete button
  3. Confirm deletion
Warning: Deleted images cannot be recovered. Work Items that referenced the image will no longer display it.

Image Information

Hover over an image to see:
  • File name
  • Upload date
  • File size
  • Dimensions

Using Images in Work Items

From the Context Panel

  1. Open or create a Work Item
  2. Expand the Media section in the Context Panel
  3. Check the images you want to include
  4. Submit your prompt
Selected images upload to the AI context when you generate code.

Attaching to Messages

  1. Click the image icon in the Chat Panel input
  2. Select images from the Media Library
  3. Images attach to your message
  4. Submit the message with attached images

Multiple Images

You can attach multiple images to a single Work Item. Use multiple images when:
  • Showing different states (before/after, error/success)
  • Providing multiple design references
  • Demonstrating a multi-step process

Best Practices

Use Clear, High-Quality Images

  • Capture full screenshots, not partial clips
  • Ensure text is readable
  • Use appropriate resolution (not too large, not too small)

Annotate When Helpful

Before uploading, annotate images to highlight:
  • Specific areas of interest
  • Problem locations
  • Important UI elements
Use simple annotations like arrows, circles, or boxes.

Provide Context in Your Prompt

Images work best with explanatory text:
With context:
Create a card component matching the attached mockup.
Note the rounded corners, shadow, and padding.
Without context (less effective):
Make this component.

Keep the Library Organized

Delete unused images periodically. A cluttered Media Library makes finding images difficult.

Limitations

File Size

Large images may slow upload and processing. Resize extremely large images before uploading.

Complex Diagrams

AI interprets images but may miss fine details. For complex diagrams, describe key elements in your prompt.

Dynamic Content

Screenshots show static state. For dynamic behavior, describe interactions in text:
Create the dropdown shown in the mockup. When the user
hovers over a menu item, it should highlight in blue.

Troubleshooting

Image Not Uploading

  • Check your internet connection
  • Verify the file format is supported
  • Try a smaller file size

AI Misinterprets Image

  • Add detailed text description
  • Annotate the image to highlight important areas
  • Use clearer, higher-quality screenshots

Cannot Find Image

  • Check if you're in the correct project
  • Use search/filter if available
  • Verify the image wasn't deleted

What's Next?