open-slide: A Slide Framework Built for AI Agents

Open-slide: A Deep Dive into the Agent-Native Slide Framework

open-slide GitHub cover

Open-slide is more than a slide builder. It is a runtime and framework designed to bridge the gap between AI-driven content creation and polished presentation delivery. By separating content from presentation mechanics, it lets a coding or language model agent focus on writing the deck, while open-slide handles the visuals, navigation, and delivery workflow. Every slide renders on a fixed canvas of 1920 × 1080, ensuring a consistent and professional look regardless of the host platform. The pages themselves are arbitrary React components, not constrained by a domain-specific language, which means you can embed rich interactivity and custom layouts without fighting the tooling.

This article unpacks what open-slide is, why it was built this way, and how you can start using it to generate, refine, and deploy high-quality decks with AI agents at the helm.

What open-slide is and why it exists

At its core, open-slide is the missing runtime that makes AI-written slide content feel seamless and production-ready. AI agents excel at writing and planning content, but there is a stubborn gap between “draft content” and “presentable deck.” Open-slide closes that loop by providing:

A robust, predictable rendering surface (the 1920 × 1080 canvas) and a scalable layout system.
A set of accessible tools for authoring, inspecting, and refining slides directly in the browser.
A smooth pipeline for exporting to shareable formats like static HTML and PDF.
A developer-friendly architecture that supports agent-driven workflows across various coding agents and runtimes.

The philosophy is simple: give the agent a free hand to create the narrative, then let the slide engine handle the craft. The agent can propose structure, typography, color palettes, spacing, and motion; open-slide ensures those choices render cleanly, scale well, and stay consistent across pages.

Highlights and what makes open-slide unique

The project emphasizes agent-native authoring, in-browser iteration, and production-ready outputs. Here are the core capabilities, organized for easy scanning and future reference.

🤖 Agent-native authoring

Works with any coding agent (Claude Code, Codex, Cursor, and more). The framework is designed to be agent-agnostic, so you can plug in the AI you like best without changing how slides are rendered or how pages are composed.
Built-in agent skills to accelerate deck creation:
/create-slide — drafts a deck end-to-end. It asks four scoping questions (topic & aesthetic choices, desired page count, text density, motion versus static presentation), selects an identifier, plans the deck structure, and writes the pages.
/slide-authoring — the technical reference for the 1920 × 1080 canvas, type scale, palette, and layout rules. The agent consults these guidelines before writing, ensuring consistency with the design system.
From a single-line prompt to a polished deck, you can bypass boilerplate while preserving control over the final result.

🎯 In-browser inspector

Interactive, live feedback loops: click any element in the dev server and attach a comment, such as “make this red,” “change to ‘Open Slide Rocks,’” or “shrink the headline.”
Comments are persisted as @slide-comment markers in the source. With a simple run of /apply-comments, the agent processes all pending edits and clears the markers, then you can repeat the loop.
The flow is present → click to comment → /apply-comments → repeat. This makes iterative refinement natural and fast.

🖼️ Assets manager + svgl logo search

