Multiple AI agents that collaborate to build and edit slides
Slidant is a platform where several AI agents divide roles to generate and edit HTML slides. Users describe what they want in plain language, agents produce a proposal, and users accept or reject changes component by component.
Most AI slide tools focus on generation — create once, done. Slidant is designed around continuous editing and collaboration.
| Typical AI slide tools | Slidant | |
|---|---|---|
| Editing | Full regeneration | Per-component edits |
| AI role | Single generator | Role-divided collaborative agents |
| Change tracking | None | Version history + rollback |
| Conflict handling | None | Conflict visualization + manual resolution |
| Expressiveness | Template-bound | Full CSS (animation, SVG, etc.) |
Each slide is stored as a single HTML string, rendered as-is in an <iframe>. Anything CSS can do is available — gradients, animations, SVG, blur effects, and more.
<div class="slide">
<div data-component-id="bg" style="position:absolute;inset:0;background:#0A0F1E"></div>
<div data-component-id="title" style="position:absolute;left:80px;top:170px;font-size:68px;color:#F9FAFB">
Title
</div>
</div>Every element carries a data-component-id. This ID is the key for the approval UI, version diffs, and conflict detection.
The pipeline routes each request through specialized nodes:
- unified_planner — parses intent, decides which operations to run
- web_searcher / search_merger — fetches reference content when needed
- ops_dispatcher — routes to the right worker node(s)
- html_editor — edits existing slide components
- slide_composer / html_aggregator — composes new slides
- component_deleter / slide_deleter — removes elements
- self_reviewer / formatter — quality check and cleanup
- html_validator / retry_inc — validates HTML, retries on failure
Agents never modify slides directly. They submit a proposal (AgentProposal), and the user picks which components to keep.
Three built-in agents:
| Agent | Responsibility |
|---|---|
| ContentAgent | Text, copy, structure |
| DesignAgent | Color, typography, visual style |
| LayoutAgent | Position, spacing, composition |
Multiple agents can edit the same slide simultaneously. If two agents touch the same component, a conflict is detected and the user chooses which version to use.
Every change is recorded. Per-component change logs are available, and any past snapshot can be restored.
| Layer | Tech |
|---|---|
| Frontend | React + TypeScript + Vite |
| Slide rendering | <iframe srcDoc> |
| Backend | FastAPI + Python 3.12 |
| Agent orchestration | LangGraph |
| LLM | OpenRouter (default) / Anthropic Claude |
| Database | PostgreSQL |
| Cache | Redis |
| Realtime | SSE (Server-Sent Events) |
- Docker & Docker Compose
- LLM API key (OpenRouter or Anthropic)
git clone https://github.com/bssm-oss/Slidant.git
cd slidant
cp .env.example .env
cp api/.env.example api/.env
# Set OPENROUTER_API_KEY or ANTHROPIC_API_KEY in api/.env
docker compose up --build- UI:
http://localhost - API:
http://localhost:8000
Backend
cd api
python -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt
docker compose up db redis -d # infra only
alembic upgrade head
uvicorn app.main:app --reload --port 8000Frontend
cd ui
pnpm install
pnpm devUsers register their own LLM API keys. Keys are encrypted at rest with AES-256 (Fernet); plaintext exists only in memory during request handling and is never written to logs or error responses.
MIT