---
title: "Build a WebMCP Carousel Studio"
subtitle: "A runnable carousel editor for people and AI agents"
slug: "webmcp-carousel-studio"
type: "Build kit"
format: "React + TypeScript"
---

# Build a WebMCP Carousel Studio

## A runnable carousel editor for people and AI agents

**This build kit pairs staged prompts with a local React/TypeScript reference implementation of a human-editable carousel studio.** It includes browser-local storage, PNG ZIP and PDF export, portable backups, and native WebMCP site-tool contracts for agent-assisted work.

[Download the complete build kit](/resources/webmcp-carousel-studio/webmcp-carousel-studio-kit.zip) or [read the staged build prompts](/resources/webmcp-carousel-studio/BUILD-PROMPTS.md).

## What is in the kit

- `app/` — runnable React, TypeScript, Vite source, frozen lockfile, tests, WebMCP documentation, capability matrix, bundled fonts, and notices.
- `BUILD-PROMPTS.md` — three portable stages: build the human editor, add native site tools, then run a native acceptance procedure.
- `DEMO-PROMPTS.md` — copy/paste tasks for creating, editing, validating, exporting, saving resources, and creating a portable backup.
- `START-HERE.md` — installation, local-storage, export, and testing guidance.
- `VERIFICATION.md`, `RESOURCES.md`, and `ATTRIBUTION.md` — observed evidence, primary references, and the included-material notices.

The downloadable ZIP has 41 files and SHA-256 `9c7982b4a527434fe6be3cb5dea6144700223935e8f824b92797b7cabe93e5e3`. [Read the published checksum file](/resources/webmcp-carousel-studio/SHA256SUMS.txt).

## Run the reference implementation

The kit requires Node.js 22.12+ and pnpm. From the extracted directory:

```sh
cd app
pnpm install --frozen-lockfile
pnpm dev
```

The local server is intentionally bound to `127.0.0.1:4317`. That is a local demo address, not a public hosted app or download URL. The application itself requires no API key; a browser-agent environment has its own compatibility and access requirements.

## Build it in stages

1. Start in a separate empty project with [Prompt 1](/resources/webmcp-carousel-studio/BUILD-PROMPTS.md) to build and inspect the human editor.
2. Use Prompt 2 to add native WebMCP site tools over the same validated command layer.
3. Use Prompt 3 as an acceptance and recording procedure. It is not a completed universal benchmark.

The reference app contains 36 native site-tool handlers for the editor’s supported actions. Its automated tests exercise that surface, while the published verification record distinguishes those tests from the smaller set of real browser-native calls observed in one session.

## Keep the limits visible

- WebMCP/site-tool support varies by browser-agent environment. Do not infer universal browser or model compatibility from this kit.
- The observed native session covered context reading, creation, validation, export, status, selection, and reopening. Full native acceptance of all 36 handlers is not complete.
- Stage 3 is a procedure viewers can run. It is not a finished controlled speed, token, or quality comparison, and the kit makes no performance claim.
- Posts, uploads, retained exports, and backups are stored locally in the browser. A person must select files through the file picker; tools do not read arbitrary local paths.

## Use the supporting guides

- [Start here](/resources/webmcp-carousel-studio/START-HERE.md)
- [Copy the demo prompts](/resources/webmcp-carousel-studio/DEMO-PROMPTS.md)
- [Read the verification snapshot](/resources/webmcp-carousel-studio/VERIFICATION.md)
- [Review references](/resources/webmcp-carousel-studio/RESOURCES.md)
- [Read attribution and font notices](/resources/webmcp-carousel-studio/ATTRIBUTION.md)

## References

- [OpenAI site-tools guide](https://learn.chatgpt.com/docs/webmcp)
- [WebMCP specification](https://webmachinelearning.github.io/webmcp/)
- [Vertica source, credited as workflow inspiration](https://github.com/owainlewis/vertica)
- [Owain Lewis’s inspiration video](https://www.youtube.com/watch?v=6YHPZ9IJotk)