How to vibe codeSlideFast

Prerequisites

• Node.jsfree

  Runtime for the Next.js full-stack application and build tools

• GitHubfree

  Version control and repository hosting for deployment

• Google AI Studio API Keyfree tier available

  Access to Gemini models for carousel text generation and structuring

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding full-stack CRUD routes, database schemas, and export pipelines

• Cursor

  Essential for iterative UI polish on slide templates, drag-and-drop elements, and Tailwind styling

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js project with Tailwind CSS, configure better-auth with SQLite/Turso, and define the relational schema for presentations, slides, themes, and brand assets.

   Scaffold a new Next.js TypeScript project using App Router and Tailwind CSS. Install better-auth and configure a libSQL/Turso database client. Write the database schema for tables: 'presentations' (id, title, description, tags, status, created_at, updated_at), 'slides' (id, presentation_id, slide_index, type, title, body, theme_overrides), 'themes' (id, user_id, name, is_default, theme_data json), and 'brand_kits' (id, user_id, logo_settings, theme_id). Ensure all foreign keys use UUIDs and include proper timestamps. Write a test script to verify database connection and table creation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Core Presentation REST API & CRUD Endpoints

   Implement the public REST API endpoints matching SlideFast's specification for presentations, listing with pagination, filtering by tags, and duplication.

   Implement API routes under /api/v1/public/presentations supporting GET (with pagination, sorting by updated_at/created_at, and tag filtering via AND logic), POST (create presentation with title and optional tags), GET /{id}, PATCH /{id} (update slides, description, tags, scheduled_date), DELETE /{id}, and POST /{id}/duplicate. Implement Bearer token authentication middleware that validates API keys against the database. Return exact JSON payload structures matching standard SlideFast response formats.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03AI Generation Engine & Structured Slide Output

   Build the AI chat endpoint using the Vercel AI SDK and Google Gemini, forcing structured JSON responses for slide hooks, body text, and pagination.

   Build a POST endpoint at /api/v1/public/presentations/{id}/chat using the Vercel AI SDK and Google Gemini (gemini-3-flash-preview). The endpoint must accept content, slide_count (3 to 30), language, target_audience, writing_style, custom_instructions, and mode ('default' vs 'apply'). Force the model to return a structured JSON schema containing an array of slides with title, body, and type properties. If mode is 'apply', automatically persist the generated slides to the presentation in the database and return the updated presentation state. Include prompt token and completion token tracking.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Theme, Brand Kit & Asset Management

   Implement theme CRUD operations, custom emoji packs, and image upload handlers backed by Cloudflare R2 object storage.

   Build API routes for themes under /api/v1/public/themes supporting CRUD, duplication, and setting default themes with color tokens (background, accent, text, textSecondary, borderColor). Implement image library upload endpoints at /api/v1/public/library/images that accept multipart form-data up to 10MB, store files in Cloudflare R2, generate AI descriptions for uploaded assets, and save metadata to Turso. Add endpoints for custom emoji maps and brand kit retrieval.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Interactive Slide Editor Dashboard

   Create a responsive web dashboard where users can view, reorder, and edit individual carousel slides with real-time preview reflecting active theme tokens.

   Build a responsive Next.js frontend dashboard for managing and editing carousels. Create a split-screen view: a chat/prompt input panel on the left and a live-rendering 800x1000px slide preview canvas on the right. Implement drag-and-drop slide reordering, inline text editing for slide titles and body copy, theme color picker controls, and a modal for AI prompt refinement. Use Tailwind CSS to ensure crisp typography and mobile-optimized card styling.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Headless Export Pipeline (PNG, ZIP, PDF)

   Implement server-side headless rendering using Playwright to export individual slides as high-DPI PNGs, compile ZIP bundles, and generate multi-page PDFs.

   Implement export API endpoints under /api/v1/public/presentations/{id}/slides/{n}/png, /export/png (ZIP bundle), and /export/pdf. Use Playwright running headlessly in a serverless function to render each slide HTML template at 800x1000px resolution with correct font scaling and theme injection, capture high-DPI screenshots, compile them into PNGs and ZIP archives using archiver, or combine them into a clean multi-page PDF document. Support return_url=true parameter to upload exports to Cloudflare R2 and return a public CDN URL.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Sharing, Social Metadata & Rate Limiting

   Add public presentation sharing tokens, AI social metadata generation for LinkedIn/TikTok/Instagram, and API rate limiting headers.

   Implement sharing endpoints at /api/v1/public/presentations/{id}/share/enable, disable, and generate (producing platform-specific titles and descriptions for LinkedIn, TikTok, and Instagram using AI). Add rate-limiting middleware that tracks daily and monthly usage per API key in Turso and injects standard headers: X-RateLimit-Limit-Daily, X-RateLimit-Limit-Monthly, X-RateLimit-Remaining-Daily, and X-RateLimit-Remaining-Monthly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for SlideFast