---
title: "Slides"
description: "Generate decks from a prompt, edit visually, and present full-screen — an open-source replacement for Google Slides, Pitch, and PowerPoint, with import/export, design systems, and real-time collaboration built in."
---

# 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. It's an open-source replacement for Google Slides, Pitch, and PowerPoint — a deck editor you own end to end: generate, import, edit, present, and export without a subscription.

<WireframeBlock id="doc-block-slides1">
  <Screen
    surface="desktop"
    html={
      "<div style='display:flex;flex-direction:column;gap:12px;padding:16px;min-height:530px;box-sizing:border-box'><div style='display:flex;align-items:center;gap:10px'><h1 style='margin:0'>Q3 Board Update</h1><span class='wf-pill accent'>Title slide</span><div style='flex:1'></div><button>Preview</button><button>Present</button><button class='primary'>Share</button></div><main style='display:grid;grid-template-columns:1fr 220px;gap:12px;flex:1;min-height:0'><section class='wf-card' style='display:flex;align-items:center;justify-content:center;text-align:center;padding:36px'><div><strong style='font-size:28px'>Q3 Board Update</strong><br/><small>Maya Chen · CEO</small><div style='height:46px'></div><span class='wf-pill'>Product momentum</span></div></section><section style='display:flex;flex-direction:column;gap:10px'><div class='wf-card'><strong>Slide outline</strong><div class='wf-box'>1 Title</div><div class='wf-box'>2 Agenda</div><div class='wf-box'>3 Metrics</div><div class='wf-box'>4 Shipped</div><div class='wf-box'>5 Risks</div></div><div class='wf-card' style='flex:1'><strong>Speaker notes</strong><p class='wf-muted' style='margin:8px 0 0'>Open with launch progress and retention story.</p></div></section></main><div style='display:grid;grid-template-columns:repeat(5,1fr);gap:8px'><div class='wf-box'>1 Title</div><div class='wf-box'>2 Agenda</div><div class='wf-box'>3 Metrics</div><div class='wf-box'>4 Shipped</div><div class='wf-box'>5 Risks</div></div></div>"
    }
  />
</WireframeBlock>

When you open a deck, the slide canvas, outline, notes, and filmstrip stay in one editor surface while the agent can still create, revise, and navigate slides through the same actions.

<Diagram id="doc-block-slides2" title="Prompt to deck" summary="Ask for a deck and the agent streams slides in one at a time using the same tools you can also drive yourself.">

```html
<div class="diagram-flow">
  <div class="diagram-node">
    Prompt<br /><small class="diagram-muted">"10-slide pitch deck"</small>
  </div>
  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
  <div class="diagram-panel center">
    <span class="diagram-pill accent">Agent</span
    ><small class="diagram-muted">picks layouts</small>
  </div>
  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
  <div class="diagram-col">
    <div class="diagram-pill">create-deck</div>
    <div class="diagram-pill">add-slide &#215; n</div>
    <small class="diagram-muted">one slide at a time</small>
  </div>
  <div class="diagram-arrow diagram-muted" aria-hidden="true">&rarr;</div>
  <div class="diagram-box" data-rough>decks (SQL)</div>
  <div class="diagram-arrow diagram-muted" aria-hidden="true">&#8635;</div>
  <div class="diagram-box">Editor renders live</div>
</div>
```

```css
.diagram-flow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.diagram-flow .diagram-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.diagram-flow .center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.diagram-flow .diagram-arrow {
  font-size: 22px;
  line-height: 1;
}
```

</Diagram>

Before generating something new, the agent first checks whether an approved asset or a past deck already covers what you asked for — see [Talking to the Agent & Creative Context](/docs/template-slides-agent).

## 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." See [Generating & Editing Decks](/docs/template-slides-editing).
- **Edit slides visually.** Double-click text to edit, click a block for the bubble menu, use `/` for the slash menu to insert blocks. See [Generating & Editing Decks](/docs/template-slides-editing).
- **Present full-screen**, comment, collaborate in real time, and share a deck — publicly or with specific teammates. See [Generating & Editing Decks](/docs/template-slides-editing).
- **Bring in existing content.** Import a PPTX, DOCX, PDF, or Google Doc as a starting point; export to PPTX, Google Slides, or a standalone HTML file. See [Design Systems & Media](/docs/template-slides-design-and-media).
- **Apply a design system built from your brand.** Save colors, type, and logos once and reuse them on every new deck — set one up from a Figma file, a connected codebase, or a website. See [Design Systems & Media](/docs/template-slides-design-and-media).
- **Generate images, search stock photos, and look up company logos.** See [Design Systems & Media](/docs/template-slides-design-and-media).
- **Restore earlier versions.** Every change is snapshotted; list or restore any prior version. See [Generating & Editing Decks](/docs/template-slides-editing).

## Getting started

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

When you open the app:

1. Click **New deck**.
2. Ask the agent: "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. Select text and hit `Cmd+I` to focus the agent on exactly what you highlighted.

### 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."
- "Summarize this PDF as a 6-slide deck." (attach the PDF)

To scaffold your own copy of Slides:

```bash
npx @agent-native/core@latest create my-slides --standalone --template slides
```

See [Getting started](/docs/getting-started) for the rest of the setup (`cd`, `pnpm install`, `pnpm dev`) and the framework fundamentals.

## What's next

- [**Generating & Editing Decks**](/docs/template-slides-editing) — prompts, visual editing, presenting, comments, sharing, and version history
- [**Design Systems & Media**](/docs/template-slides-design-and-media) — brand tokens, Figma/GitHub indexing, images, and import/export
- [**Talking to the Agent & Creative Context**](/docs/template-slides-agent) — what the agent sees, prompts by task, and the reuse ladder
- [**Developer Guide**](/docs/template-slides-developers) — data model, action inventory, routes, and how to extend the template
- [**Templates**](/docs/cloneable-saas) — the Cloneable SaaS model, and every other domain template to start from
- [**Getting Started**](/docs/getting-started) — the framework fundamentals: actions, application state, and live sync
- [**Real-Time Collaboration**](/docs/real-time-collaboration) — the Yjs pipeline decks share with other collaborative surfaces
- [**Sharing**](/docs/sharing) — the share-grant model decks and design systems build on