agent-first slide renderer

let your agent
make slide decks

deckpipe gives your agent a free canvas for slides. HTML, CSS, JS — no templates, no layouts, no limits.

connect mcp
example deck / the deep sea →
01 what it does

rendering engine for agents.

your agent writes each slide as HTML, CSS, and JS. deckpipe sandboxes, themes, and hosts the deck.

feature/ 01

code canvas

every slide is HTML, CSS, and JS in a sandboxed 1920×1080 shadow root. your agent designs pixel-perfect — no template lock-in.

feature/ 02

MCP native

remote server at /mcp for any MCP-aware agent. local install via npx deckpipe-mcp for stdio transport.

feature/ 03

design system

a deck-level stylesheet is adopted by every slide — your design system, written once. head loads Google Fonts, CDN scripts, icon libraries.

feature/ 04

live editing

click any text in a canvas slide to edit it. structural changes via insert, delete, move, replace. your agent patches one element without re-sending the deck.

feature/ 05

comments

you click any element to comment. your agent reads the feedback, updates the deck, and replies.

feature/ 06

inline screenshots

preview_slide and get_slide_screenshot return the rendered PNG inline plus a render report — overflows, JS errors, font loads. your agent sees what reviewers see, before committing.

02 connect

connect deckpipe to your agent.

supports local and remote mcp.

01 //remote mcp
> https://deckpipe.dev/mcp
02 //claude code
$ claude mcp add deckpipe -- npx deckpipe-mcp
03 //manual mcp config
{
  "mcpServers": {
    "deckpipe": {
      "command": "npx",
      "args": ["-y", "deckpipe-mcp"]
    }
  }
}

On Claude desktop or web? Add the connector under Settings → Connectors → Add custom connector with URL https://deckpipe.dev/mcp. The deckpipe-design skill goes in Settings → Capabilities → Customize → Skills — upload skill.md.

03 skill / any agent

a design skill for your agent.

a markdown file your agent loads automatically. covers the brief-clarification questions, density rules, reference-style cheatsheet, layout-safety pattern, and the post-create overflow sweep — the design judgment we'd otherwise teach your agent through trial and error.

01 //install (recommended)
multi-agent 
$ npx skills add bjoern2000/deckpipe
02 //manual (claude code)
$ mkdir -p ~/.claude/skills/deckpipe-design
$ curl -o ~/.claude/skills/deckpipe-design/SKILL.md https://deckpipe.dev/skill.md
read it //SKILL.md
open → 
> https://deckpipe.dev/skill.md

npx skills add works with Claude Code, Codex, Cursor, Windsurf, Cline, Roo, and most open-skills-aware agents — it auto-discovers the skill inside the repo and drops it at the right local path. Re-run the command to update.

04 mcp tools

the full api.

small and focused.

create_deck
clone_deck
get_deck
update_deck
delete_deck
preview_slide
get_slide_screenshot
upload_image
search_images
list_layouts
list_comments
reply_to_comment
resolve_comment
05 canvas

the slide is code.

every slide is { html, css?, js? }, mounted in a sandboxed shadow root. design tokens — stylesheet and head — live on the deck and flow into every slide. change one field, the deck re-renders.

html slide markup, designed at 1920×1080
css scoped to this slide, adopted into the shadow root
js runs on slide enter with (root, slide); returns a cleanup function
static_render_only skip JS in print, PDF export, and screenshots
stylesheet (deck) global CSS adopted by every slide — your design system
head (deck) Google Fonts <link>s, CDN scripts, icon-font stylesheets

on a canvas slide your agent can drop any lucide icon, any emoji, or any image — it's just HTML.