AI Video Analyzer for Content Creators

Build an AI web app that analyzes videos for hooks, clips, and captions.

Introduction

30 Second Summary

Content creators film hours of video, but only a few seconds go viral. Knowing which moments hook viewers, which clips fit each platform, and what captions drive engagement is the difference between blowing up and being ignored.

In this project, you will build an AI-powered video analyzer that watches your footage and instantly delivers hook scores, best clip timestamps, and platform-ready captions for TikTok, Instagram Reels, and YouTube Shorts.

What You'll Build

Imagine dropping a video into your browser, clicking one button, and getting back a complete breakdown: hook scores, clip recommendations with exact timestamps, and copy-paste captions tailored to each social platform.

By the end of this project, you'll have:

  • A working web app where you upload any video file or paste a YouTube URL and receive a full AI analysis with hook scores, UGC scores, and viral potential ratings.
  • A clip length selector and analysis mode picker that give you precise start/end timestamps ready for editing in any video tool.
  • Platform-specific captions, CTAs, and hashtags formatted for TikTok, Instagram Reels, and YouTube Shorts that you can copy with one click.
  • Auto-generated professional file names following industry naming conventions so your exports stay organized.
  • Secret Mission: Add product image upload as a visual reference so Gemini factors your brand into every caption and timestamp it generates.

Are there any prerequisites?

You need a Google AI Studio account (free to create at aistudio.google.com). No other tools are needed before you start. The project walks you through installing everything else, including Cursor and Node.js.

Before We Start

Before we dive in, let's lock in what you're about to build and why it matters. You're committing to a working AI video analyzer that content creators can use to extract hooks, clips, and captions from any video.

Set Up Your Development Environment

Your video analyzer needs three foundations before you can write a single line of code. An AI-powered code editor to write and generate code, a JavaScript runtime to execute it, and an API key that connects you to Gemini's video intelligence.

In this step, you'll install Cursor and Node.js, then create a free Gemini API key. Once all three are in place, you're ready to start building.

In this step, get ready to:
  • Install Cursor, your AI-powered code editor.
  • Install Node.js to run JavaScript.
  • Create a free Gemini API key for video analysis.
Install Cursor

Cursor is a code editor built on VS Code that can generate and edit code using AI. It's your main workspace for this entire project.

  • Open your browser and go to cursor.com/download.
  • Click the download button for your operating system (.exe for Windows, .dmg for macOS).
  • Open the downloaded file and follow the install steps for your OS.
  • On macOS, drag Cursor into your Applications folder.
  • On Windows, run the installer and follow the prompts.

Windows SmartScreen warning

On Windows, you may see a SmartScreen popup saying the app is unrecognized. This is normal for newer releases. Click More info, then Run anyway to continue. The installer is code-signed by Anysphere, Inc.

  • Once installed, open Cursor by pressing Cmd+Space (macOS) or the Windows key (Windows) to open search.
  • Type Cursor and press Enter to open it.
  • When prompted, sign up for a free Cursor account and sign in.

You should see the Cursor welcome screen or an empty editor window. Cursor is ready to go.

Seeing a blank screen or Cursor won't open?

  • On Windows, try right-clicking the Cursor shortcut and selecting Run as administrator.
  • On macOS, if you see a "Cursor is damaged" warning, move Cursor to Trash, re-download from cursor.com/download, and try again.
  • Why won't Cursor open on my machine?
Install Node.js

Node.js is the JavaScript runtime that powers your app behind the scenes. Your project needs it to run the Next.js framework and communicate with the Gemini API.

  • Open your browser and go to nodejs.org.
  • Click the LTS download button (this gives you the stable, long-term support version).
  • Run the downloaded installer and accept all the default options.

Now verify that Node.js is working inside Cursor. What do you expect to see when you check the version of something you just installed?

  • Switch back to Cursor.
  • Open the integrated terminal by pressing Ctrl+` (that's the backtick key, above Tab).
  • Verify your Node.js installation by running this command:
node --version

✔️ I see v22 or higher (v22.x.x, v24.x.x, or v26.x.x)

Node.js is installed and ready. You have a supported version for this project.

ⓧ I see an older version (v20 or below)

Your version is too old. Node.js v20 reached end-of-life in March 2026, so you need to upgrade.

  • Go back to nodejs.org and click the LTS download button.
  • Run the new installer. It will replace your old version automatically.
  • Close and reopen Cursor's terminal, then run node --version again to confirm you see v22 or higher.

ⓧ Command not found

Node.js didn't install correctly, or your terminal can't find it yet.

  • Go to nodejs.org and click the LTS download button.
  • Run the installer and accept all defaults. Make sure the option to add Node to your PATH is checked (it is by default).
  • After the installer finishes, close Cursor completely and reopen it.
  • Open a new terminal with Ctrl+` and run node --version again.

