Media Showcase
Display media files prominently in the conversation with large previews.
Tool Description
Display media files prominently in the conversation with large previews.
## When to Use This Tool
Use for displaying/viewing media files:
1. Visual Display Requests:
- "Show me the image", "Display this video", "Let me see the file"
- "Preview the media", "View this content", "Present the file"
- Showcasing completed creative outputs and deliverables
2. File Presentation (not content analysis):
- When users want to SEE the actual media file
- Presenting finished work or creative deliverables
- Showing examples and reference materials for visual context
3. After Media Processing Tasks - Display media outputs from:
- Video editing (trimming, effects, filters, color correction, edited clips)
- Image processing (enhancement, filters, transformations, processed images)
- Audio processing (mixing, effects, mastering, processed audio)
- Video creation/editing (marketing videos, montages, edited clips)
- Image generation/processing (posters, logos, processed images)
- Audio production (soundtracks, voice-overs, audio effects)
- Multi-media projects and complete deliverables
- Exporting videos
4. Video Highlights - Display video segments with timestamps instead of creating separate files
## When NOT to Use This Tool
Skip using this tool when:
1. Content Analysis Requests: "What's in this image?", "Describe this file", "Analyze this"
2. Information Extraction: "Explain what you see", "What does this show?"
3. File doesn't exist: Media file paths are invalid or inaccessible
4. Non-media content: Documents, data files, or other non-visual/audio content
## Examples of When to Use Media Showcase
<example>
User: Show me /Users/project/assets/logo.png
Assistant: Let me display that image for you.
*Uses media_showcase tool with:*
- Path: /Users/project/assets/logo.png
- Type: image
- Title: Project Logo
- Description: Current logo file from assets folder
</example>
<example>
User: Create a 30-second marketing video for our product
Assistant: [After performing video creation steps, gathering assets, editing clips, adding music, and rendering the final output]
I've successfully created your marketing video. Let me showcase the final result.
*Uses media_showcase tool with:*
- Path: /output/video/product_marketing_20241201_143022.mp4
- Type: video
- Title: Product Marketing Video
- Description: 30-second promotional video with product highlights and call-to-action
</example>
<example>
User: I need to see the reference audio file before we start editing
Assistant: I'll display the reference audio file so you can review it.
*Uses media_showcase tool with:*
- Path: /Users/project/references/background_music.mp3
- Type: audio
- Title: Reference Background Music
- Description: Original audio file for editing reference
</example>
<example>
User: Create a GSAP animation with bouncing text saying "AMAZING!"
Assistant: [After configuring the GSAP animation]
I've created a dynamic GSAP animation for you.
*Uses media_showcase tool with:*
- Type: gsap_animation
- Title: AMAZING Text Animation
- Description: TikTok-style bouncing text with bold styling
- Config: {
"url": <iframe_url>,
"animationType": <animation_name>
}
</example>
<example>
User: Give me three 5-second highlights from this demo video
Assistant: I've identified key segments from your demo video.
*Uses media_showcase tool with:*
- Type: video, Title: "Product Overview", Path: /Users/project/demo.mp4, StartTime: 15, Duration: 5
- Type: video, Title: "UI Walkthrough", Path: /Users/project/demo.mp4, StartTime: 85, Duration: 5
- Type: video, Title: "Results", Path: /Users/project/demo.mp4, StartTime: 130, Duration: 5
</example>
## Parameters
outputs (required): Array of media outputs to showcase
- path: Absolute file path (required except for gsap_animation). For video/audio segments, this is the source media file
- type: "image", "video", "audio", or "gsap_animation"
- title: Display title
- description: Project context (optional)
- config: Animation configuration JSON (required for gsap_animation)
- startTime: Start time in seconds for video/audio segments (optional)
- duration: Duration in seconds for video/audio segments (optional)
**Description Field Notes:**
- Use for WHY you're showing the media, not WHAT'S IN it
- Examples: "Reference for redesign", "Generated as requested", "Option 1"
- Never describe media content - that's not the purpose of this tool
## Tool Behavior
1. Validates all file paths - Ensures files exist and are accessible
2. Checks file extensions - Verifies extensions match the specified media type
3. Groups video highlights from same source into unified playback with timestamp navigation
4. Frontend Integration - Media outputs are displayed prominently with large previews
## Usage Notes
- Always use absolute paths - Relative paths will be rejected
- Include meaningful titles - Help users understand what they're viewing
- Add descriptions for context - Especially useful for complex or reference materials
- Multiple outputs supported - Display multiple related media files at once
- Use for any media display - Not limited to creative outputs; great for previews and references
- For `gsap_animation` type, the config MUST include a `url` field with the complete iframe URL in the format: `"http://localhost:3000/<animation_name>?param1=value1¶m2=value2"`
This tool transforms file paths into beautiful media displays in the conversation interface.