DOCSEARCHbyAlgolia
Submit Docs

Gemini API Veo 3 Quickstart

repository·main·Indexed 43 days ago

https://github.com/google-gemini/veo-3-nano-banana-gemini-api-quickstart

A Next.js quickstart application for building a studio UI to create and edit images and videos using Google's Gemini API models, including Veo 3, Imagen 4, and Gemini 2.5 Flash.

Tokens
596
Snippets
1
Records
4
Agent score
6%

What's inside Gemini API Quickstart

  1. Available content creation modes

    main

    The quickstart provides a unified composer UI with the following modes:

    • Create Image: Generates images from text prompts using Imagen 4 or Gemini 2.5 Flash Image.
    • Edit Image: Edits an existing image based on a text prompt using Gemini 2.5 Flash Image.
    • Compose Image: Combines multiple images with a text prompt to create a new image using Gemini 2.5 Flash Image.
    • Create Video: Generates videos from text prompts or an initial image using Veo 3.

  2. Project structure and key components

    main

    The project is organized as a standard Next.js application:

    • app/: Contains application logic and API routes (see API routes above).
    • components/: Contains reusable React components:
      • ui/Composer.tsx: The main unified composer UI.
      • ui/VideoPlayer.tsx: Video player with built-in trimming capabilities.
      • ui/ModelSelector.tsx: Component for choosing between different Gemini models.
      • ui/dropzone.tsx: Drag-and-drop component for file uploads.
    • lib/: Utility functions and schema definitions.
    • public/: Static assets.

  3. Setup and run the Gemini API Quickstart locally

    main

    To run this Next.js application for developing with Veo 3, Imagen 4, and Gemini 2.5 Flash Image, follow these steps:

    1. Prerequisites: Ensure you have Node.js and npm installed. You must have a Gemini API key from Google AI Studio.
    2. Configure Environment: Create a .env file in the project root and add your key: GEMINI_API_KEY="YOUR_API_KEY". Note: These models require a Gemini API Paid tier.
    3. Install Dependencies: Run npm install.
    4. Start Development Server: Run npm run dev and navigate to http://localhost:3000.
    npm install
npm run dev

  4. Reference the API route structure

    main

    The application exposes several internal API routes that map to specific Gemini API model operations. If you are building custom components or extending the logic, these are the endpoints used:

    Image Operations

    • /api/imagen/generate/: Image generation via Imagen 4.
    • /api/gemini/generate/: Image generation via Gemini 2.5 Flash Image.
    • /api/gemini/edit/: Image editing and composition (supports multiple images) via Gemini 2.5 Flash Image.

    Video Operations

    • /api/veo/generate/: Video generation via Veo 3.
    • /api/veo/operation/: Polling endpoint to check the status of video generation operations.
    • /api/veo/download/: Endpoint to download generated videos.