Still not working after reinstall?

On Windows, try opening a fresh terminal outside Cursor (search for "Command Prompt") and run node --version there. If it works outside Cursor but not inside, restart your computer to refresh all PATH variables.

Create your Gemini API key

An API key is like a password that lets your app talk to Gemini. Google provides free access to Gemini's video analysis through their AI Studio platform.

  • Open your browser and go to aistudio.google.com.
  • Sign in with your Google account.
  • Click Get API key in the left sidebar.
  • Click Create API key.
  • Copy the key that appears on screen.
  • Save it somewhere safe, like a text file or a notes app on your computer.

Keep your API key private

Treat your API key like a password. Never share it publicly, commit it to a Git repository, or paste it in a chat. You'll add it to a private file in your project in the next step.

What is an API key?

An API key identifies your app to a service. When your video analyzer sends a video to Gemini, the API key proves you have permission to use the service. Google's free tier gives you generous access at no cost.

Your development environment is fully set up. You have Cursor open, Node.js verified, and a Gemini API key saved. Next up, you'll use Cursor's AI agent to scaffold your entire Next.js app from a single prompt.

Scaffold Your Next.js App with Cursor

With your tools installed, you need a running app before you can add any AI features. Right now you have an empty workspace.

In this step, you will use Cursor's AI Agent to scaffold a complete Next.js project from a single instruction. The Agent handles all the setup commands for you, so you get an immediate visible result without memorising boilerplate.

In this step, get ready to:
  • Scaffold a Next.js app with TypeScript and Tailwind CSS using Cursor's Agent.
  • Run the dev server and see your app at localhost:3000.
  • Store your Gemini API key and install the AI SDK.
Create your project folder and scaffold with Cursor

Cursor's Agent can generate an entire project from a natural-language instruction. You give it a goal, and it writes the code and runs the terminal commands.

  • In Cursor's terminal, move to your Desktop by running this command:
cd ~/Desktop
  • Create your project folder and move into it by running these commands:
mkdir video-analyzer
cd video-analyzer
  • Open this folder in Cursor by clicking File in the top menu bar.
  • Click Open Folder.
  • Navigate to your Desktop, select the video-analyzer folder, and click Open.

Why open the folder this way?

Opening a folder in Cursor sets it as the project root. The Agent, file explorer, and terminal all work relative to this folder from now on.

  • Open Cursor's Agent by pressing Cmd+I (macOS) or Ctrl+I (Windows).
  • Type the following instruction into the Agent panel and press Enter:
Create a new Next.js app with TypeScript and Tailwind CSS. Initialize it in this folder.
  • Cursor will ask for permission to run terminal commands. Click Allow when prompted.

What is Cursor doing?

Cursor's Agent runs npx create-next-app behind the scenes. It automatically picks TypeScript and Tailwind CSS based on your instruction, handles any interactive prompts, and installs all the default dependencies.

You will see files appearing in the Explorer panel on the left as the scaffold completes. This usually takes 30 to 60 seconds depending on your internet speed.

Once the Agent finishes, you should see project files like package.json, app/, and tailwind.config.ts in the Explorer panel.

Agent not running commands?

If Cursor's Agent describes the steps but does not run them, make sure you selected Agent mode (not Ask mode) at the top of the panel. You can switch modes by clicking the dropdown at the top of the Agent panel.

