Chameleon

Software that grows its own API.

Comment

What Chameleon does

Chameleon is a near-blank browser canvas that an AI agent turns into working software through WebMCP. A wedding planner, job-search tracker, or health log can appear from one request. The user can then drag, resize, edit, and use the generated interface directly.

The app exposes 15 WebMCP tools and a six-widget grammar: table, kanban, checklist, chart, note, and form. All human and agent changes pass through one command log. The agent can read the board, see human edits, detect stale state, and undo changes.

The signature feature is dynamic tool creation. When an agent creates a form, Chameleon can register a new WebMCP tool whose input schema comes from the form fields. The new tool persists across reloads. The software and its API grow together.

Why WebMCP

Chameleon only makes sense as a WebMCP app. WebMCP lets the agent work with the same live browser state, local data, layout, and command history as the user. The agent does not work around the page through screen scraping or a separate backend API.

This enables two new workflows:

  1. A human and an agent can edit one live artifact with shared ground truth. Human drag, resize, and data edits become visible to the agent through the same activity log.
  2. An agent can extend the app's tool surface for a later agent. A health-log form can become a persistent log_blood_sugar tool with a schema derived from the form fields.

User experience

Flexible tools often make the user design the software before doing the real task. Chameleon starts from the goal instead. The agent composes a purpose-specific interface, and the user continues with normal direct manipulation.

Repeated actions can become agent tools. A new blood-sugar reading can be validated through the same schema as the on-screen form, appended to the same dataset, and charted immediately.

Implementation

Chameleon is a Vite and React 19 single-page application deployed as static assets on Cloudflare Workers. Zustand stores the local board document. Immer applies human and agent mutations through one patch-producing gate that also updates the command log, inverse patches, and stateVersion.

The WebMCP registry publishes schemas created with Zod 4. The same schema validates execution and becomes the JSON Schema. Tool lifetimes use AbortController. Minted tool records persist in localStorage and register again after hydration.

The interface uses Astryx, StyleX, react-grid-layout, and Recharts. There is no backend, authentication system, or remote database.

Built and tested with AI

Codex helped plan the tool specification, widget grammar, repository structure, implementation, debugging, tests, browser-runtime investigation, and agent-facing tool behavior.

Real agent tests revealed when agents stopped after creating empty widgets. Chameleon's tool responses were improved with unfinished-work data and next-action hints. Local verification passes 161 tests across 26 test files, lint, and the production TypeScript and Vite build.

Try it

Open the live app in the ChatGPT desktop app browser and ask:

I'm planning my wedding for next June - about 80 guests. Set this page up for me.

For the minted-tool flow, reset the canvas and ask:

I'm managing my type 2 diabetes. I want to log blood sugar readings and see trends.

Chrome 149 or later can also test the tools with chrome://flags/#enable-webmcp-testing and the Model Context Tool Inspector.

Known limitations

Board state is local to one browser profile. Clearing site storage removes the board and minted tools. Agent control requires the ChatGPT in-app browser or a compatible Chrome build with WebMCP enabled.

Built With

Share this project:

Updates

Submission history