---
title: "Slides"
description: "Generate decks from a prompt, edit visually, and present full-screen. An open-source replacement for Google Slides, Pitch, and PowerPoint."
---

# 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.

<!-- screenshot:
  app: slides
  view: /deck/<id>
  shows: Deck editor with a "Q3 Board Update" deck open — collapsed left icon rail (Decks / Design Systems / Team), slides thumbnail strip (6 slides — title, agenda, metrics, what we shipped, what we're watching), main slide preview showing the title slide by Maya Chen CEO, speaker notes pane, and the agent chat sidebar with deck-aware suggestions
  account: screenshot-account (deck authored on this account via the standard create-deck + add-slide flow)
  capture: 1400x800 viewport, cropped 90px from bottom (final 1400x710); collapse the left rail before capture
-->

![Slides deck editor with a deck open and slide thumbnails on the left](/screenshots/slides.png)

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 Assets, 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.
- **Import from other formats.** Import PPTX, DOCX, Google Docs, GitHub repos, or any URL as a starting point. Export to PPTX, Google Slides, or HTML.
- **Apply design systems.** Brand tokens, custom instructions, and default palettes are saved as design systems and applied to new decks.
- **Restore earlier versions.** Each deck change is snapshotted; list or restore any prior version.

## Getting started

Live demo: [slides.agent-native.com](https://slides.agent-native.com).

When you open the app:

1. Click **New deck**.
2. In the agent sidebar, ask: "Generate a 10-slide pitch deck for a coffee subscription service, audience is investors."
3. 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.

## Why it's interesting

Three things make Slides a good showcase of the framework:

1. **Streamed, parallel generation.** The agent fires parallel `add-slide` calls so you see the deck assemble in real time — one slide at a time — rather than waiting for a full batch. That pattern works for any content type that benefits from progressive rendering.
2. **Agent and editor share one document.** The same Yjs CRDT that lets two humans type concurrently is what the agent writes through via `update-slide --find/--replace`. There is no separate "AI-only" edit path.
3. **Multi-modal source ingestion.** PPTX, DOCX, Google Docs, PDFs, URLs, and GitHub repos all feed through the same `import-*` action surface. Adding a new source format is a single action file; the agent picks it up immediately.

## 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:

```bash
npx @agent-native/core@latest create my-slides --standalone --template slides
cd my-slides
pnpm install
pnpm dev
```

### Key features (technical) {#key-features}

#### Import and export

The template can pull content in from PPTX (`import-pptx`), DOCX (`import-docx`), Google Docs (`import-google-doc`), arbitrary URLs (`import-from-url`), and GitHub repos (`import-github`). Export paths cover PPTX (`export-pptx`), Google Slides (`export-google-slides`), and HTML (`export-html`). Importing uses the same action surface as the rest of the template — no separate pipeline.

#### Design systems

Reusable brand tokens are stored in the `design_systems` table (colors, typography, spacing, assets, custom instructions, and an `is_default` flag). Sharing is managed via `design_system_shares`. Actions: `create-design-system`, `update-design-system`, `get-design-system`, `list-design-systems`, `set-default-design-system`, `apply-design-system`, and `analyze-brand-assets` (collects brand data before analysis). See the `design-systems` and `image-generation-via-a2a` skills for the full pattern.

#### Deck versions

Every significant deck change is snapshotted in the `deck_versions` table (stores a full copy of title and deck data with an optional `changeLabel`). Actions: `list-deck-versions`, `restore-deck-version`, `get-deck-version`.

#### 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/`.

### Seven slide layouts

Built-in layouts: title, section divider, content with bullets, two-column, statement or quote, metrics or stats, and closing or CTA. Each layout is a pure HTML template with inline styles — the agent picks the right one based on slide purpose. The exact templates live inside `templates/slides/.agents/skills/create-deck/SKILL.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 Assets 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`.

### Share links

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.

#### deck_versions

Point-in-time snapshots of a deck — `deck_id`, `title`, `data` (full deck JSON), and an optional `change_label`. Used by `list-deck-versions` / `restore-deck-version`.

#### design_systems

Reusable brand tokens — `data` (colors/typography/spacing), `assets`, `custom_instructions`, and an `is_default` flag. Uses `ownableColumns` so design systems can be shared per-user or per-org.

#### design_system_shares

Framework shares table for design systems, mapping principals to roles (viewer, editor, admin).

#### deck_share_links

Persisted public share-link snapshots keyed by `token`. Each row stores a `title`, a JSON `slides` array snapshot, an optional `aspect_ratio`, and `created_at`. Persisting share links here means they survive server restarts and work across serverless instances.

#### Slide structure

Each slide inside `decks.data` is:

```json
{
  "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 {#customizing}

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 short router the agent reads on every conversation. It points at the skills under `.agents/skills/` and lays out the core rules, application-state contract, and skill index. The exact slide HTML templates for every layout live in `.agents/skills/create-deck/SKILL.md` — update that skill whenever you add or change a 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/`.
