Case Study

PageShot

A one-button screenshot panel inside the SitecoreAI Pages editor — built end-to-end against a real iframe, real OAuth, and a real Agent API.

Case Study4 min read

The page that wouldn't share itself

Marketers and content authors live inside the SitecoreAI Pages editor. When they want to share what they're working on — in Slack, Teams, an email thread, a release note — they reach for an OS screenshot tool and end up with a frame full of editor chrome, sidebars, and the wrong viewport. The page they were trying to share gets buried under the tool they used to share it.

PageShot is a single Page Builder Context Panel that fixes that. One Capture button, two viewports (Mobile, Desktop), four height presets (Small → Full), and three actions per capture: Copy to clipboard, Download as PNG, Open in a new tab. The image comes out chrome-free because it's rendered server-side by the SitecoreAI Agent API — the editor never sees it.

1
Capture
button
2
viewports
(Mobile · Desktop)
4
height presets
(800 → 8000px)
3
actions per
capture

How it actually works

The panel runs inside the Sitecore Pages iframe and tracks the page the editor is currently on. When you click Capture, the request goes through a small server-side proxy in the app — that's where the OAuth credentials live, never on the client — and the SitecoreAI Agent API renders the page chrome-free at the requested viewport and height. The image comes back as a PNG, gets auto-trimmed of any solid-color padding, and lands in the polaroid-card UI ready for Copy / Download / Open.

The whole app is stateless — no database, no persisted images, no auth on the client. It's a custom app installed on a single tenant rather than published to the public Marketplace, which keeps the threat surface narrow and the rollout simple.

What the build crossed

PageShot was the first Marketplace product shipped through the full agentic pipeline. The build crossed every layer at once — and that's where the discoveries lived.

Build · 01

The integral test

2026-04-22 → 04-23 · Page Builder Context Panel

Harness apps validate skills in the small. PageShot validated them in the integral — styling, OAuth, sandboxing, blob URLs, fonts, all at once.

  • Crossed every layer at once — scaffold, server-side OAuth, Agent API, the Blok design system, Tailwind v4, custom fonts, and the Pages iframe sandbox — all in a single build.
  • Found the sandbox trap — the Pages iframe quietly blocks file downloads. The fix was the Open action: pop the image into a real browser tab where the editor can save it normally.
  • Documented Agent API reality — undocumented response fields, parameter types that disagree with the OpenAPI sample, and no full-page mode (you size the canvas yourself).
  • Established conventions — a naming convention for OAuth credentials so multiple automation clients can coexist per tenant without colliding.
  • Surfaced styling truth — the Blok preset already ships the brand fonts, and Tailwind v4 design tokens belong in a different place than v3 muscle memory expects.

The patches it left behind

Run 10 was the first time the skills met integral pressure — six layers stacked in one build. Eight patches landed and survived re-dogfood on the next scaffold. They cluster into three themes:

  • API surface drift — undocumented response fields, parameter types that disagreed with the OpenAPI sample, and behaviour conventions that only show up the moment you actually call the endpoint.
  • Iframe sandbox reality — the Pages iframe restricts what a hosted app can do; some browser primitives silently no-op rather than failing loudly, and the route handler needs the right Permissions-Policy posture for the outbound API call to survive.
  • Naming and styling conventions — a credential-naming convention so multiple automation clients per tenant don't collide, plus putting Tailwind v4 design tokens where v4 expects them and recognising what the Blok design preset already gives you for free.

Where this leaves the loop

PageShot proved the skill set holds together when six layers stack at once. It also surfaced — for the first time — issues that no type-check, no lint pass, and no agent-side harness would ever have found: the iframe sandbox trap, the response-shape gaps, and the credential naming convention.

QuickCopy was the next step: a clean build with all of PageShot's patches already in place, to verify the loop had actually closed.

Related case studies