AI-Powered Presentation Builder
Transform your ideas into beautiful, editable slide decks in seconds with intelligent AI assistance.
Prizm is a modern, AI-assisted presentation builder that bridges the gap between rapid ideation and polished presentations. Simply provide a prompt, and Prizm generates a complete slide deck with intelligent layouts, themed design, and smooth editing capabilities. Whether you're crafting a business pitch, educational content, or creative storytelling, Prizm accelerates your workflow while maintaining full creative control.
- Intelligent Outlines: Generate presentation structure from natural language prompts
- Smart Layout Suggestions: AI-recommended layouts based on content type
- Asset Generation: Automated creation of visual elements and content blocks
- Drag-and-Drop Interface: Intuitive content arrangement with live preview
- Resizable Layouts: Flexible grid system with responsive components
- Rich Content Types: Text, images, lists, tables, code blocks, callouts, and more
- Real-time Updates: Optimistic UI updates for seamless editing experience
- Curated Themes: Professional color palettes and typography combinations
- Custom Fonts: Integrated font library with web-safe and modern typefaces
- Consistent Styling: Token-based design system across editor and presentation modes
- Full-Screen View: Distraction-free presentation with smooth transitions
- Precise Scaling: Adaptive rendering for any screen size
- Presenter Tools: Navigation controls and presentation utilities
- Dashboard: Visual project browser with thumbnail previews
- Fast Thumbnails: Canvas-based thumbnail generation for quick loading
- Project Organization: Efficient project management and version tracking
- Framework: Next.js 15 with App Router
- UI Library: React 18 with TypeScript
- Styling: Tailwind CSS + Radix UI
- State Management:
- TanStack Query for server state
- Zustand for client state
- Drag & Drop: react-dnd
- Animations: Framer Motion
- Database ORM: Prisma
- Authentication: Clerk
- File Uploads: Uploadcare
- AI Providers:
- Node.js 20.x or higher
- npm or pnpm or yarn
- Database: PostgreSQL, MySQL, or SQLite
- API keys for AI providers and services (see Environment Variables)
-
Clone the repository
git clone https://github.com/yourusername/prizm.git cd prizm -
Install dependencies
npm install
-
Set up environment variables
Copy
.env.exampleto.envand fill in your credentials:cp .env.example .env
See Environment Variables section for details.
-
Initialize the database
npx prisma generate npx prisma db push
-
Run the development server
npm run dev
Open http://localhost:3000 in your browser.
Create a .env file in the root directory with the following variables:
# Database
DATABASE_URL="postgresql://user:password@localhost:5432/prizm"
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="pk_test_..."
CLERK_SECRET_KEY="sk_test_..."
NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up"
# AI Providers (at least one required)
OPENAI_API_KEY="sk-..."
GOOGLE_GEMINI_API_KEY="..."
GROQ_API_KEY="gsk_..."
# File Uploads
NEXT_PUBLIC_UPLOADCARE_PUBLIC_KEY="..."
UPLOADCARE_SECRET_KEY="..."
# App Configuration
NEXT_PUBLIC_APP_URL="http://localhost:3000"See .env.example for a complete template.
prizm/
├── prisma/
│ └── schema.prisma # Database schema
├── public/ # Static assets
├── src/
│ ├── actions/ # Server actions (data layer)
│ ├── app/ # Next.js App Router pages
│ │ ├── (auth)/ # Authentication pages
│ │ ├── (protected)/ # Protected routes
│ │ └── api/ # API routes
│ ├── components/ # React components
│ │ ├── global/ # Application-specific components
│ │ └── ui/ # Reusable UI primitives
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utilities and types
│ │ ├── constants.ts # App constants
│ │ ├── slideLayouts.ts # Layout definitions
│ │ ├── types.ts # Type definitions
│ │ └── utils.ts # Helper functions
│ ├── store/ # Zustand stores
│ └── middleware.ts # Auth and routing middleware
└── tailwind.config.ts # Tailwind configuration
- Authentication: All protected routes require authentication via Clerk
- Authorization: Server-side checks enforce resource ownership
- Environment Security: Sensitive credentials stored in environment variables (never committed)
- Data Protection: User data isolated per account with database-level constraints
- Projects: Top-level presentation entities with metadata
- Slides: Individual slides containing recursive ContentItem trees
- ContentItems: Hierarchical content blocks (text, images, lists, columns, tables, etc.)
- Themes: Design tokens controlling typography, colors, and backgrounds
- Server State: TanStack Query manages API data, caching, and synchronization
- Editor State: Zustand stores manage slide editing, prompts, and UI state
- Optimistic Updates: Immediate UI feedback with background synchronization
Multiple AI providers support different use cases:
- Outline Generation: Structured presentation planning
- Content Suggestions: Context-aware content recommendations
- Layout Intelligence: Optimal layout selection based on content type
Thank you for your interest in Prizm! This project is currently a personal endeavor and not accepting external contributions at this time. However, feel free to:
- Star the repository if you find it useful
- Report bugs by opening an issue
- Share feedback and suggestions
- Fork the project for your own use
This project is licensed under the MIT License - see the LICENSE file for details.