An open-source AI-powered presentation generator that creates beautiful, customizable slides in minutes. This tool is part of the broader ALLWEONE AI platform.
- 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
- 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
-
Clone the repository:
git clone git@github.com:allweonedev/presentation-ai.git cd presentation-ai -
Install dependencies:
pnpm install
-
Set up environment variables: Create a
.envfile 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.
-
Set up the database:
pnpm db:push
-
Start the development server:
pnpm dev
-
Open http://localhost:3000 in your browser to see the application.
- Navigate to the dashboard
- Enter your presentation topic
- Choose the number of slides (recommended: 5-10)
- Select your preferred language
- Choose a page style
- Click "Generate Outline"
- Review and edit the AI-generated outline
- Select a theme for your presentation
- Choose an image generation model
- Select your presentation style (Professional/Casual)
- Click "Generate Presentation"
- Wait for the AI to create your slides in real-time
- Preview, edit, and refine your presentation as needed
- Present directly from the app or export your presentation
- Click "Create New Theme"
- Start from scratch or derive from an existing theme
- Customize colors, fonts, and layout
- Save your theme for future use
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
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
We welcome contributions to the ALLWEONE Presentation Generator! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Please read our Contributing Guidelines for more details.
This project is licensed under the MIT License - see the LICENSE file for details.
- OpenAI for AI generation capabilities
- Plate Editor for rich text editing
- Radix UI for accessible UI components
- Next.js for the React framework
- All our open-source contributors
- Export options (PowerPoint, PDF, Google Slides)
- Collaborative editing
- More AI models and image generation options
- Template library
- Voice commands for presentations
- Advanced animation options
- More layout and component options for slides
- Enhanced Plate.js integration for richer slide content
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/232cdU5Z
