CoolFace
Apppublic

MCP-1st-Birthday/Video-Agent-MCP

sourceHugging Facemitupdated 10mo agoView on Hugging Face
1likes
App README

๐ŸŽฅ MCP Video Agent

๐Ÿ† MCP 1st Birthday Hackathon Submission

Track: MCP in Action - Consumer & Creative Categories Tech Stack: Gradio 6.0 + Gemini 2.5 Flash + ElevenLabs TTS + Modal + Context Caching


๐ŸŽฌ Demo Video

<video controls width="100%"> <source src="https://github.com/ycsmiley/mcp-video-agent/raw/main/MCPhackathon.mp4" type="video/mp4"> Your browser does not support video playback. <a href="https://github.com/ycsmiley/mcp-video-agent/raw/main/MCPhackathon.mp4">Download the video</a> </video>

Watch the Video Agent in action - upload a video, ask questions, and receive voice responses!


๐ŸŽฏ What Makes This Special?

An intelligent video analysis agent that combines multimodal AI, voice interaction, and smart context caching to create a natural conversation experience with your videos.

โšก Key Innovation: Smart Frame Caching

Unlike traditional video analysis that processes the entire video for every question, this agent uses Gemini's Context Caching to:

  1. 1.First Query: Uploads and deeply analyzes your video (5-10 seconds)
  2. 2.Subsequent Queries: Uses cached video context (2-3 seconds, 90% cost reduction!)
  3. 3.Smart Reuse: Cache persists for 1 hour - ask multiple questions without reprocessing

Real-world Impact: Turn a 10-minute video into a queryable knowledge base. Ask multiple questions in rapid succession, get instant answers with voice responses.


๐Ÿš€ Core Features

๐ŸŽฌ 1. Multimodal Video Analysis

  • โ€”Upload any video (MP4, max 100MB)
  • โ€”Powered by Gemini 2.5 Flash - Google's latest multimodal model
  • โ€”Understands visual content, actions, scenes, objects, and context

๐Ÿ—ฃ๏ธ 2. Voice-First Interaction

  • โ€”Natural language responses via ElevenLabs TTS
  • โ€”Audio-first experience (hear answers immediately)
  • โ€”Full text transcripts available on demand
  • โ€”Supports conversational follow-up questions

โšก 3. Intelligent Context Caching

  • โ€”First query: Deep video analysis with full context extraction
  • โ€”Follow-up queries: Lightning-fast responses using cached context
  • โ€”Cost optimization: 90% reduction in API costs for repeated queries
  • โ€”Automatic management: No manual cache setup required

๐Ÿ”Œ 4. MCP Server Integration

This application is designed to work as an MCP server for Claude Desktop and other MCP clients.

Note: The public MCP endpoint is currently disabled to prevent unauthorized API usage. If you need MCP access for evaluation, please contact the developer directly.

The primary way to use this application is through the HF Space Gradio interface.

๐Ÿ›ก๏ธ 5. Fair Usage & Rate Limiting

  • โ€”Built-in rate limiting (10 requests/hour per user)
  • โ€”100MB file size limit
  • โ€”Designed for responsible shared resource usage

๐ŸŽ“ How It Works

The Smart Caching Pipeline

1. Video Upload โ†’ Modal Volume (Persistent Storage)
                  โ†“
2. First Analysis โ†’ Gemini 2.5 Flash (Deep Processing)
                  โ†“
3. Context Cache โ†’ Stored for 1 hour (Automatic)
                  โ†“
4. Follow-up Questions โ†’ Instant responses from cache โšก
                  โ†“
5. TTS Generation โ†’ ElevenLabs (Natural Voice)

Why This Matters

Problem: Traditional video analysis processes the entire video for every single question, causing:

  • โ€”๐ŸŒ Slow response times (10-30 seconds per query)
  • โ€”๐Ÿ’ธ High API costs (full video processing each time)
  • โ€”๐Ÿ˜ซ Poor user experience for exploratory queries

Solution: Context Caching enables:

  • โ€”โšก Fast follow-up queries (2-3 seconds)
  • โ€”๐Ÿ’ฐ 90% cost reduction for subsequent questions
  • โ€”๐Ÿ˜Š Natural conversation flow with your videos