An integrated assets panel manages images, videos, and fonts per deck. It centralizes media so you can reuse assets across slides without hunting for files.
Built-in svgl logo search: find and drop in brand logos via the svgl catalogue (https://svgl.app/). This streamlines branding work and eliminates the friction of sourcing clean SVGs.

🎬 Professional present mode

Fullscreen playback with keyboard navigation, ensuring the presentation stands on its own outside the browser tab.
Presenter mode provides a current/next slide preview, speaker notes, and a timer. It is designed for the stage, not just on-screen reference, making it easier to pace a live talk.

📦 Export to static HTML & PDF

A single command exports the deck as a self-contained static HTML site or a print-ready PDF. Share with others who don’t rely on a server or a particular runtime.
The export process preserves the fidelity of the 1920 × 1080 canvas, layout, typography, and media so the deck looks as intended in all formats.

📁 Slide manager

Organize decks into folders with custom emoji and drag-and-drop reordering. This becomes especially valuable when you build multiple decks and need a scalable way to locate and rearrange slides.

🚀 Deploy-friendly

Outputs a plain static build suitable for one-click deployment to Vercel, Cloudflare Pages, Zeabur, Netlify, or any static host.
No server, no runtime, no lock-in. The deck is portable and easy to share or publish.

Get started

Getting up and running with open-slide is straightforward. The following commands outline a typical workflow to scaffold a new deck, run a development server, and begin iterating with your agent.

Create a new slide project and start the dev server:
npx @open-slide/cli init my-slide
cd my-slide
pnpm dev

From here, you can drive the deck through your agent and/or edit the slide definitions directly in slides/index.tsx if you prefer to tinker by hand. The workflow is designed to be as smooth as possible for both AI-driven creation and manual fine-tuning.

For reference and deeper guidelines, you can consult the hard rules defined in the CLAUDE.md file within the project.

Repository layout and what each piece does

Open-slide is organized as a monorepo built with pnpm and Turbo to enable fast iteration across packages. The core idea is to separate runtime, tooling, and example usage while keeping them tightly integrated.

[packages/core] — @open-slide/core
The runtime that powers the deck experience: the home page, the slide viewer, present mode, and the inspector.
Vite plugin and the open-slide CLI experience live here. This is the foundation that renders slides, handles navigation, and manages the present mode.
[packages/cli] — @open-slide/cli
The scaffolder you invoke with npx @open-slide/cli init.
Generates a minimal workspace with Vite, React, and TypeScript configuration, ensuring core runtime stays stable and hidden from the scaffolded experience until you’re ready.
[apps/demo] — Example workspace
A practical demonstration that consumes @open-slide/core through workspace references.
Used to develop and test the framework locally, acting as a living example of how a deck might be authored and presented using open-slide.

This modular structure keeps development focused and efficient: the core handles rendering, the CLI assists with project setup, and the demo app provides a real-world instantiation of the framework.

Development workflow and commands

To contribute or experiment, you’ll typically follow a sequence like this. The exact commands may evolve with newer releases, but the general pattern remains stable:

Install dependencies and start local development:
pnpm install
pnpm dev (runs the demo against the local @open-slide/core)
Build and test:
pnpm build (builds all packages)
pnpm check (type-checks all packages)
pnpm lint (lints via the configured linter)
Optional: explore the demo and its integration with the core runtime to understand how a deck is wired to the agent and how slides render.

This setup emphasizes a fast feedback loop: you can tweak slide content, adjust palette or typography, and immediately see how changes propagate through the rendering pipeline and the present mode.

How to extend and customize

Design system alignment: The /slide-authoring reference defines the 1920 × 1080 canvas, type scale, palette, and layout rules. By aligning your agent prompts with these rules, you can achieve consistent typography and spacing across the deck.
Agent integration: The framework is agent-agnostic by design. You can plug in Claude Code, Codex, Cursor, or other agents and reuse the same runtime resources. The goal is to let agents focus on content planning while open-slide handles the presentation mechanics.
Asset management: The built-in assets panel, combined with the svgl catalogue, makes it straightforward to standardize media usage across slides. You can attach images, fonts, or videos and reference them consistently from the slide components.
Present mode enhancements: The present mode could be extended with additional features like live annotation, audience interaction prompts, or timed transitions to suit more complex stages or conference environments.

Support, licensing, and community

Open-slide is released under the MIT license, inviting developers to adapt, extend, and share improvements. If the project has been useful to you, there are ways to support ongoing development, including a Ko-fi button linked in the project documentation. The goal is to empower a community of builders who want to create polished slide decks with AI assistance, without friction or vendor lock-in.

License: MIT
Support: If you appreciate the project and want to contribute or sponsor, consider supporting the maintainers through available channels linked in the repository.
Community: The framework is designed to be broadly compatible with multiple AI agents and development environments, encouraging experimentation and collaboration across teams.

Practical notes: how the visuals come together

One of the clearest advantages of open-slide is the separation of concerns between content generation and presentation craft. The agent concentrates on the narrative flow, slide topics, and textual content, while open-slide enforces a consistent canvas, typography, and layout discipline. This division reduces churn: when the narrative evolves, you only adjust the content or prompts, not the rendering engine.

The fixed canvas dimension (1920 × 1080) ensures that any deck you generate will look crisp on modern displays and projector setups. Because pages are actual React components, you can embed charts, code blocks, interactive elements, or embedded media just as you would in a dynamic web app. The agent can draft a slide layout, while the runner ensures typography scales appropriately, spacing remains harmonious, and transitions feel smooth when moving from one slide to the next.

The in-browser inspector and comment system makes iterative design intuitive. Instead of a long feedback cycle with external tooling or manual edits, you can annotate directly where changes are needed and push those edits through the agent’s /apply-comments process. This keeps the collaboration tight between human feedback and machine-assisted content generation.

Exporting to static HTML or PDF is another practical strength. Teams can share decks with stakeholders who do not have the runtime installed, or print a version for distribution. The resulting assets are portable and ready for deployment to any static hosting environment, enabling smooth sharing across organizations and events.

A quick look at the included image assets

The included image from the input, “open-slide GitHub cover,” serves as a visual anchor for this project’s branding and presentation approach. It captures the essence of a deck framework designed for agents, highlighting the balance between natural language description and programmatic rendering. The image pairs well with the narrative in this article, illustrating the concept of a slide framework that is both developer-friendly and presentation-ready.

In addition to this image, the framework’s design logic encourages the use of integrated media sources such as the svgl catalog for scalable vector graphics. By leveraging a centralized asset pipeline and a fixed canvas approach, decks gain consistency across slides while leaving room for expressive typography and layout tuning under agent guidance.

Conclusion: elevating slide creation with AI collaboration

Open-slide represents a thoughtful convergence of AI-driven content generation and robust presentation tooling. By letting agents draft slides while the framework handles rendering, navigation, and export, creators can move from concept to polished deck with speed and confidence. The agent-native authoring workflow, the in-browser collaboration loop, the asset management capabilities, and the professional present mode all contribute to a tooling ecosystem where AI and human input complement each other.

If you are exploring AI-assisted deck creation, open-slide offers a compelling blueprint for how to structure the interaction: a fixed and predictable rendering surface, a flexible content surface that respects React-based page design, and a workflow that keeps iteration fast and feedback actionable. Whether you’re drafting a technical talk, a product pitch, or a course module, this framework is designed to scale with your ideas while preserving the clarity and polish that audiences expect from modern presentations.

As you begin experimenting, remember to leverage the scaffold’s default agent skills, explore the assets panel to curate imagery and branding, and use the present mode to rehearse with confidence. The combination of agent-driven drafting and a production-ready slide engine positions you to deliver engaging, well-structured talks with less friction and more freedom to iterate.