# How to Vibe Code Your Own SlideFast (and Stop Paying for It) > One idea becomes a branded carousel ready to post - Site: https://slidefast.io - Category: Marketing & Content SaaS - Verdict: **Solid side project** (72/100 vibecodeable) - Estimated effort: 2-3 weeks of part-time work ## Verdict Build a solid subset of SlideFast for personal use in 2 weeks, but skip trying to match the exact infrastructure polish or commercial billing loops. The core loop—taking a text prompt, calling an LLM with structured JSON output, rendering HTML slides, and converting them to PNG/PDF via headless browser automation—is entirely achievable with modern AI coding agents. The friction points will be getting headless PDF/PNG exports to render fonts and word-wrapping cleanly without layout jitter, and setting up the vector embedding search for your uploaded image library. ### What you can't replicate - The exact prompt engineering fine-tuned across thousands of real production user generations - The organic founder brand and distribution network built by the original creator ## What it does An AI-powered social media carousel generator that turns rough topics, URLs, notes, or post drafts into complete, structured presentations with hooks, slide pacing, CTAs, and captions. ### Core features - AI angle generation, hook writing, and multi-slide narrative structuring from raw briefs or URLs - Interactive slide editor with live preview and multi-model chat refinement (Google Gemini / Anthropic) - Theme and brand kit management (accent colors, typography, background tokens) - Custom emoji integration via shortcode maps and asset packs - Semantic image library search using vector embeddings and AI auto-description of uploaded assets - Headless server-side export pipeline rendering individual slides into 800x1000px high-DPI PNGs, ZIP bundles, and multi-page PDFs - Public REST API with Bearer token authentication, rate-limiting headers, and usage metering - Social platform metadata generator for LinkedIn, TikTok, and Instagram ## The business ### Pricing - Free Trial: Free — 7-day risk-free trial requiring no upfront credit card. - Pro Tier: €39/mo — For founders and creators scaling daily social content. Team size: 1 developer / sole proprietor. ## The hard parts - Deterministic structured JSON output from LLMs containing exact slide schemas, pagination counts, and correct layouts - Headless rendering pipeline (Puppeteer/Playwright or canvas engines) that reliably compiles multi-page HTML/CSS slide decks into clean PDFs and high-DPI PNGs without text overflows - Vector embedding-based semantic image search and auto-tagging for uploaded brand assets - Balancing third-party LLM inference token costs against flat subscription rate limits ## How to vibe code SlideFast ### Prerequisites - Node.js (free): Runtime for the Next.js full-stack application and build tools - GitHub (free): Version control and repository hosting for deployment - Google AI Studio API Key (free tier available): Access to Gemini models for carousel text generation and structuring ### Recommended AI 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 ### Stack - Frontend: Next.js with Tailwind CSS and React - Backend: Next.js API Routes / Server Actions - Database: Turso (SQLite at the edge with vector support via libSQL) - Auth: better-auth - Payments: None (personal use clone) - Other: Vercel AI SDK for model abstraction and structured JSON generation, Playwright for headless server-side PNG/PDF slide rendering, Cloudflare R2 for storing slide asset exports and uploaded images ### Hosting - Vercel (Hosting the Next.js frontend and serverless API endpoints): $0/mo (Hobby tier) - Turso (Serverless SQLite database for presentations, themes, and image metadata): $0/mo (Free tier) - Cloudflare (R2 object storage for custom brand assets and slide image exports): $0/mo (Free tier) ### Build guide 1. **Project 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. ``` 2. **Core 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. ``` 3. **AI 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. ``` 4. **Theme, 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. ``` 5. **Interactive 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. ``` 6. **Headless 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. ``` 7. **Sharing, 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. ``` ### Cost vs paying **Starting costs (one-time):** - AI Coding Assistant (Claude Pro / Cursor): $20 - Domain name (optional): $12/yr - Total: ~$32 one-time **Ongoing costs (monthly):** - Vercel Hobby Hosting: $0/mo - Turso Database: $0/mo - Google Gemini API (Personal usage): ~$2-5/mo - Total: ~$3-5/mo - Paying for the SaaS instead: €39/mo (~$42/mo) - Build time: 25-35 hours - AI tool credits: $20 (Claude Pro / Cursor subscription) - Break-even: Immediate (saves ~$37/mo) ## Sources - [SlideFast Marketing Website](https://slidefast.io) - [SlideFast Public API Documentation](https://app.slidefast.com/docs)