Slides

Generate full presentation decks from a prompt, edit slides visually, and present full-screen. Ask the agent for "a 10-slide pitch deck for a coffee subscription service" and watch it stream slide-by-slide into the editor in seconds. An open-source replacement for Google Slides, Pitch, and PowerPoint.

Slides deck editor with a deck open and slide thumbnails on the left

When you open a deck, you get a slide editor in the middle, a sidebar of slides on the left, and the agent on the right.

What you can do with it

Generate decks from a prompt. "Generate a 10-slide pitch deck for a coffee subscription service, audience is investors."
Edit slides visually — double-click text to edit, click a block for the bubble menu, use / for the slash menu to insert blocks.
Generate images with AI. Hero images, product mockups, illustrations — preferably delegated to Images, with Builder-managed image generation ready to enable once deployed and direct provider keys as today's fallback.
Search stock photos and company logos. "Find the logo for stripe.com and add it to slide 2."
Present full-screen with keyboard navigation, auto-hiding controls, and speaker notes.
Comment, collaborate, and share. Multiple people can edit the same deck in real time. Generate a public read-only URL or share with specific teammates.
Import from PDF. Turn a PDF into a starter deck — the agent parses it and lays out the content.

Getting started

Live demo: slides.agent-native.com.

When you open the app:

Click New deck.
In the agent sidebar, ask: "Generate a 10-slide pitch deck for a coffee subscription service, audience is investors."
Watch slides stream in. Click any slide to edit, or keep asking the agent to refine.

Useful prompts

"Generate a 10-slide pitch deck for a coffee subscription service, audience is investors."
"Add a pricing slide after slide 3."
"Make the title on this slide bigger and change the accent color to green."
"Generate a hero image for the current slide — dark, minimal, cinematic."
"Find the logo for stripe.com and add it to slide 2."
"Replace the word 'customers' with 'members' everywhere in this deck."
"Summarize this PDF as a 6-slide deck." (attach the PDF)

Select text on a slide and hit Cmd+I to focus the agent with that selection — it'll act only on what you selected.

For developers

The rest of this doc is for anyone forking the Slides template or extending it.

Quick start

Create a new Slides app from the CLI:

npx @agent-native/core create my-slides --template slides
cd my-slides
pnpm dev

Key features (technical)

Prompt-to-deck generation

Ask the agent for a deck and it builds one slide at a time. Slides stream into the editor live as each one is generated — the agent fires parallel add-slide calls so you see the deck assemble in seconds.

Under the hood, this is powered by the add-slide and create-deck actions in templates/slides/actions/.

Eight slide layouts

Built-in layouts: title, section divider, content with bullets, two-column, image, statement or quote, full-bleed, and blank. Each layout is a pure HTML template with inline styles — the agent picks the right one based on slide purpose. Templates live inside templates/slides/AGENTS.md so the agent can reference them without exploring the codebase.

Visual and code editing

Double-click any text to edit inline.
Click a block to open the bubble menu for styles, alignment, and layout.
Switch to the code editor (app/components/editor/CodeEditor.tsx) to edit raw slide HTML.
Use the slash menu (SlideSlashMenu.tsx) to insert blocks by typing /.

AI image generation

Generate images through the Images app when brand libraries matter; once the managed backend is deployed, that path can use Builder-managed image generation and keep the audit trail with the source library. Direct provider-key generation remains the fallback for standalone decks.

Actions: generate-image, edit-image, image-search, logo-lookup. UI panels: ImageGenPanel.tsx, ImageSearchPanel.tsx, LogoSearchPanel.tsx.

Logo and stock image search

logo-lookup --domain acme.com fetches a company logo via Logo.dev or Brandfetch.
image-search --query "mountain landscape" searches Google Images for stock photos.

Comments and threads

Leave comments on specific slides, quote selected text, and reply in threads. Stored in the slide_comments table. Actions: add-slide-comment, list-slide-comments.

Drag and drop reordering

Reorder slides in the sidebar, duplicate, or delete with hover controls. The sidebar lives in app/components/editor/EditorSidebar.tsx.

Presentation mode

Full-screen presentation at /deck/:id/present with keyboard navigation (arrow keys, space, escape), auto-hiding controls, and speaker notes. See app/routes/deck.$id_.present.tsx and app/components/presentation/PresentationView.tsx.

Generate a public read-only URL for a deck so reviewers can view without an account. The share page is app/routes/share.$token.tsx. Fine-grained sharing (viewer, editor, admin roles, per-user or org-wide) is also available via the framework's share-resource action.

Real-time collaboration

Multiple people can edit the same deck simultaneously. Text edits sync through Yjs CRDT so there are no conflicts, and the agent sees and edits the same live document via the update-slide --find/--replace action.

