This is Google Gemini’s official Next.js template that allows you to build modern, AI-powered image & video generation apps using Google’s Veo 3 and Imagen 4 models through the Gemini API.
It enables you to create a UI for generating videos from text prompts, creating videos from images and text, and performing basic in-browser video edits.
Features
🎥 Text-to-video generation using Google’s Veo 3 model.
🖼️ Image-to-video conversion with Imagen 4 integration.
⬆️ File upload support for custom starting images.
▶️ Built-in video player with playback controls.
⬇️ Direct video download functionality.
✂️ Browser-based video trimming to specific time ranges.
🔄 Real-time operation status checking for generation progress.
📱 Responsive user interface built with Tailwind CSS.
🔧 Complete API route implementations for all features.
📋 TypeScript support with proper schema definitions.
Preview
Use Cases
- Creating prototype video generation applications for client demonstrations.
- Building custom video editing tools for content creation platforms.
- Developing AI-powered marketing tools that generate promotional videos from text descriptions.
- Implementing video generation features in e-learning platforms for course content creation.
- Constructing social media management tools with automated video content generation capabilities.
How to Use It
1. To get started, you first need Node.js and a package manager like npm installed on your system.
2. You must also have a Gemini API key. The Veo 3 and Imagen 4 models are available on the Gemini API paid tier, so you will need to upgrade your account to use this project.
3. Obtain your API key from the Google AI Studio dashboard.
4. Create a file named .env in the root directory of the project. Inside this file, add the following line, replacing "YOUR_API_KEY" with your actual key. Alternatively, you can set this as a system environment variable.
GEMINI_API_KEY="YOUR_API_KEY"The application will use this environment variable to authenticate your requests to the Gemini API.
5. Install all the required packages and libraries defined in the package.json file.
npm install6. Start the local development server. You can then access the app at http://localhost:3000.
npm run devRelated Resources
- Gemini API Documentation – Documentation for Google’s Gemini API including authentication, models, and usage examples.
- Veo 3 Video Generation Guide – Detailed guide covering Veo 3 model capabilities, prompt engineering, and advanced video generation techniques.
- Imagen 4 Documentation – Documentation for Imagen 4 image generation model with examples and best practices.
- Next.js Documentation – Official Next.js documentation covering framework features, API routes, and deployment options.
FAQs
Q: Can I use this project with a free Gemini API key?
A: No, the Veo 3 and Imagen 4 models require a paid Gemini API plan. You must have a properly configured billing account to use the features in this application.
Q: What main technologies does this project use?
A: The project is built with Next.js and React for the user interface, Tailwind CSS for styling, and the Gemini API for the AI video and image generation capabilities.
Q: Does this application provide a full video editing experience?
A: No, this is a lightweight quickstart focused on API integration. It includes basic trimming but is not a substitute for a professional video editing environment like Google’s Flow.
Q: How long does video generation typically take?
A: Video generation time varies based on length and complexity, typically ranging from 30 seconds to several minutes. The application includes status polling to track progress automatically.
Q: Can I customize the video generation parameters?
A: Yes, you can modify the API calls in the route files to adjust parameters like video length, aspect ratio, and generation settings according to your needs.
