A high-fidelity, open-source clone of the MidJourney web interface built with Next.js 15, featuring real AI image and video generation powered by Google's Gemini SDK. Use Imagen 4 to generate images and Veo 2 and 3 for image and text to video with audio.

OR extend and bring your favorite models to the same experience.

• Imagen 4 integration for high-quality image generation
• 4-image grid layout matching MidJourney's design
• Real-time generation with loading animations

• Veo 3 text-to-video generation
• Veo 2 image-to-video conversion
• 2x2 video grid with autoplay on hover

• Download generated images and videos
• Image-to-video conversion with one click
• Hover animations and professional transitions
• Real-time loading states with skeleton animations
• Film strip navigation to easily flip through your gneerations

• Next.js 15 with App Router and Turbopack
• TypeScript for type safety
• Tailwind CSS v4 for styling
• Framer Motion for animations
• ShadCN UI components
• Google GenAI SDK for AI generation
• Radix UI for accessible components

• Node.js 18+ (20+ recommended)
• npm or yarn
• Google AI API Key (free tier available)

git clone https://github.com/your-username/openjourney.git
cd openjourney/openjourney-app
npm install

Create .env.local:

GOOGLE_AI_API_KEY=your_google_ai_api_key_here

Get your API key:

1. Visit Google AI Studio
2. Create a new project or select existing
3. Generate an API key
4. Copy and paste into .env.local

npm run dev

Open http://localhost:3000 to view the app.

1. Type your prompt in the input bar
2. Click "Image" button or press Enter
3. Watch 4 high-quality images generate in real-time
4. Hover to Download, Expand, or Animate with Veo 2

1. Type your video prompt
2. Click "Video" button
3. Watch videos generate (takes 30-60 seconds)
4. Hover over video row to autoplay both videos

1. Generate or use sample images
2. Hover over any image
3. Click "Animate with Veo 2"
4. Watch as image becomes animated video

1. Expand - Click to view in fullscreen lightbox
2. Download - Save images/videos locally
3. Navigation - Use arrow keys or or scroll in full screen mode

openjourney-app/
├── src/
│   ├── app/
│   │   ├── api/                 # API routes for AI generation
│   │   │   ├── generate-images/ # Imagen 4 integration
│   │   │   ├── generate-videos/ # Veo 3 text-to-video
│   │   │   └── image-to-video/  # Veo 2 image-to-video
│   │   ├── globals.css          # Global styles
│   │   ├── layout.tsx           # Root layout
│   │   └── page.tsx             # Main page component
│   ├── components/
│   │   ├── ui/                  # ShadCN UI components
│   │   ├── prompt-bar.tsx       # Prompt input with logo
│   │   ├── content-grid.tsx     # Generation management
│   │   ├── image-grid.tsx       # 4-image display grid
│   │   ├── video-grid.tsx       # 2x2 video display
│   │   ├── loading-grid.tsx     # Skeleton loading states
│   │   └── lightbox-modal.tsx   # Fullscreen viewer
│   └── lib/
│       └── utils.ts             # Utility functions
├── public/
│   ├── openjourney-logo.svg     # Brand logo
│   ├── sample-images/           # Demo images
│   └── sample-videos/           # Demo videos
├── next.config.js               # Next.js configuration
├── tailwind.config.ts           # Tailwind configuration
└── package.json                 # Dependencies

• Model: imagen-3.0-generate-001
• Output: 4 high-quality 1024x1024 images
• Format: Base64 encoded PNG

• Model: veo-3
• Output: High quality video generation with audio
• Duration: ~3-5 seconds, 720p

• Model: veo-2.0-generate-001 with image input
• Input: Base64 image + text prompt
• Output: Animated video from static image

images: {
  remotePatterns: [
    {
      protocol: 'https',
      hostname: 'picsum.photos', // For placeholder images
    },
  ],
}

npm run build
npx vercel --prod

docker build -t openjourney .
docker run -p 3000:3000 openjourney

Make sure to set GOOGLE_AI_API_KEY in your deployment platform or you can enter your key in the app.

1. Fork the repository
2. Create feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• MidJourney for the original interface inspiration
• Google Gemini API for the powerful generation models
• Vercel for Next.js and deployment platform
• ShadCN for the beautiful UI components

• For more AI projects: @ammaar on X