mockpit

A design-decision loop for terminal coding agents — agents publish designs with states and variants, ask questions and expose knobs; you answer, tune and comment, then send one reply.

Packages

Package details

extensionskill

Install mockpit from npm and Pi will load the resources declared by the package manifest.

npm repo home report

$ pi install npm:mockpit

Package: mockpit
Version: 3.1.0
Published: Nov 6, 2026
Downloads: 1,204/mo · 489/wk
Author: fabiogaliano
License: MIT
Types: extension, skill
Size: 2.2 MB
Dependencies: 12 dependencies · 0 peers

Pi manifest JSON

{
  "skills": [
    "./skills"
  ],
  "extensions": [
    "./extensions"
  ]
}

Security note

Pi packages can execute code and influence agent behavior. Review the source before installing third-party packages.

README

mockpit

A design loop for terminal coding agents. Your agent shows designs in your browser and asks its questions there. You answer in place and press Send once.

The agent publishes a screen in its states and a few variants, then ends its turn. You compare them from pictures, tune knobs, comment on parts and keep the runners-up. One Send gives the agent the whole reply. Nothing it calls waits for you.

Quickstart

Needs Node 22.18 or newer.

npm i -g mockpit
mockpit serve --open     # http://localhost:8228
mockpit demo             # seeds a sample design to click through

Point your agent at it, once per repo:

curl -s http://localhost:8228/setup >> AGENTS.md
mockpit init             # reads the repo's tokens, fonts and kit

Then ask it to "design this up on mockpit". Claude Code, Codex, OpenCode, Pi and MCP setup: docs/connecting-agents.md.

A turn

mockpit publish --design shop --state Grid --variant index --html index.html
mockpit publish --design shop --state Grid --variant gallery --html gallery.html
mockpit ask --design shop "Which grid?" --option Index=index --option Gallery=gallery
# the agent says where to look and stops. After your Send:
mockpit feedback

What you can do with an answer

Pick from pictures. Hover to preview it on the stage.
Keep runners-up. After Send they stay beside the design, one click from Use this instead.
Hide what you don't want, with a reason if you like. The agent won't offer it again.
Ask for more answers without sending the rest of your draft.
Save a set of answers across questions, like Warm or Quiet, and switch between sets.
Tune the knobs the agent declared, borrow a part from another variant, and comment on any part.

Studio puts every variant side by side. Home groups a project's ideas, screens, flows and components, and Needs you lists what's waiting on you.

What it shows

Html with parts and knobs, plus markdown, diff, terminal, image, mermaid, json and code. All of it renders in a sandboxed frame.

Agent side

Eleven verbs, the same on the zero-dependency CLI, MCP (stdio, or HTTP at /mcp) and plain HTTP: publish, ask, read, feedback, say, move, edit, export, upload, guide, run. mockpit watch wakes a waiting agent on each Send.

Agents read a short brief before their first publish (/agent-howto). Add your own taste in ~/.mockpit/rules.md, or per repo in .mockpit/rules.md. examples/rules.md is one.

Where it runs

Locally, a small Node server with SQLite at ~/.mockpit/mockpit.db. When the agent and browser are on different machines, deploy it to Cloudflare Workers: docs/deploying.md.

Development

git clone https://github.com/fabiogaliano/mockpit && cd mockpit
npm install
npm run dev        # server + viewer watch build
npm run typecheck && npm run lint && npm run format:check

Architecture and rules: AGENTS.md.

Credits

A fork of sideshow by Ben Vinegar, sponsored by Modem. The renderer, sandboxing, agent tiers and Cloudflare deploy started there.