# Build an app people and AI agents can both use

This kit accompanies Amit's Carousel Studio YouTube walkthrough. It contains the staged build prompts and the actual Stage 2 reference implementation: a human-editable carousel app with 36 native WebMCP site tools, browser-local resources, PNG ZIP/PDF exports, and portable backups.

## Choose your route

**Run the finished example:** extract the ZIP, open its folder in your coding environment, and follow the commands below.

**Build your own:** create a separate empty project. Paste Prompt 1 from BUILD-PROMPTS.md into your coding agent, finish and inspect the human editor, then run Prompt 2. Use Prompt 3 to test native behavior. Do not run Prompt 1 over the bundled app unless you intend to rebuild it. No private brand repository is required.

## Run the example

Install Node.js 22.12+ (https://nodejs.org/) and pnpm (https://pnpm.io/installation). This snapshot was built with Node 26.4.0 and pnpm 11.19.0. Then, from the extracted kit folder:

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

Open http://127.0.0.1:4317/. Keep the process running. If that port is occupied, stop your own conflicting instance or deliberately change the configuration; the server does not silently choose another port. Different ports, localhost vs 127.0.0.1, and browser profiles have separate saved data.

## Try native site tools

Open the app in a compatible browser-agent environment. Expand Site tools and enable registration. The switch reloads the document. Ask the agent to inspect available native tools before using DEMO-PROMPTS.md.

“Registered locally” means registration succeeded; a real native call is separate evidence. If the browser lacks the API or the agent cannot discover tools, report that limitation. The human editor still works. Check the current [OpenAI site-tools guide](https://learn.chatgpt.com/docs/webmcp) and [WebMCP specification](https://webmachinelearning.github.io/webmcp/); support changes and no universal browser/model compatibility is promised.

The application itself requires no OpenAI API key or separate MCP server. Your coding/browser-agent environment has its own access requirements. The agent supplies slide content; the app has no hidden LLM generation endpoint.

## Save and export

Edits are saved in this browser's IndexedDB. PNG ZIP and PDF exports are generated at 1080 × 1350 and retained locally. Download them with normal browser controls. Use Download project backup for a portable copy; clearing site data can erase local work. Import a backup only after reviewing its summary; imports create a separate collection.

File resources must first be selected by a person through the file picker. Agent upload IDs expire after one hour. A bookmark is a URL reference, not a downloaded document. Native tools do not read arbitrary local paths.

## Verify or customize

```sh
pnpm test
pnpm build
pnpm exec playwright install chromium
# Keep pnpm dev running in a second terminal:
pnpm test:browser
```

Run tests against your local test server, not an unrelated app on the same port. Automated browser tests use isolated profiles. They are not proof of native agent discovery.

Edit copy/branding in src/render.ts, src/model.ts, src/main.tsx and styles as appropriate; retain the shared validation and rendering architecture. Use fonts/assets you are allowed to redistribute. Deployment, authentication, cloud sync and social publishing are outside this local teaching example.

## Files

- BUILD-PROMPTS.md — complete portable stages 1–3.
- DEMO-PROMPTS.md — copy/paste native creation, editing, resources and backup tasks.
- app/ — runnable source, lockfile, tests, bundled fonts and native tool documentation.
- VERIFICATION.md — observed results and limits.
- RESOURCES.md / ATTRIBUTION.md — original inspiration and technical references.