If npx fails with a "command not found" error, your terminal may not have picked up the Node.js installation yet. Close the terminal panel and reopen it with Ctrl+` to refresh the PATH.

help me troubleshoot Cursor Agent not running scaffold commands

Run the development server

Your project files are in place. Time to start the app and see it running in the browser.

  • Before you run this, what do you think you will see at localhost:3000?
  • Start the development server by running this command in Cursor's terminal:
npm run dev
  • Open your browser and go to http://localhost:3000.

You should see the default Next.js starter page with the Next.js logo and some welcome text. This confirms your scaffold worked correctly.

Page not loading?

If the browser shows "This site can't be reached", check that the terminal still shows the dev server running. Look for a line like Ready in followed by a time.

If port 3000 is already in use, the terminal will show a different port (like 3001). Use whatever URL the terminal prints.

help me get my Next.js dev server running

Store your API key and install the Gemini SDK

Your app needs access to the Gemini API to analyze videos. Environment variables keep your API key out of your code so you never accidentally share it.

  • In Cursor's Explorer panel, right-click on the project root and select New File.
  • Name the file .env.local and press Enter.
  • Add your API key to the file by pasting this line, replacing the placeholder with your actual key:
GEMINI_API_KEY=your-api-key-here

What is .env.local?

Next.js automatically reads .env.local and makes its values available to your server-side code through process.env. The .local suffix tells Git to ignore this file, so your key stays on your machine.

  • Save .env.local by pressing Cmd+S (macOS) or Ctrl+S (Windows).
  • Open a new terminal tab (the dev server is using the current one) by pressing Ctrl+Shift+`.
  • Install the Google GenAI SDK by running:
npm install @google/genai

You should see output confirming the package was added. The terminal will print a line showing @google/genai was added to your package.json dependencies.

Install command failing?

Make sure your new terminal tab is in the video-analyzer folder. Run pwd to check your location. If you are not in the project folder, run cd ~/Desktop/video-analyzer first.

help me install the @google/genai npm package

✔️ Awesome, I've got everything!

Great. Double check you have saved .env.local and that your dev server is still running in the first terminal tab.

ⓧ I'd like to double check the full code

Your .env.local file should contain exactly one line:

GEMINI_API_KEY=your-api-key-here

Confirm the install worked by checking your project has these items:

  • package.json lists @google/genai under dependencies.
  • A node_modules folder exists in the project root.
  • The dev server is running at http://localhost:3000 and showing the default Next.js page.

Your app skeleton is live and your AI credentials are in place. Next up, you will build the upload interface where content creators drop their videos and choose analysis settings.

Build the Upload Interface and Mode Selection

Your Next.js app is scaffolded and running at localhost:3000. Right now it still shows the default starter page, which tells you nothing about video analysis.

Every content tool needs a front door. In this step, you'll use Cursor's Agent to build the full upload interface where creators provide a video and choose their analysis settings.

In this step, get ready to:
  • Replace the default homepage with a video analyzer interface.
  • Add file upload and YouTube URL input options.
  • Add clip length and analysis mode selectors.
Prompt Cursor to build the video analyzer interface

The default Next.js homepage is a generic welcome screen. You need a purpose-built form that accepts video input, lets creators pick their clip length, and offers different analysis modes.

Cursor's Agent can generate all of this from a single detailed prompt. The more specific your prompt, the closer the output matches what you want on the first try.

  • In Cursor, press Cmd+I (macOS) or Ctrl+I (Windows) to open the Agent panel.
  • Paste the following prompt into the Agent input:
Replace the homepage with a video analyzer interface. It should have: a drag-and-drop file upload area that accepts video files, a text input for YouTube URLs, a row of buttons to select clip length (15s, 30s, 45s, 60s, Original), and mode selection buttons (Captions Only, Smart Edit, Create Clips). Use a dark theme with purple/blue accents. Make it mobile-responsive. Add an Analyze button that is disabled until a video source is provided.

What does this prompt ask Cursor to do?

You're giving Cursor a single instruction that covers the entire UI for your app's first screen. It specifies six things:

  • A drag-and-drop zone for video file uploads.
  • A text input for pasting YouTube URLs as an alternative video source.
  • Clip length buttons so the creator can choose how long their output clips should be.
  • Mode buttons that control what type of analysis Gemini will perform.
  • A dark theme with purple/blue accents for visual style.
  • An Analyze button that stays disabled until the user provides a video source.
  • Press Enter to send the prompt.
  • Wait for Cursor to generate the code. You'll see it creating or modifying files in real time.
  • Review what Cursor generates. Look for the file app/page.tsx in the changes.
  • Click Accept to apply the changes to your project.

Cursor generated something unexpected?

AI-generated code varies between runs. If the output looks different from what you expected, you can click Reject and try again with the same prompt. You can also add follow-up prompts to refine the output, like "Make the upload zone larger" or "Change the accent color to more purple."

Test the interface in your browser

Your dev server is still running from the previous step. Every time you save a file, Next.js automatically refreshes the page with your latest changes.