Undo and redo

Cmd+Z and Cmd+Shift+Z work across the whole deck, with a labeled history panel (HistoryPanel.tsx) you can scrub through.

Extract from PDF

Turn a PDF into a starter deck. The extract-pdf action parses the file and hands the content to the agent for layout.

Working with the agent

The agent chat lives in the sidebar. It can create decks, edit individual slides, generate images, search logos, and navigate the UI — all using the same actions you'd run from the CLI.

What the agent sees

When a deck is open, the agent automatically sees:

The current deckId and slideIndex.
The full list of slides in the open deck.
The HTML content of the currently selected slide.

This is injected into every message as a current-screen block, so the agent never has to guess what "this slide" means. The data comes from the navigation application-state key, which the UI writes on every navigation. See templates/slides/actions/view-screen.ts.

Selecting text for focused edits

Select text on a slide and hit Cmd+I to focus the agent with that selection pre-loaded. The agent will act only on what you selected.

Inline slide previews in chat

The agent can embed a live slide preview directly in a chat reply using the framework's embed fence. It renders a chromeless iframe via app/routes/slide.tsx so you can see the result without leaving the conversation.

Data model

All deck data lives in SQL via Drizzle ORM. Schema: templates/slides/server/db/schema.ts.

decks

Column	Type	Notes
`id`	text	Primary key, e.g. `deck-1712345-abc`
`title`	text	Deck title
`data`	text	JSON blob: `{ title, slides: [{ id, content, layout }] }`
`created_at`	text	Timestamp
`updated_at`	text	Timestamp

Each deck also carries the standard ownableColumns (owner, visibility, share token) so it slots into the framework's sharing model.

slide_comments

Column	Notes
`id`	Primary key
`deck_id`	Parent deck
`slide_id`	Slide the comment lives on
`thread_id`, `parent_id`	Threading
`content`, `quoted_text`	Comment body and optional text excerpt
`author_email`, `author_name`	Author
`resolved`	Boolean flag

deck_shares

Framework-provided shares table (created via createSharesTable) that maps principals (users or orgs) to roles (viewer, editor, admin) per deck.

Slide structure

Each slide inside decks.data is:

{
  "id": "slide-1",
  "layout": "title",
  "content": "<div class=\"fmd-slide\" style=\"...\">...</div>"
}

content is raw HTML — the renderer (app/components/deck/SlideRenderer.tsx) provides the black background and fixed aspect ratio, and the HTML provides everything inside. Rich embedding is supported too: Excalidraw diagrams via ExcalidrawSlide.tsx and Mermaid charts via MermaidRenderer.tsx.

Customizing it

The Slides template is fully forkable. Key places to look when extending it:

Actions — `templates/slides/actions/`

Every agent-callable operation lives here as a TypeScript file. A few you'll touch often:

create-deck.ts — new deck from scratch or bulk replace.
add-slide.ts — append one slide; prefer this for streaming generation.
update-slide.ts — surgical find/replace or full content swap.
view-screen.ts — snapshot of what the user sees.
generate-image.ts, edit-image.ts, image-search.ts, logo-lookup.ts — image tooling.
extract-pdf.ts — PDF ingestion.

Every action is auto-mounted at POST /_agent-native/actions/:name and callable from the CLI as pnpm action <name>. Add a new file here to give the agent a new capability.

Routes — `templates/slides/app/routes/`

_index.tsx — deck list.
deck.$id.tsx — the editor.
deck.$id_.present.tsx — presentation mode.
share.$token.tsx — public read-only share page.
slide.tsx — single-slide embed used in chat previews.
settings.tsx — template settings.
team.tsx — org and team management.

Editor components — `templates/slides/app/components/editor/`

Most UI customization happens here: SlideEditor.tsx, EditorToolbar.tsx, EditorSidebar.tsx, bubble menus, slash menu, and the panels for image generation, search, and history.

Skills — `templates/slides/.agents/skills/`

Agent skills that explain patterns when the agent needs to modify code:

create-deck/ — how to create a new deck with slides.
slide-editing/ — how to edit individual slides.
deck-management/ — how decks are stored and accessed.
slide-images/ — image generation and search workflow.

AGENTS.md

templates/slides/AGENTS.md is the single source of truth the agent reads on every conversation. It contains the full action list, every slide HTML template, the navigation state contract, and rules for delegating to sub-agents. Update this file whenever you add an action or a new slide layout pattern.

API routes

For cases where actions aren't the right fit (file uploads, streaming), the template exposes a small set of REST endpoints: GET/POST /api/decks, GET/PUT/DELETE /api/decks/:id. See templates/slides/server/routes/api/.