--- title: "Agent playground — Aaron Chartier" type: playground url: https://aaronchartier.com/for-agents/playground description: "Bring your agent and let it prove it can drive this site — discovery, tool calls, and three challenges, graded live in your browser." --- # Agent playground — Aaron Chartier This page is a course an agent can run, in your browser: discover the site-wide WebMCP catalog, call the in-page `window.__tools` API, and return the structured results those tools promise. The basics are confirmed on load; three challenges are left for your agent. The live scorecard runs on the HTML page: https://aaronchartier.com/for-agents/playground ## Environment The page probes `document.modelContext` (the canonical WebMCP surface) and falls back to `navigator.modelContext` (older preview runtimes). Where neither exists the check is skipped, not failed — the `window.__tools` path works in any browser. ## WebMCP catalog The catalog is the site-wide WebMCP toolset; slugs become snake_case tool names. - `base64` (https://aaronchartier.com/tools/base64) — Unicode-safe Base64 encode and decode, with URL-safe variant. - `url` (https://aaronchartier.com/tools/url) — Percent-encode and decode URLs and query components. - `jwt` (https://aaronchartier.com/tools/jwt) — Decode a JWT's header, payload and time claims — or encode and HMAC-sign a new token. All in the browser. - `hash` (https://aaronchartier.com/tools/hash) — SHA-1 / SHA-256 / SHA-384 / SHA-512 of text or files, via WebCrypto. - `radix` (https://aaronchartier.com/tools/radix) — Binary, octal, decimal, hex — arbitrary precision via BigInt. - `timestamp` (https://aaronchartier.com/tools/timestamp) — Epoch seconds/millis ⇄ human dates, timezone-aware, with relative time. - `cron` (https://aaronchartier.com/tools/cron) — Cron expression → plain-English schedule + the next run times. - `uuid` (https://aaronchartier.com/tools/uuid) — UUID v4 and v7, single or bulk, copy-ready. - `json` (https://aaronchartier.com/tools/json) — Pretty-print, minify, validate — with precise error positions. - `case` (https://aaronchartier.com/tools/case) — camelCase, snake_case, kebab-case, Title Case, CONSTANT_CASE and more. - `diff` (https://aaronchartier.com/tools/diff) — Line and word diff of two texts, computed locally. - `regex` (https://aaronchartier.com/tools/regex) — Live match highlighting, capture groups, and a common-pattern library. - `markdown` (https://aaronchartier.com/tools/markdown) — Split-pane markdown editor — live preview, right-to-left aware, copy as HTML, Markdown, or rich text. - `count` (https://aaronchartier.com/tools/count) — Words, characters, lines, sentences, reading time — plus a live token count (GPT o200k by default, switchable to cl100k or Llama 3). - `plot` (https://aaronchartier.com/tools/plot) — Plot functions on an interactive canvas — pan, zoom, multiple expressions, shareable links. - `lorem` (https://aaronchartier.com/tools/lorem) — Filler text by the word, sentence, or paragraph — copy-ready. - `csv` (https://aaronchartier.com/tools/csv) — CSV to JSON and back — quoted fields, custom delimiters, header-row toggle. Values stay strings. - `color` (https://aaronchartier.com/tools/color) — Hex, rgb, hsl, and oklch — plus a tints-and-shades palette and a WCAG contrast checker. - `data` (https://aaronchartier.com/tools/data) — Convert between JSON, YAML, TOML, and TOON — auto-detects the input, points at the exact parse error, and shows the token-count savings of TOON's compact tabular arrays. - `qr` (https://aaronchartier.com/tools/qr) — Text or URL → QR code as crisp SVG, with download. Decodes images too, where the browser can. - `contact` (https://aaronchartier.com/tools/contact) — Compose a prefilled email draft, plus quick contact links — email, GitHub, LinkedIn. Opens in your own mail client. 21 tools at build time; the playground re-enumerates live, so this count follows the registry. ## Driving the scorecard The scorecard is driveable headlessly. The page registers `window.__tools["playground"]` with the standard `run()`/`describe()` shape — `run()` returns structured values and is async, so `await` it: ```js const pg = window.__tools["playground"]; pg.describe(); // the contract for this API await pg.run({ action: "checks" }); // re-run the automated suite const { phrase, challenges } = await pg.run({ action: "challenges" }); // … exercise a tool on the phrase, then: await pg.run({ action: "submit", challenge: "agent-base64", result: "…" }); ``` ## Automated checks What this page confirms about your browser's agent layer — checked on load, again on demand (`run({ action: "checks" })` or the button). Local and deterministic, each compared to a known answer: 1. `webmcp-surface` — WebMCP runtime present 2. `catalog` — tool catalog registered site-wide 3. `registry` — window.__tools API live on this page 4. `describe` — describe() honors the contract shape 5. `run-sync` — deterministic run matches the pinned value 6. `run-async` — async run resolves the pinned digest 7. `output-shape` — run() output carries its published keys ## Agent challenges Three challenges the page cannot do for you — each exercises a real invocation path, and the playground grades the submission. Every one runs on the same challenge phrase: ``` agent proving ground ``` - `agent-describe` — call describe() on the base64 tool. Read the base64 tool's contract — `window.__tools["base64"].describe()` on `/tools/base64`, or fetch `/tools/base64.json` — and submit the array of its params keys. - `agent-base64` — run the base64 tool on the phrase. Encode the challenge phrase with the base64 tool — the site-wide WebMCP `base64` tool works from this very page, or `window.__tools["base64"].run({ input })` on `/tools/base64`, or the URL form `/tools/base64#input=…` — and submit the encoded output. - `agent-hash` — hash the phrase with SHA-256. Digest the challenge phrase with the hash tool — the WebMCP `hash` tool, or `window.__tools["hash"].run({ input, algo: "SHA-256" })` on `/tools/hash` (async — await it) — and submit the hex digest. Submit with `run({ action: "submit", challenge: "", result: })`. The scorecard row flips live; a tool's structured return is accepted as well as the bare string, and re-submission is allowed. ## Related The contract this playground proves: https://aaronchartier.com/for-agents.md · tool contracts: https://aaronchartier.com/SKILL.md and https://aaronchartier.com/tools/index.json ## Pages [Home](https://aaronchartier.com/index.md) · [About](https://aaronchartier.com/about.md) · [Projects](https://aaronchartier.com/projects.md) · [Now](https://aaronchartier.com/now.md) · [Tools](https://aaronchartier.com/tools) · [Lab](https://aaronchartier.com/lab) · [Skill oracle](https://aaronchartier.com/lab/skill-oracle.md) · [Terminal](https://aaronchartier.com/terminal) · [Blog](https://aaronchartier.com/blog) · [For agents](https://aaronchartier.com/for-agents.md) · [Skill](https://aaronchartier.com/SKILL.md) --- Canonical: https://aaronchartier.com/for-agents/playground · Markdown mirror of the agent playground · © 2026 Aaron Chartier