Before you check the browser, what do you think you'll see at localhost:3000 now? The default Next.js page, or something new?

  • Switch to your browser and open http://localhost:3000.
  • Confirm that the default Next.js starter page is gone. You should see your new video analyzer interface with a dark-themed layout.
  • Try dragging a video file onto the upload zone. The zone should respond visually to your drag action.
  • Try typing a URL into the YouTube URL input field.
  • Click each clip length button (15s, 30s, 45s, 60s, Original). One should appear selected at a time.
  • Click the mode buttons (Captions Only, Smart Edit, Create Clips). One should appear selected at a time.
  • Check the Analyze button. It should be disabled (greyed out) when no video source is provided.
  • Provide a video source (upload a file or type a URL). The Analyze button should become enabled.

Interface not showing up?

  • Make sure you clicked Accept in Cursor's Agent panel. Rejected or pending changes won't save to disk.
  • Check that your terminal still shows the dev server running. If it stopped, run npm run dev again.
  • If the page looks broken or shows an error, read the error message in the browser. You can paste it back into Cursor's Agent and ask it to fix the issue.

Help me fix my video analyzer interface - it's not rendering correctly after Cursor generated it.

Your video analyzer now has a front door. Creators can upload a file, paste a YouTube URL, and pick their analysis settings. Next up, you'll wire the Analyze button to the Gemini API and send your first video for AI analysis.

Connect to Gemini and Send Your First Video

Your video analyzer has a polished interface with upload, URL input, and mode selection. Now it's time to wire up the brain: Google's Gemini AI model that can actually watch and understand video content.

In this step, you'll create a server-side API route that sends video to Gemini and pipes the response back to your interface. The first result will be raw, unstructured text. That's intentional and reveals exactly why structured prompting matters in the next step.

In this step, get ready to:
  • Create an API route that sends video to Gemini for analysis.
  • Connect the Analyze button to your new API route.
  • See your first AI-generated video analysis (raw and messy on purpose).
Create the API route with Cursor

Your frontend needs somewhere to send the video for processing. In Next.js, API routes live inside the app/api/ directory and handle server-side logic like talking to external APIs.

  • In Cursor's Agent panel, paste the following prompt to create your API route:
Create an API route at /api/analyze that: accepts a video file upload (using Next.js built-in body parsing) OR a YouTube URL, sends it to the Gemini API using the @google/genai SDK with model gemini-3.6-flash, and returns the response. For file uploads, read the file and send it as inline data. For YouTube URLs, pass the URL directly to Gemini (it supports YouTube URLs natively). Use a basic prompt like: 'Analyze this video for social media content creation. Identify hooks, key moments, topics, products, and suggest captions.' Store the API key from process.env.GEMINI_API_KEY.

What is Cursor building for you?

Cursor will create a new file at app/api/analyze/route.ts that handles POST requests. Inside, it:

  • Reads your GEMINI_API_KEY from the environment variables in .env.local.
  • Accepts either a video file (sent as inline data for files under 100MB) or a YouTube URL.
  • Sends the video to Gemini's gemini-3.6-flash model with a basic analysis prompt.
  • Returns Gemini's raw text response back to the frontend.
  • Accept the changes Cursor generates.
  • Confirm the file was created by checking your file explorer sidebar for app/api/analyze/route.ts.

Don't see the route.ts file?

  • Make sure you accepted all of Cursor's changes by clicking **Accept** or pressing the keyboard shortcut shown in the Agent panel.
  • Check that the file is at app/api/analyze/route.ts (not pages/api/). The App Router uses the app/ directory.

Ask Cursor for help: Why didn't my API route file get created at app/api/analyze/route.ts?

Connect the frontend to your API route

The API route exists, but the Analyze button doesn't know about it yet. You need to wire the frontend to send the video data to your new route and display whatever comes back.

  • In Cursor's Agent panel, paste this prompt to connect everything:
Connect the frontend Analyze button to the /api/analyze route. When the user clicks Analyze, send the uploaded video file or YouTube URL to the API route as a POST request. Show a loading spinner while waiting for the response. Display the raw response text below the form when it returns.

What does this change?

Cursor updates your app/page.tsx to add a fetch call when the Analyze button is clicked. It packages the video file or URL into a request body, sends it to /api/analyze, and renders the response text on the page.

