Open Slide: A Slide Framework Built for Agents

Picture this: you're building a demo for an AI agent that needs to present slides dynamically. Or maybe you're prototyping an interactive tutorial where a bot walks users through content. You reach for a slide framework, but most are built for humans clicking through presentations. They don't natively support programmatic control, or real-time updates, or agent-driven navigation.

That's exactly what Open Slide solves. It's a lightweight, developer-friendly slide framework designed from the ground up for agents — not presenters.

What It Does

Open Slide is a JavaScript/TypeScript slide library that lets you create presentations controlled entirely by code. Instead of relying on keyboard arrows or mouse clicks, you build slides as data structures, then programmatically trigger transitions, updates, and interactions.

Under the hood, it renders slides using standard web technologies (HTML/CSS/JS), but the control layer is fully API-driven. Think of it as a presentation engine where your code is the presenter.

A typical slide definition looks something like this:

const slide = {
  title: "Why Agents Need Slides",
  content: "Presentations are just structured data",
  layout: "center"
};

Then you can advance, rewind, or jump to specific slides with simple function calls — ideal for integration with LLM outputs, state machines, or automation workflows.

Why It's Cool

What makes Open Slide different from existing slide tools?

Agent-first control – The whole design assumes a non-human "driver". Every slide transition, every content update, every timing decision can be triggered programmatically. No click handlers, no user events required.

Lightweight and framework-agnostic – It's a single library with zero dependencies. Works in any web context — standalone HTML, React, Vue, or even inside Electron apps. No bloat, no build step required.

Declarative slide definitions – Slides are just JSON objects. This means you can generate presentations from AI responses, database queries, or configuration files. The content and structure are completely decoupled from the rendering.

Perfect for demos and agent UIs – If you've ever needed an agent to present findings, walk through steps, or show a sequence of results, this is the natural tool. It also works beautifully for automated testing of presentation logic.

How to Try It

Getting started is trivial. Clone the repo or install via npm:

npm install open-slide

Or grab the minified file and include it directly:

<script src="open-slide.min.js"></script>

Create a simple presentation:

const slides = [
  { content: "Hello, agent world!" },
  { content: "Slide two with custom layout" }
];

const presentation = new OpenSlide(slides);
presentation.next(); // programmatically advance

The README has a full example you can copy-paste into an HTML file and open in your browser. No server, no build step.

Final Thoughts

Open Slide is one of those niche tools that solves a problem you didn't realize you had — until you're trying to make an agent present something. It's not trying to replace PowerPoint or reveal.js. It's a focused, minimal library for a very specific use case: making slides that agents can own.

If you're building agent systems, prototyping AI interactions, or just want a clean API for controlling presentations from code, give it a shot. It's refreshingly simple and does exactly what it promises.

Check it out on GitHub: https://github.com/1weiho/open-slide

Originally shared on @githubprojects