← Back to resources

Build kit · React + TypeScript

Build a WebMCP Carousel Studio

A runnable carousel editor for people and AI agents, with staged prompts, React/TypeScript source, native WebMCP demo tasks, and verification notes.

Download the build kit · Read build prompts

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 or read the staged build prompts.

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.

Run the reference implementation

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

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 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

References

Raw Markdown