The loading spinner gives the user feedback while Gemini processes the video. Video analysis can take several seconds depending on the length.

  • Accept the changes Cursor generates.
  • Save all modified files.
  • Open your browser at http://localhost:3000 and click the **Analyze** button without providing a video. You should see a loading spinner appear briefly (or an error message if validation prevents empty submissions).

Page not updating after changes?

  • Check that your dev server is still running in the terminal. If it stopped, run npm run dev again.
  • Hard-refresh your browser with **Ctrl+Shift+R** (Windows) or **Cmd+Shift+R** (macOS) to clear cached assets.

Ask Cursor for help: My frontend changes aren't showing up in the browser after I accepted Cursor's edits.

Test with a real video

Everything is wired up. Time to send an actual video to Gemini and see what comes back.

  • Find a short video file on your computer (under 30 seconds works best for a quick test). Alternatively, paste a public YouTube URL into the URL input field.
  • Select any clip length and any mode from the buttons on the page.

Before you click Analyze, think about this: what format do you expect the AI's response to come back in? Do you think it will be neatly organized, or something messier?

  • Click the **Analyze** button.
  • Wait for the loading spinner to finish (this may take 10-30 seconds depending on video length).

You should see a wall of unstructured text appear below the form. Gemini analyzed the video, but the response is a messy paragraph mixing topics, hooks, timestamps, and suggestions all jumbled together.

Why is the output so messy?

This is the designed obstacle. Without structured prompting, Gemini returns free-form text that's impossible to parse programmatically. You can't build copy buttons, score badges, or tabbed views from a wall of prose.

In the next step, you'll rewrite the prompt to demand clean JSON output with specific fields. That transforms this unusable blob into structured data your UI can display beautifully.

Seeing an error instead of text?

  • If you see a message about an invalid API key, double-check your .env.local file contains GEMINI_API_KEY= followed by the key you copied from Google AI Studio. Restart your dev server after editing environment files.
  • If the request times out, your video may be too large. Try a shorter clip (under 20 seconds) or use a YouTube URL instead.
  • If you see a network error, make sure your dev server is running and the route is at app/api/analyze/route.ts (check for typos in the path).

Ask Cursor for help: I'm getting an error when I click Analyze instead of seeing Gemini's response.

You've proven that Gemini can watch and analyze video. The raw output confirms the AI understands your content. Next up, you'll transform that messy wall of text into clean, structured data with scores, timestamps, and platform-specific captions.

Structure the AI Output with Advanced Prompting

In the last step, you sent a video to Gemini and got a response. But that response was a wall of unstructured text with no consistent format.

A real content creation tool needs predictable, structured data. Scores need to be numbers. Timestamps need a consistent format. Captions need to be separated by platform. In this step, you'll use advanced prompting to transform Gemini's output into clean JSON that your frontend can parse and display beautifully.

In this step, get ready to:
  • Rewrite the Gemini prompt to request structured JSON with scores, timestamps, and platform-specific content.
  • Update the frontend to display results in a tabbed panel with copy buttons.
  • Test the full structured analysis with a video.
Rewrite the Gemini prompt for structured output

The current prompt says "analyze this video" and lets Gemini decide how to format its answer. Structured prompting flips this. You tell Gemini exactly what fields to return and in what format.

  • Switch to Cursor's Agent and paste the following prompt:
Rewrite the Gemini prompt in the /api/analyze route to request structured JSON output. The prompt should instruct Gemini to analyze the video and return a JSON object with these fields:

- hookScore (1-10)
- ugcScore (1-10)
- hooks (array of {text, timestamp, score})
- bestClips (array of {startTime, endTime, description, viralPotential} filtered to match the user's selected clip length)
- topics (array)
- products (array of mentioned/shown products)
- captions (object with tiktok, instagram, youtube keys each containing caption, ctas, hashtags)
- fileName (professional campaign file name following the pattern: platform_creator-type_topic_duration_date)

Include the user's selected clip length and mode in the prompt so Gemini tailors its response. Use Gemini's JSON response mode if available, or instruct it to return only valid JSON.

Also update the frontend to send the selected clip length and mode to the API route.

What does this prompt ask Cursor to do?

  • It rewrites the generic prompt into one that demands a specific JSON shape from Gemini.
  • The hookScore and ugcScore give numeric ratings the UI can display as badges.
  • The bestClips array uses MM:SS timestamps that match how Gemini reports video positions.
  • The fileName field follows a professional naming convention so exported clips have meaningful names.
  • Review the changes Cursor generates. You should see the API route now builds a detailed prompt string and passes clip length and mode from the request body.
  • Accept the changes in Cursor.

Cursor generated something different?

If Cursor only partially updated the route or missed the clip length parameter, paste the prompt again and add: "Make sure the API route reads clipLength and mode from the request body and includes them in the Gemini prompt."

If Cursor created a new file instead of editing the existing route, tell it: "Edit the existing file at app/api/analyze/route.ts instead of creating a new one."

Need more help? Why isn't Cursor updating my API route correctly?

Update the frontend to display structured results

Now that the API returns JSON instead of plain text, your frontend needs a proper interface to display scores, clips, and captions in an organized way.

  • In Cursor's Agent, paste the following prompt:
Update the frontend to parse the JSON response and display it in a tabbed results panel. Create tabs for:

1. Overview - show hookScore and ugcScore as colored badges (green for 7+, yellow for 4-6, red for 1-3)
2. Best Clips - cards showing startTime and endTime in MM:SS format with a copy button for each clip
3. Captions - sub-tabs for TikTok, Instagram, and YouTube Shorts, each showing the caption, CTAs, and hashtags with copy-to-clipboard buttons
4. File Name - displayed prominently with a copy button

Make sure the Analyze button sends the selected clip length and mode in the request body. Keep the dark theme with purple/blue accents. Make it mobile-responsive.

What will this generate?

Cursor will replace the raw text display with a tabbed interface. Each tab surfaces a different part of the structured JSON response.

The copy buttons let creators grab captions and timestamps directly into their clipboard for pasting into social media apps.

  • Review the changes Cursor generates. You should see new tab components and copy-to-clipboard logic.
  • Accept the changes in Cursor.
  • Save all modified files.

Tabs not rendering correctly?

If Cursor's output has import errors or missing components, tell it: "Fix any import errors in app/page.tsx and make sure all tab components are defined in the same file or properly imported."

If the styling looks broken, tell Cursor: "Make sure all Tailwind classes are valid and the tab switching logic uses React state."

Still stuck? Help me fix my tabbed results panel in Next.js

Test the full structured analysis

Both the backend prompt and frontend display are updated. Time to see everything working together.

  • Make sure your dev server is still running. If it stopped, run this in the terminal:
npm run dev
  • Open http://localhost:3000 in your browser.
  • Upload the same short video you used in the previous step (or paste a public YouTube URL).
  • Select a clip length (try 30s) and a mode (try Smart Edit).
  • Click Analyze.

Before the results load, what do you think you'll see this time compared to the wall of text from the last step?

After a few seconds, you should see a tabbed results panel appear. Click through each tab to confirm:

  • Overview tab shows a hook score and UGC score as colored badges (numbers from 1 to 10).
  • Best Clips tab shows cards with start and end timestamps in MM:SS format.
  • Captions tab has sub-tabs for TikTok, Instagram, and YouTube Shorts, each with a caption, CTAs, and hashtags.
  • File Name tab shows a professional campaign file name with a copy button.

What changed from last time?

In the previous step, Gemini returned free-form text because the prompt didn't specify a format. Now, the structured prompt tells Gemini exactly what JSON shape to return. The frontend parses that JSON and routes each field to the correct tab.

This is the power of structured prompting. The same AI model produces dramatically more useful output when you constrain its response format.

  • Try the copy buttons on a caption or clip timestamp to confirm they copy to your clipboard.
  • Try a different clip length or mode and click Analyze again to see how the output changes.

Seeing an error or empty results?

If you see a JSON parse error, Gemini may have returned text instead of valid JSON. Tell Cursor: "Add error handling in the API route. If the Gemini response is not valid JSON, try to extract JSON from the response text using a regex, or return a helpful error message."

If scores show as 0 or clips are empty, the video may be too short for meaningful analysis. Try a video that is at least 15 seconds long with speech or visible action.

If the page crashes on load, check the terminal for errors. Tell Cursor: "Fix any runtime errors in the console related to parsing the API response."

Need help? My video analyzer is showing errors when parsing Gemini's response

Your video analyzer is now fully functional. Creators can upload any video, pick their settings, and get structured analysis ready for real content workflows. Next up, you'll tackle a secret mission to add product image references for brand-consistent analysis.

Secret mission

Add Product Image Reference

Content creators need brand consistency across every video they post. What if your analyzer could see the actual product and tailor its entire analysis around it? In this secret mission, you'll add product image upload so Gemini can identify when the product appears, note timestamps, and generate product-focused captions and CTAs.

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs entirely locally with the Gemini free tier, so there are no ongoing costs.

Resources you used:

  • Your video analyzer project folder on your Desktop (Next.js app, all source code, and .env.local file).
  • A Google Gemini API key stored in Google AI Studio (free tier, no charges for standard usage).

Keep everything running

No action needed. Choose this if you're still actively building or plan to extend this project into the Video Export Engine (Project 2).

  • Your project folder stays on your Desktop. Run npm run dev anytime from your project folder to start the app again.
  • Your Gemini API key stays active in Google AI Studio. The free tier has no charges for standard usage.
  • Cursor and Node.js remain installed on your machine for future projects.

Pause - I'll come back to this later

Close Cursor and free up memory. Nothing is running in the background once you close the editor.

  • Close the Cursor window. The dev server stops automatically when the terminal closes.
  • Your project folder and API key remain untouched and ready for next time.

Delete - I don't want to use this again

Remove all project files and revoke your API key to start completely fresh.

  • Close Cursor if it's still open.
  • Delete your project folder from the Desktop. On macOS/Linux, open a terminal and run the command below. On Windows, open PowerShell and use the Windows command below.

macOS

  • Delete the project folder by running:
cd ~/Desktop
rm -rf your-project-folder-name

Replace your-project-folder-name with the actual name of the folder you created in Step 2.

Windows

  • Delete the project folder by running:
cd ~\Desktop
Remove-Item -Recurse -Force your-project-folder-name

Replace your-project-folder-name with the actual name of the folder you created in Step 2.

  • Delete your Gemini API key. Go to aistudio.google.com/app/apikey in your browser.
  • Find the key you created for this project, click the options menu next to it, and select Delete.

Nice Work!

Nice Work!

You just built a fully functional AI video analyzer that content creators can use to extract viral hooks, optimal clip points, and platform-ready captions from any video. That is a real tool solving a real problem.

You've learned how to:

  • Build a multimodal AI integration with Google Gemini, sending video files and YouTube URLs directly to an AI model and receiving structured analysis with hook scores, UGC scores, and clip timestamps.
  • Use structured prompting to transform raw AI text into clean JSON output with platform-specific captions, CTAs, hashtags, and professional file names formatted for TikTok, Instagram Reels, and YouTube Shorts.
  • Create a mobile-responsive Next.js web app using Cursor's AI coding agent, going from an empty folder to a working tool through vibe coding.
  • Secret Mission: Added product image reference as multimodal input for brand-consistent analysis across content.
What's Next: The Video Export Engine

Your analyzer identifies the best clips and generates captions. The natural next step is to actually export those clips as ready-to-post video files. Project 2 adds client-side video trimming, caption burning, and platform reformatting using FFmpeg in the browser.

Copy the prompt below and paste it into Cursor's Agent to start building the Video Export Engine on top of what you already have.

I have an existing Next.js video analyzer app that returns JSON with bestClips (array of {startTime, endTime, description}) and captions. I want to add video export functionality. Build the following:

1. Add FFmpeg.wasm to the project (npm install @ffmpeg/ffmpeg @ffmpeg/util). Create a VideoExporter component that takes clip timestamps and captions from the analysis results.

2. When the user clicks 'Export Clip' on any clip card, use FFmpeg.wasm to: (a) trim the uploaded video to the clip's startTime/endTime, (b) optionally burn captions onto the video as styled subtitles (white text, black outline, positioned at bottom-center), (c) reformat the video to the selected platform's aspect ratio (9:16 for TikTok/Reels/Shorts, 1:1 for Instagram Feed, 16:9 for YouTube).

3. Add an 'Export All Clips' button that batch-processes all recommended clips and downloads them as a zip file. Name each file using the professional fileName from the analysis results.

4. Add a caption style selector (font size, color, position, animation: none/fade/bounce) that previews on a video player before export.

5. Show a progress bar during FFmpeg processing since it runs in the browser and can take 30-60 seconds for longer clips. Handle errors gracefully if the video is too large for browser processing (suggest under 100MB).

The FFmpeg.wasm processing should happen entirely client-side (no server needed). Use SharedArrayBuffer headers if needed for multi-threaded FFmpeg.

Ready to quiz yourself?