explaingit

ame-x/auto-ppt

★ 21TypeScriptAudience · vibe coderComplexity · 2/5Setup · moderate

TLDR

A code-based slide presentation template where each slide is a React component, designed to be built and edited by AI agents like Claude Code or Cursor.

Mindmap

mindmap
  root((auto-ppt))
    How it works
      Each slide is a component
      Browser preview server
      1920x1080 fixed canvas
    AI Agent Workflow
      Describe slides in plain English
      Agent writes component files
      SKILL.md guides the agent
    CLI Tool
      List slides
      Add new slide
      Print deck text
    Config
      Slide order file
      Visibility control
    Tech Stack
      React TypeScript
      Local dev server
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Describe your slides in plain English to Claude Code or Cursor and have the AI agent generate the full presentation as React components.

USE CASE 2

Build a pixel-perfect 1920x1080 slide deck with complete control over layout and styling using code instead of a slide editor.

USE CASE 3

Use the built-in CLI to manage slide order, add new slides, and print all deck text without opening a browser.

Tech stack

TypeScriptReact

Getting it running

Difficulty · moderate Time to first run · 30min

In plain English

Auto-PPT is a template and workflow for building slide presentations using code rather than a traditional slide editor. Each slide is a React component written in a .tsx file, and the full deck is previewed in a browser at a local development server. You can view the whole deck or jump to a single slide by its name in the URL. The project is designed to be handed to an AI coding agent such as Claude Code, Cursor, or Codex. You describe the slides you want, and the agent writes and edits the component files to produce them. A file called SKILL.md is included specifically to instruct the AI on how the project is structured, what is safe to change, and how the editing loop works. Slides follow a fixed canvas size of 1920 by 1080 pixels, which scales to fit whatever screen the browser is on. The project includes a small command-line tool called ppt that can list slides, add a new one, or print the text content of the deck. There is no built-in screenshot or export tool, the README suggests using whatever screenshot capability the AI agent already has for checking layout. The deck order and which slides are visible are controlled by a single config file.

Copy-paste prompts

Prompt 1
I'm using auto-ppt with Claude Code. Create a 6-slide pitch deck for a SaaS product covering: problem, solution, how it works, pricing, traction, and call to action. Write each slide as a React component.
Prompt 2
Help me build a slide in auto-ppt that displays a three-column feature comparison table. It should fit the 1920x1080 canvas and use a dark background with white text.
Prompt 3
I want to add a progress bar at the bottom of every slide in my auto-ppt deck. Show me how to add a shared layout component that wraps all individual slide components.
Open on GitHub → Explain another repo

← ame-x on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.