Asset Management

vly.ai's asset management system allows you to upload files and seamlessly integrate them into your projects through an intuitive @-mention system.

Uploading assets

Supported file types

• Images: JPG, PNG, GIF, SVG, WebP
• Documents: PDF, DOC, DOCX, TXT, MD
• Media: MP4, MP3, WAV (for web-compatible formats)
• Data: JSON, CSV, XML
• Archives: ZIP (contents are extracted)

File size limits

• Maximum file size: 15MB per file
• Unlimited uploads for active projects
• Automatic optimization for web delivery

Upload process

1. Navigate to the Assets tab in your project
2. Click "Upload Assets" or drag files into the upload area
3. Select multiple files to upload in batches
4. Add descriptions to help identify files later
5. Files are automatically processed and optimized

Asset organization

Automatic organization

Assets are automatically organized in your project:

• File location: public/assets/ directory
• Web-accessible: Available at /assets/filename
• Conflict resolution: Duplicate names get unique identifiers
• Metadata tracking: Size, type, upload date automatically recorded

Asset library

The Assets tab provides:

• Visual thumbnails for images and documents
• File information including size, type, and upload date
• Search functionality to find specific assets
• Batch operations for managing multiple files
• Usage tracking to see where assets are referenced

@-mention functionality

Use the @-mention system to reference uploaded assets:

"Use @logo.png as the header logo and @hero-image.jpg as the background"
"Add the content from @product-specs.pdf to the product detail page"
"Create a gallery using @photo1.jpg, @photo2.jpg, and @photo3.jpg"

Autocomplete support

When you type @ in the chat:

• Asset suggestions appear automatically
• Type to filter by filename
• Select from dropdown or continue typing
• Multiple references supported in single messages

Asset context for AI

When you reference assets with @-mentions:

• AI analyzes content automatically (images, documents)
• Extracts relevant information for implementation
• Suggests appropriate usage based on file type
• Handles optimization and web formatting

Asset usage patterns

Images

"Use @background.jpg as a hero section background with overlay text"
"Create a product gallery with @product1.jpg, @product2.jpg, @product3.jpg"
"Add @icon-set.zip icons throughout the interface for navigation"

Documents

"Extract the content from @privacy-policy.pdf and create a legal page"
"Use the data in @customer-testimonials.json for the testimonials section"
"Import the team information from @team-bios.csv"

Media files

"Add @intro-video.mp4 as an autoplay background video on the landing page"
"Include @notification-sound.mp3 for chat message alerts"

Best practices

File naming

• Use descriptive names that clearly indicate content
• Avoid spaces in filenames (use hyphens or underscores)
• Include version numbers for iterative assets
• Group related files with consistent prefixes

Good examples:

• hero-background-v2.jpg
• product-icon-shopping-cart.svg
• team-member-john-doe.jpg

File optimization

• Compress images before uploading when possible
• Use appropriate formats (SVG for icons, JPG for photos)
• Consider file sizes for web performance
• Remove unnecessary metadata from files

Organization strategies

• Upload related assets together in batches
• Add descriptions to complex or similar files
• Regular cleanup of unused assets
• Document asset relationships in project notes

Asset management interface

File operations

Available actions for each asset:

Bulk operations

Manage multiple assets simultaneously:

• Select multiple files with checkboxes
• Batch delete unused assets
• Export asset list with metadata
• Import assets from other projects

Search and filtering

Find assets quickly with:

• Text search by filename or description
• Filter by type (images, documents, media)
• Sort by date uploaded or file size
• View options (grid, list, detailed)

Troubleshooting assets

Common upload issues

File too large (>15MB):

• Compress images or videos before uploading
• Split large documents into smaller sections
• Use external hosting for very large media files

Unsupported file type:

• Convert to supported formats
• ZIP unsupported files if needed for reference
• Use web-compatible formats when possible

Upload failures:

• Check internet connection stability
• Try uploading files one at a time
• Clear browser cache and try again
• Contact support if problems persist

Asset not found in @-mentions

• Ensure file upload completed successfully
• Check filename spelling and case sensitivity
• Wait a moment for indexing after upload
• Refresh the page if autocomplete isn't working

The asset management system is designed to make file handling seamless and intuitive, allowing you to focus on building rather than managing resources.