Claiss 🎬✨

AI-powered educational video generator - Transform text prompts into stunning visual learning content using Manim animations.

📺 Demo

Coming soon - add your demo video link here

✨ Features

• 🤖 AI-Powered Scene Generation - Describe what you want to learn, and AI creates the video script and animations
• 🎬 Scene-Based Editing - Videos are organized into independently editable scenes for maximum flexibility
• ⚡ Fast Compilation - Serverless Manim compilation via Modal.com
• 🎨 Beautiful UI - Modern glassmorphic design with smooth animations
• 📊 Educational Focus - Perfect for algorithms, data structures, physics, mathematics, and more
• 🔄 Real-time Preview - See your scenes as they compile
• 📦 Video Merging - Automatically combine scenes into a final video

🏗️ Architecture

Claiss is built with modern web technologies:

• Frontend: Next.js 14 (App Router) + React 18
• Styling: Tailwind CSS with custom glassmorphic components
• AI: Vercel AI Gateway for scene generation, currently defaulting to Gemini 2.5 Pro
• Video Compilation: Manim via Modal.com serverless containers
• Storage: Vercel Blob for video storage
• State Management: React hooks + LocalStorage (temporary - see Roadmap)

How it Works

1. User Input: Describe what you want to learn in natural language
2. AI Processing: Vercel AI Gateway routes the prompt to the configured model and generates Manim scene code
3. Compilation: Modal.com compiles the Manim code into video segments
4. Storage: Videos are stored in Vercel Blob storage
5. Merging: Individual scenes are merged into a final video
6. Preview & Edit: Users can preview, edit, and reorder scenes

🚀 Getting Started

Prerequisites

• Node.js 18+ and pnpm
• Vercel AI Gateway API Key
• Modal.com Account (free tier available)
• Vercel Account for Blob storage

Installation

1. Clone the repository

   git clone https://github.com/HoltzTomas/classia-frontend.git
   cd classia-frontend

2. Install dependencies

   pnpm install

3. Set up environment variables

   cp .env.example .env

   Edit .env and fill in your API keys:

   • AI_GATEWAY_API_KEY - Get from Vercel AI Gateway
   • AI_GATEWAY_MODEL - Optional override, defaults to google/gemini-2.5-pro
   • MODAL_TOKEN_SECRET - Get from Modal Settings
   • BLOB_READ_WRITE_TOKEN - Get from Vercel Dashboard

4. Set up Modal.com for Manim compilation

   Install Modal CLI:

   pip install modal

   Authenticate Modal:

   modal token new

   Deploy the Manim compilation service:

   modal deploy modal_manim.py

5. Run the development server

   pnpm dev

   Open http://localhost:3000 in your browser.

📁 Project Structure

claiss/
├── app/
│   ├── api/              # API routes
│   │   ├── video-generator-scene/  # AI scene generation endpoint
│   │   ├── scene-compile/          # Scene compilation endpoint
│   │   ├── video-merge/            # Video merging endpoint
│   │   └── ...
│   ├── chat/             # Main chat interface for video creation
│   ├── page.tsx          # Landing page
│   └── layout.tsx        # Root layout
├── components/           # React components
│   ├── scene-timeline.tsx
│   ├── scene-preview.tsx
│   ├── scene-edit-modal.tsx
│   ├── video-player.tsx
│   └── ...
├── lib/
│   ├── hooks/            # Custom React hooks
│   │   ├── use-scene-manager.ts
│   │   ├── use-scene-compiler.ts
│   │   └── use-video-merger.ts
│   ├── scene-*.ts        # Scene management utilities
│   ├── modal-client*.ts  # Modal.com API clients
│   └── ...
├── modal_manim.py        # Modal.com Manim compilation service
└── package.json

🎯 Usage

Creating a Video

1. Navigate to the chat interface (click "Start Creating" on the landing page)
2. Describe what you want to learn, for example:
   • "Show me how bubble sort works step by step"
   • "Explain the Pythagorean theorem with a visual proof"
   • "Animate binary tree traversal algorithms"
3. The AI will generate scenes and compile them automatically
4. Preview each scene as it compiles
5. Edit, reorder, or delete scenes as needed
6. Click "Merge Scenes" to create the final video

Editing Scenes

• Click on any scene in the timeline to preview it
• Use the edit button to modify the Manim code
• Scenes recompile automatically when you save changes
• Drag and drop to reorder scenes

🛠️ Development

Building for Production

pnpm build
pnpm start

Linting

pnpm lint

🗺️ Roadmap

See ROADMAP.md for planned features and improvements.

Current limitations (temporary - shipped fast for MVP):

• Video data stored in LocalStorage (not persistent across devices)
• No user authentication
• No chat history persistence
• Single-user experience

Coming soon:

• User authentication & accounts
• Database integration for persistent storage
• Collaborative editing
• Community video gallery

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

📜 License

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

🙏 Acknowledgments

• Manim Community for the amazing animation library
• Modal.com for serverless Python execution
• Vercel for hosting and blob storage
• Vercel AI Gateway for multi-provider model access

📞 Support

• 🐛 Report a Bug
• 💡 Request a Feature
• 💬 Discussions

---

Built with ❤️ by Tomas Holtz