How to vibe codeMagicSlides

Prerequisites

• Node.jsfree

  Runtime environment for Next.js and backend scripts

• GitHubfree

  Version control and deployment pipeline source

• Anthropic API KeyPay-as-you-go

  Required for Claude model integration in slide generation

AI coding 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

Build guide

1. 01Project 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Multi-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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04HTML 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Presentation 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Export 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for MagicSlides