๐Ÿ“– Use Cases

For Consumers

  • โ€”๐Ÿ“บ Content Understanding: "What's the main message of this video?"
  • โ€”๐Ÿ” Scene Search: "At what point does the speaker mention AI?"
  • โ€”๐Ÿ“ Summarization: "Give me a 3-sentence summary"
  • โ€”๐ŸŽ“ Learning: Turn educational videos into interactive Q&A sessions

For Creatives

  • โ€”๐ŸŽฌ Content Analysis: Analyze video aesthetics, composition, and style
  • โ€”๐ŸŽจ Creative Inspiration: "What visual techniques are used here?"
  • โ€”๐Ÿ“Š Feedback: Get AI feedback on your video content
  • โ€”๐Ÿ”„ Iteration: Ask multiple questions to refine your understanding

๐Ÿ› ๏ธ Technical Architecture

Full Source Code

๐Ÿ“ฆ GitHub Repository: mcp-video-agent

๐Ÿ“– Detailed Architecture: See ARCHITECTURE.md for in-depth technical documentation

This HF Space contains the frontend application. The complete project includes:

  • โ€”hf_space/ - This Gradio frontend (you're looking at it!)
  • โ€”backend/ - Modal serverless backend (view on GitHub)
  • โ€”frontend/ - Alternative frontend for direct Modal integration

For Evaluators: All backend code and deployment instructions are available in the GitHub repository.

Tech Stack

  • โ€”Frontend: Gradio 6.0 with custom components
  • โ€”Backend: Modal for serverless compute
  • โ€”AI Models:
  • โ€”Gemini 2.5 Flash (multimodal video analysis + context caching)
  • โ€”ElevenLabs Multilingual v2 (neural TTS)
  • โ€”Storage: Modal Volume (persistent video storage)
  • โ€”Caching: Gemini Context Caching API (1-hour TTL)
  • โ€”Rate Limiting: In-memory rate limiter (10 req/hr per user)

Architecture Highlights

โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚  Gradio UI      โ”‚  โ† User uploads video + asks questions
โ”‚  (This Space)   โ”‚  โ† Rate limiting & session management
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
         โ”‚
         โ†“
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚  Modal Backend (Serverless Functions)   โ”‚
โ”‚                                          โ”‚
โ”‚  _internal_analyze_video():              โ”‚
โ”‚    โ€ข Upload video to Gemini Files API   โ”‚
โ”‚    โ€ข Create context cache (first query) โ”‚
โ”‚    โ€ข Use cached context (follow-ups)    โ”‚
โ”‚    โ€ข Return analysis text               โ”‚
โ”‚                                          โ”‚
โ”‚  _internal_speak_text():                 โ”‚
โ”‚    โ€ข Convert text to speech             โ”‚
โ”‚    โ€ข Store audio in Modal Volume        โ”‚
โ”‚    โ€ข Return audio file                  โ”‚
โ”‚                                          โ”‚
โ”‚  Modal Volume:                           โ”‚
โ”‚    โ€ข Persistent video storage           โ”‚
โ”‚    โ€ข Generated audio files              โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”ฌโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
         โ”‚
         โ†“
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚ Gemini 2.5 API  โ”‚  โ† Multimodal video analysis
โ”‚ Context Cache   โ”‚  โ† Automatic caching (min 1024 tokens)
โ”‚                 โ”‚  โ† 90% cost reduction on cache hits
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
         โ”‚
         โ†“
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚ ElevenLabs API  โ”‚  โ† Neural voice synthesis
โ”‚ Model: v2       โ”‚  โ† Multilingual support
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

Key Implementation Details

Backend Code (backend/modal_app.py):

python
# Context caching with Gemini
@app.function(timeout=600, volumes={"/data": vol})
def _internal_analyze_video(query: str, video_filename: str):
    # Upload to Gemini Files API
    video_file = client.files.upload(file=video_path)
    
    # Create cache (first query)
    cache = client.caches.create(
        model="gemini-2.5-flash",
        contents=[video_file, system_instruction],
        ttl="3600s"  # 1 hour
    )
    
    # Use cache for queries
    response = client.models.generate_content(
        model="gemini-2.5-flash",
        contents=[query],
        cached_content=cache.name  # Reuse cached context!
    )

Frontend Code (hf_space/app_with_modal.py):

python
# Rate limiting
class RateLimiter:
    def is_allowed(self, user_id):
        # Clean requests older than 1 hour
        # Check if under limit
        # Record new request
        return within_limit

# Modal function calls
analyze_fn = modal.Function.from_name("mcp-video-agent", "_internal_analyze_video")
text_response = analyze_fn.remote(query, video_filename=unique_filename)

Performance Metrics

MetricFirst QueryCached QueryImprovement
Response Time8-12s2-3s75% faster
API Cost$0.10$0.0190% cheaper
Token Usage~10,000~1,00090% reduction

๐Ÿ† Hackathon Submission Details

Categories

  • โ€”MCP in Action - Consumer Track: Practical video Q&A for everyday users
  • โ€”MCP in Action - Creative Track: Tool for content creators and analysts

Sponsor Technologies Used

  • โ€”โœ… Modal: Serverless backend infrastructure
  • โ€”โœ… Google Gemini: Multimodal AI + Context Caching
  • โ€”โœ… ElevenLabs: Neural text-to-speech
  • โ€”โœ… Gradio 6.0: Modern UI framework

Innovation Points

  1. 1.Smart Caching Strategy: Pioneering use of Gemini's Context Caching for video analysis
  2. 2.Voice-First UX: Natural conversation experience with videos
  3. 3.MCP Integration: Extensible as a tool for AI agents
  4. 4.Fair Usage Design: Built-in rate limiting for shared resources

โš™๏ธ Setup & Configuration

For Evaluators (Quick Test)

No setup needed! Just:

  1. 1.Upload a video (MP4, max 100MB)
  2. 2.Ask questions
  3. 3.Experience the caching speed on follow-up queries

For Developers (Self-Hosting)

Required Secrets (in Space Settings โ†’ Secrets):

  1. 1.`GOOGLE_API_KEY` (Required)
  2. 2.Get from Google AI Studio
  3. 3.Used for Gemini 2.5 Flash video analysis
  1. 1.`ELEVENLABS_API_KEY` (Optional but recommended)
  2. 2.Get from ElevenLabs
  3. 3.Used for voice synthesis
  4. 4.Without it, only text responses will be generated
  1. 1.`MODAL_TOKEN_ID` & `MODAL_TOKEN_SECRET` (For Modal backend)
  2. 2.Get from modal token new
  3. 3.Required if deploying with Modal backend
  1. 1.`MAX_REQUESTS_PER_HOUR` (Optional)
  2. 2.Default: 10 requests/hour per user
  3. 3.Adjust based on your usage needs

Duplicate for Personal Use

Want to use this without limits?

  1. 1.Click "Duplicate this Space" button
  2. 2.Add your own API keys in Settings โ†’ Secrets
  3. 3.Adjust rate limits as needed
  4. 4.You're good to go!

๐Ÿ“ฑ Social Media & Community

๐Ÿ“ Project Announcement

๐Ÿ”— LinkedIn Post

๐Ÿ’ฌ Discussions

Have questions or feedback? Visit the Discussions tab on this Space!

๐Ÿ‘ฅ Team


๐Ÿ“Š Project Stats

  • โ€”Built in: MCP 1st Birthday Hackathon (Nov 14-30, 2024)
  • โ€”Tech Stack: 5 integrated technologies
  • โ€”Performance: 90% cost reduction, 75% speed improvement
  • โ€”License: MIT Open Source

๐Ÿ™ Acknowledgments

Sponsors & Technologies

  • โ€”๐Ÿš€ Modal - Serverless infrastructure
  • โ€”๐Ÿค– Google Gemini - Multimodal AI + Context Caching
  • โ€”๐Ÿ—ฃ๏ธ ElevenLabs - Neural voice synthesis
  • โ€”๐ŸŽจ Gradio - UI framework
  • โ€”๐Ÿค— Hugging Face - Hosting platform

Special Thanks

  • โ€”MCP 1st Birthday Hackathon organizers
  • โ€”The Gradio team for excellent documentation
  • โ€”The open-source community

๐Ÿ“„ License

MIT License - See LICENSE file for details.

Open source and free to use, modify, and distribute!