# How to Vibe Code Your Own MagicSlides (and Stop Paying for It) > AI PPT Maker & Presentation Slide Generator - Site: https://magicslides.app - Category: Productivity / AI Presentation Tools - Platforms: Web app, Google Workspace add-on, Browser extension - Verdict: **Solid side project** (68/100 vibecodeable) - Estimated effort: 2-3 weeks part-time ## Verdict You can build a functional personal clone of the AI text-to-slide engine and HTML studio, but integrating the Google Workspace add-on marketplace and maintaining complex .pptx binary generation requires serious effort. Replicating the core loop—accepting a topic, calling frontier LLMs to structure outline slides, and rendering them into clean HTML views or downloadable decks—is a satisfying full-stack project. However, you will hit friction around generating valid, uncorrupted .pptx files programmatically and parsing messy inputs like PDF layouts and YouTube transcripts without failing on rate limits or malformed chunks. ### What you can't replicate - The massive active user base and millions of historical presentations generated - Instant distribution via the official Google Workspace Marketplace - Pre-existing brand trust and organic search dominance ## What it does Convert prompts, text, PDFs, Word docs, URLs, and YouTube videos into professional presentation decks instantly with multi-model AI routing, custom design systems, and streaming HTML studio outputs. ### Core features - Multi-source ingestion (YouTube transcripts, PDFs, DOCX, URLs, raw text) - Multi-model AI routing (Claude, DeepSeek, OpenAI, Gemini) - Structured slide outline generation and content planning - Template design system application and layout rendering - Export pipelines (.pptx, .pdf, responsive HTML presentation bundles) - Server-Sent Events (SSE) streaming architecture for real-time generation progress - Interactive slide editor and AI chat editing assistant - Google Workspace add-on ecosystem integration ## The business ### Pricing - Free: Free - Premium: $29/mo - Premium Plus: $34/mo - API: Usage-based Founded 2022. Team size: ~7-12 employees. ## The hard parts - Parsing and tokenizing unstructured multi-format documents (PDF, DOCX layouts, YouTube video transcripts) cleanly - Orchestrating multi-model requests and streaming Server-Sent Events (SSE) back to client editors reliably - Programmatically generating valid binary .pptx file structures that retain formatting and visual hierarchy - Building a responsive HTML/CSS presentation studio with clean layout rendering and speaker notes ## How to vibe code MagicSlides ### Prerequisites - Node.js (free): Runtime environment for Next.js and backend scripts - GitHub (free): Version control and deployment pipeline source - Anthropic API Key (Pay-as-you-go): Required for Claude model integration in slide generation ### Recommended AI tools - Claude Code: Ideal terminal agent for scaffolding the full-stack Next.js presentation engine and writing complex data transformers - Cursor: Best for iteratively refining UI components in the presentation editor and HTML studio ### Stack - Frontend: Next.js with Tailwind CSS and Vercel AI SDK - Backend: Next.js API routes with Server-Sent Events (SSE) streaming - Database: Turso (SQLite at the edge) - Auth: better-auth - Payments: none - Other: Anthropic API, OpenRouter, pptxgenjs ### Hosting - Vercel (Hosting Next.js frontend, API routes, and SSE streaming endpoints): $0-20/mo - Turso (Serverless SQLite database for storing presentations and user data): $0/mo ### Build guide 1. **Project Scaffolding & Database Setup** — Initialize a Next.js project with Tailwind CSS and configure Turso with Drizzle ORM to manage user presentations and slide records. ``` Initialize a new Next.js project using App Router, TypeScript, and Tailwind CSS. Install Drizzle ORM and configure it to connect to a Turso SQLite database over HTTP. Create database schemas for 'users', 'presentations' (storing title, topic, slide count, language, and status), and 'slides' (storing slide index, layout type, and raw HTML content). Set up environment variable validation using Zod for database URLs and API keys. ``` 2. **Authentication & Dashboard Layout** — Implement authentication using better-auth and build a clean dashboard interface to view, create, and delete presentations. ``` Configure better-auth in the Next.js app supporting email/password and Google OAuth authentication, persisting sessions in the Turso database. Build a responsive dashboard layout with a sidebar navigation, dark mode support via Tailwind CSS, and a main content area displaying a grid of the user's saved presentation cards with quick action buttons for editing and deleting. ``` 3. **Multi-Source Ingestion & AI Outline Engine** — Build backend ingestion parsers for raw text, URLs, and markdown summaries, and wire up an AI generation pipeline using the Vercel AI SDK and Anthropic API to structure slide outlines. ``` Create a backend service in Next.js that accepts inputs including text prompts, URLs, or pasted document content. Use the Vercel AI SDK and Anthropic API (Claude Sonnet) with structured JSON output modes (generateObject) to parse the raw input into a structured slide deck array containing titles, bullet points, speaker notes, and recommended visual layouts. Handle validation errors and empty inputs gracefully. ``` 4. **HTML Studio & Server-Sent Events (SSE) Streaming** — Implement an SSE endpoint that streams real-time generation progress and custom HTML slide outputs back to the client editor. ``` Build a Server-Sent Events (SSE) API route at /api/cli/generate-html-studio that accepts a presentation topic and style preferences. Stream generation status updates ('Planning slides...', 'Writing slide 2...', 'Done') back to the client using ReadableStream. Ensure connection headers are correctly configured for proxy compatibility. Implement a frontend hook to consume the stream, display progress messages in real time, and redirect the user upon receiving the final share URL. ``` 5. **Presentation Editor & Slide Customization** — Develop an interactive presentation editor where users can preview slides, edit bullet points, reorder items, and tweak visual themes. ``` Build an interactive slide editor page at /editor/[id]. Implement a split-screen layout with a slide thumbnail sidebar on the left, a main live-rendered HTML slide canvas in the center, and an AI chat assistant panel on the right. Enable users to click on text elements or bullet points to edit content inline, reorder slides via drag-and-drop or move buttons, and trigger AI rewrite actions for individual slides. ``` 6. **Export Pipeline (.pptx & PDF)** — Integrate presentation export functionality to package slides into downloadable PowerPoint (.pptx) and PDF files. ``` Integrate the 'pptxgenjs' library into a server-side API route that takes stored presentation records and compiles them into a downloadable .pptx file buffer. Add a corresponding PDF export route using headless browser rendering or print styles. Add 'Export PPTX' and 'Export PDF' buttons to the presentation editor header that trigger file downloads cleanly. ``` ### Cost vs paying **Starting costs (one-time):** - Custom domain (optional): $12/yr - Total: ~$12 one-time **Ongoing costs (monthly):** - Anthropic API credits for generation: ~$5-15/mo - Vercel / Turso hosting: $0-5/mo - Total: ~$10-20/mo - Paying for the SaaS instead: $29/mo - Build time: 25-35 hours - AI tool credits: $20/mo - Break-even: 1 month ## Sources - [MagicSlides Home Page](https://magicslides.app) - [MagicSlides Pricing Page](https://magicslides.app/pricing) - [MagicSlides API Documentation](https://magicslides.app/docs/api) - [About MagicSlides - The Untold Story by Founder Sanskar Tiwari](https://vertexaisearch.cloud.google.com/grounding-api-redirect/AUZIYQHY-emqET-wZrLgCnaeES9WstbEARVLecGgTj4HuqDQx1cG_mA0TSbfCud9NPBZfeSkDTdHKNtSvOFlLtejn5Popka0V5k2946Hr7x5rsc656fxKZSUxOc=)