Plan with your coding agent through a real browser form

browser-plan is an MCP server that hands your agent's planning questions to a real browser form — radios, checkboxes, sliders, text areas, Markdown & Mermaid diagrams — instead of a cramped terminal picker. Every question and every plan version is persisted so you can replay how a decision was reached.

Install

The form, live

The exact ask-user form is embedded below — pick options, drag sliders, switch tabs, and open a diagram. Three example specs of increasing depth:

This is a static showcase, so Submit just shows the confirmation state — there's no local server behind it here.

Install

Run it directly — no global install needed:

npx browser-plan

Add it to your harness

One command for Claude Code:

claude mcp add browser-plan -- npx -y browser-plan

Or declare it as JSON — in .mcp.json (project, committed), ~/.claude.json (Claude Code user scope), Claude Desktop's claude_desktop_config.json, or Cursor's .cursor/mcp.json:

{
  "mcpServers": {
    "browser-plan": { "command": "npx", "args": ["-y", "browser-plan"] }
  }
}

Node.js 18+ required. The callback server binds 127.0.0.1 only; answers never travel through the agent. Use it for preferences and choices — never passwords, tokens, or payment data.

Define a questionnaire

The agent calls the ask_user tool with an AskUserInput: a title, an optional Markdown intro, and one or more questions. Each question has an id, a label, and one of five kinds:

text — single-line answer
longtext — multi-line answer
single — choose one option (radios)
multi — choose several (checkboxes)
scale — a numeric slider (min/max/step)

Add a tab to group questions into sections, and attach markdown (including mermaid diagrams) to an option for a side-panel illustration. A minimal spec:

{
  "title": "Quick check-in",
  "questions": [
    { "id": "name", "kind": "text", "label": "What should we call this project?", "required": true },
    { "id": "stage", "kind": "single", "label": "What stage is it at?",
      "options": ["Idea", "Prototype", "In production"], "required": true }
  ]
}

Prefer the planning workflow? The /browser-plan skill steers a harness to route its questions through the form: npx skills add ramybenaroya/browser-plan.