Clunk

A game-asset shop where a person and their agent use one screen: the agent pulls the capsule machine, shops by measured facts, drives the 3D viewer and creates assets via WebMCP.

Comment

The problem

Indie game developers spend hours in asset stores guessing: is this model actually game-ready? How many triangles, how many materials, does it have a walk clip, will it pass my engine's budget? Store pages show renders, not measurements. And an AI agent helping a developer cannot use a normal store at all: it cannot see the 3D viewer, cannot pull a lever, cannot verify a file before recommending it.

What Clunk is

Clunk is a small marketplace of real, measured game assets (3D models, sprite sheets, tileable textures) plus a studio that builds new ones. Every listing carries facts that were measured from the file bytes: polygons, materials, bounding size, animation clips, file size, a game-ready score. The front page is a physical capsule machine: pick a theme, pull the lever, a capsule drops, open it, and a real asset from the catalogue is yours.

Why WebMCP fits

Clunk's data already lives on the page: the catalogue, the measured facts, the 3D viewer's controls, the machine's state. WebMCP lets us hand exactly those controls to the agent that is sitting next to the human, without a separate API key, without scraping, and without the agent leaving the page the human is looking at. The human watches the machine; the agent pulls the lever. The human sees the model; the agent flips it to wireframe and plays the walk clip to check for foot sliding. Both act on one shared surface.

What humans and agents can do together (that they could not before)

  • Shop by measurement, not by render. "Find me a character with a walk clip" — the agent searches the catalogue facts and opens the product; the human sees the 3D viewer update live.
  • Inspect together. The agent switches the viewer to wireframe, toggles grid, shadows and autorotate, plays a named clip, and runs the pivot test; the human judges what they see.
  • Draw a capsule. The agent sets the theme and pulls the lever; the page scrolls the human to the reveal; the agent reads the drawn asset's facts and explains the grade (S/A/B/C) from the same rule the page prints.
  • Create. On the studio page an agent can start a generation from a template with the human's prompt and return the stored file's facts.
  • Verify a file. On the inspector page an agent can hand the page a URL; the page measures the file in the browser and returns score, blockers and warnings.

The tools (23, all registered from the page itself)

  • Everywhere: clunk_search_assets, clunk_asset_facts, clunk_navigate, clunk_site_map, clunk_connection_check, clunk_product_capabilities
  • Capsule machine (home): gacha_state, gacha_list_themes, gacha_set_theme, gacha_pull, gacha_open, gacha_again, gacha_claim
  • Product page (while the 3D viewer is mounted): viewer_set, viewer_play_clip, viewer_stop, viewer_pivot_test, viewer_state, asset_download_link
  • Studio (signed in): studio_templates, studio_create, studio_my_generations
  • Inspector (signed in): inspect_url

Every tool name, description and schema is in English; human-facing strings come back in English with Korean _ko twins, because the site itself is Korean.

Implementation

  • Tools are registered with navigator.modelContext.registerTool() (falling back to document.modelContext) from a small typed layer (app/webmcp/register.ts). Global tools are mounted in the site layout; page tools (gacha, viewer, studio, inspector) register on mount and unregister on unmount through an AbortSignal, so an agent only sees tools that can actually act on the current page.
  • Every tool returns plain JSON. Every number is read from the same source the page renders (the catalogue API and per-file facts measured by Clunk's inspector). Nothing is invented.
  • Tools drive the real UI: pulling the lever runs the same state machine as a human pull, scrolls the film so the human sees it, and waits for the capsule/result stage before returning.
  • /webmcp lists the live tool set on the current page (from the registration status event), the schemas, and step-by-step testing instructions for Chrome and the ChatGPT in-app browser.
  • Stack: React 19 on Cloudflare Workers, D1, R2; Three.js for the machine and viewer. Code is MIT-licensed; the asset files carry separate terms (ASSETS-LICENSE.md).

Testing

See https://clunk.games/webmcp. No account is needed for search, facts, the machine, the viewer and navigation. Studio and inspector tools need a free sign-in (Google or GitHub); signing up grants 25 credits, no card.

Challenges

The hardest part was keeping the agent honest: every number a tool returns had to come from the same measured facts the page renders, and page tools had to appear and disappear with the surface they act on, so the agent never sees a lever it cannot pull.

Built With

Share this project:

Updates