base on Open source AI presentation generator. Create professional slides with customizable themes and AI-generated content in minutes. # ALLWEONE® AI Presentation Generator (Gamma Alternative) ⭐ Help us reach more developers and grow the ALLWEONE community. Star this repo! https://github.com/user-attachments/assets/a21dbd49-75b8-4822-bcec-a75b581d9c60 [](https://opensource.org/licenses/MIT) [](https://nextjs.org/) [](https://tailwindcss.com/) An open-source inspired by gamma.app ,AI-powered presentation generator that creates beautiful Slides with AI, customizable slides in minutes. This tool is part of the broader ALLWEONE AI platform. [Live Demo](https://allweone.com/presentations) | [Video Tutorial](https://www.youtube.com/watch?v=UUePLJeFqVQ) ## 🌟 Features - **AI-Powered Content Generation**: Create complete presentations on any topic with AI - **Customizable Slides**: Choose the number of slides, language, and page style - **Editable Outlines**: Review and modify AI-generated outlines before finalizing - **Multiple Themes**: 9 built-in themes with more coming soon - **Custom Theme Creation**: Create and save your own themes from scratch - **Image Generation**: Choose different AI image generation models for your slides - **Audience-Focused Styles**: Select between professional and casual presentation styles - **Real-Time Generation**: Watch your presentation build live as content is created - **Full Editability**: Modify text, fonts, and design elements as needed - **Presentation Mode**: Present directly from the application - **Auto-Save**: Everything saves automatically as you work ## 🚀 Getting Started ### Prerequisites - Node.js 18.x or higher - npm or yarn - OpenAI API key (for AI generation features) - Together AI API key (for Image generation) - Google Client ID and Secret for authentication feature ### Installation 1. Clone the repository: ```bash git clone [email protected]:allweonedev/presentation-ai.git cd presentation-ai ``` 2. Install dependencies: ```bash pnpm install ``` 3. Set up environment variables: Create a `.env` file in the root directory with: ``` # AI Providers OPENAI_API_KEY="" TOGETHER_AI_API_KEY="" # For Next Auth NEXTAUTH_SECRET="" NEXTAUTH_URL="" NEXTAUTH_URL="http://192.168.1.83:3000" # Next Auth Google Provider GOOGLE_CLIENT_ID="" GOOGLE_CLIENT_SECRET="" # For Uploadthing UPLOADTHING_TOKEN="" # PostgreSQL Database URL DATABASE_URL="postgresql://username:password@localhost:5432/presentation_ai" ``` Note: You need to set up a PostgreSQL database for testing the application. 4. Set up the database: ```bash pnpm db:push ``` 5. Start the development server: ```bash pnpm dev ``` 6. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application. ## 💻 Usage ### Creating a Presentation 1. Navigate to the dashboard 2. Enter your presentation topic 3. Choose the number of slides (recommended: 5-10) 4. Select your preferred language 5. Choose a page style 6. Click "Generate Outline" 7. Review and edit the AI-generated outline 8. Select a theme for your presentation 9. Choose an image generation model 10. Select your presentation style (Professional/Casual) 11. Click "Generate Presentation" 12. Wait for the AI to create your slides in real-time 13. Preview, edit, and refine your presentation as needed 14. Present directly from the app or export your presentation ### Custom Themes 1. Click "Create New Theme" 2. Start from scratch or derive from an existing theme 3. Customize colors, fonts, and layout 4. Save your theme for future use ## 🧰 Tech Stack This project is built with: - **Next.js**: React framework for server-rendered applications - **React**: UI library for building user interfaces - **Prisma**: Database ORM with PostgreSQL - **Tailwind CSS**: Utility-first CSS framework - **TypeScript**: Typed JavaScript - **OpenAI API**: For AI content generation - **Radix UI**: Headless UI components - **Plate Editor**: Rich text editing system for handling text, images, and slide components - **Authentication**: NextAuth.js for user authentication - **UploadThing**: File uploads - **DND Kit**: Drag and drop functionality ## 🛠️ Project Structure ``` presentation/ ├── .next/ # Next.js build output ├── node_modules/ # Dependencies ├── prisma/ # Database schema │ └── schema.prisma # Prisma database model ├── src/ # Source code │ ├── app/ # Next.js app router │ ├── components/ # Reusable UI components │ │ ├── auth/ # Authentication components │ │ ├── presentation/ # Presentation-related components │ │ │ ├── dashboard/ # Dashboard UI │ │ │ ├── editor/ # Presentation editor │ │ │ │ ├── custom-elements/ # Custom editor elements │ │ │ │ ├── dnd/ # Drag and drop functionality │ │ │ │ └── native-elements/ # Native editor elements │ │ │ ├── outline/ # Presentation outline components │ │ │ ├── theme/ # Theme-related components │ │ │ └── utils/ # Presentation utilities │ │ ├── prose-mirror/ # ProseMirror editor components for the outline part │ │ ├── text-editor/ # Text editor components │ │ │ ├── hooks/ # Editor hooks │ │ │ ├── lib/ # Editor libraries │ │ │ ├── plate-ui/ # Plate editor UI components │ │ │ └── plugins/ # Editor plugins │ │ └── ui/ # Shared UI components │ ├── hooks/ # Custom React hooks │ ├── lib/ # Utility functions and shared code │ ├── provider/ # Context providers │ ├── server/ # Server-side code │ ├── states/ # State management │ ├── middleware.ts # Next.js middleware │ └── env.js # Environment configuration ├── .env # Environment variables ├── .env.example # Example environment variables ├── next.config.js # Next.js configuration ├── package.json # Project dependencies and scripts ├── tailwind.config.ts # Tailwind CSS configuration └── tsconfig.json # TypeScript configuration ``` ## 🤝 Contributing We welcome contributions to the ALLWEONE Presentation Generator! Here's how you can help: 1. Fork the repository 2. Create a feature branch (`git checkout -b feature/amazing-feature`) 3. Commit your changes (`git commit -m 'Add some amazing feature'`) 4. Push to the branch (`git push origin feature/amazing-feature`) 5. Open a Pull Request Please read our [Contributing Guidelines](CONTRIBUTING.md) for more details. ## 📝 License This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. ## 🙏 Acknowledgements - [OpenAI](https://openai.com/) for AI generation capabilities - [Plate Editor](https://plate.udecode.io/) for rich text editing - [Radix UI](https://www.radix-ui.com/) for accessible UI components - [Next.js](https://nextjs.org/) for the React framework - All our open-source [contributors](https://github.com/allweonedev/presentation-ai/graphs/contributors) Built with ❤️ by the ALLWEONE™ Team 🇺🇸🇧🇷🇳🇵🇦🇫🇦🇱🇩🇿🇦🇸🇦🇩🇦🇴🇦🇮🇦🇶🇦🇬🇦🇷🇦🇲🇦🇼🇦🇺🇦🇹🇦🇿🇧🇸🇧🇭🇧🇩🇧🇧🇧🇾🇧🇪🇧🇿🇧🇯🇧🇹🇧🇴🇧🇦🇧🇼🇮🇴🇻🇬🇧🇳🇧🇬🇧🇫🇧🇮🇨🇻🇰🇭🇨🇲🇨🇦🇮🇨🇨🇿🇨🇱🇨🇳🇨🇽🇨🇨🇨🇴🇰🇲🇨🇬🇨🇩🇨🇰🇨🇷🇭🇷🇨🇺🇨🇼🇨🇾🇨🇿🇩🇰🇩🇯🇩🇲🇩🇴🇪🇨🇪🇬🇸🇻🇬🇶🇪🇷🇪🇪🇸🇿🇪🇹🇫🇰🇫🇴🇫🇯🇫🇮🇫🇷🇬🇫🇵🇫🇹🇫🇬🇦🇬🇲🇬🇪🇩🇪🇬🇭🇬🇮🇬🇷🇬🇱🇬🇩🇬🇺🇬🇹🇬🇬🇬🇳🇬🇼🇬🇾🇭🇹🇭🇳🇭🇰🇭🇺🇮🇸🇮🇳🇮🇩🇮🇷🇮🇶🇮🇪🇮🇲🇮🇱🇮🇹🇨🇮🇯🇲🇯🇵🇯🇪🇯🇴🇰🇿🇰🇪🇰🇮🇽🇰🇰🇼🇰🇬🇱🇦🇱🇻🇱🇧🇱🇸🇱🇷🇱🇾🇱🇮🇱🇹🇱🇺🇲🇴🇲🇬🇲🇼🇲🇾🇲🇻🇲🇱🇲🇹🇲🇭🇲🇶🇲🇷🇲🇺🇾🇹🇲🇽🇫🇲🇲🇩🇲🇨🇲🇳🇲🇪🇲🇸🇲🇦🇲🇿🇲🇲🇳🇦🇳🇷🇳🇱🇳🇨🇳🇿🇳🇮🇳🇪🇳🇬🇳🇺🇲🇰🇰🇵🇳🇴🇴🇲🇵🇰🇵🇼🇵🇸🇵🇦🇵🇬🇵🇾🇵🇪🇵🇭🇵🇳🇵🇱🇵🇹🇵🇷🇶🇦🇷🇪🇷🇴🇷🇺🇷🇼🇼🇸🇸🇲🇸🇹🇸🇦🇸🇳🇷🇸🇸🇨🇸🇱🇸🇬🇸🇽🇸🇰🇸🇮🇸🇧🇸🇴🇿🇦🇬🇸🇰🇷🇸🇸🇪🇸🇱🇰🇸🇩🇸🇷🇸🇿🇸🇪🇨🇭🇸🇾🇹🇼🇹🇯🇹🇿🇹🇭🇹🇱🇹🇬🇹🇰🇹🇴🇹🇹🇹🇳🇹🇷🇹🇲🇹🇨🇹🇻🇺🇬🇺🇦🇦🇪🇬🇧🇻🇮🇺🇾🇺🇿🇻🇺🇻🇦🇻🇪🇻🇳🇼🇫🇪🇭🇾🇪🇿🇲🇿🇼 For any questions or support, please open an issue on GitHub or contact us at Discord https://discord.gg/wSVNudUBdY ", Assign "at most 3 tags" to the expected json: {"id":"14893","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"