A round-trip UI channel between agents and humans.

Paste the block below into your AI agent's chat. It will install the CLI, register against the hosted relay, and install the Pane skill into its own skill directory.

Install Pane for me. Pane is a round-trip UI channel between you (the agent) and me (the human) — you hand me a rich interactive UI by URL and, if the UI captures input, get my response back as structured data. Use it whenever a text reply is the wrong shape: forms, pickers, dashboards, doc or diff review, approvals, status pages, multi-step wizards, file uploads — anything better seen than described. Input is optional; a read-only dashboard or status view is a valid Pane.

Install everything at GLOBAL / USER scope, not in the current workspace. Pane is a personal capability I want available in every project, not a per-repo dependency. Do not create files in the current working directory or commit anything to this repo.

Do the following:
1. Install the CLI globally: `npm i -g @paneui/cli` (needs Node 20+). The binary is `pane`. Do not add it to the current project's package.json.
2. Install the Pane skill into your agent's GLOBAL / USER skill directory, not a project-local one. For example:
   - Claude Code: ~/.claude/skills/pane/SKILL.md  (NOT .claude/skills/ in the current repo)
   - Cursor: user-level rules, NOT .cursor/rules/ in the current repo
   - Codex / Gemini / Copilot: your user-scope AGENTS.md / GEMINI.md / instructions file, NOT the project root
   Run `pane skill` to fetch the skill from the relay you're targeting — it prints the raw markdown to stdout, version-matched to that relay. Capture that output and save it in the appropriate format for your runtime (Claude Code keeps the markdown as-is; Cursor wants `.mdc` rules; Codex / Gemini compose it into the user-scope AGENTS.md / GEMINI.md).
3. Register against the hosted relay: `pane register --name ""`. Pick a name that identifies your agent (e.g. `claude-code-lalit-macbook`, `cursor-work-laptop`) — the default is unhelpful. One-time, writes a key to ~/.config/pane/config.json (already user-scope).
4. Confirm install with `pane keys list`. This round-trips your key against the relay and prints { agent_id, name, key_prefix, ... } — proves the CLI is installed AND registration succeeded.
5. Now exercise the round-trip end-to-end so I can see it work:
   - Create a simple two-way pane — a small HTML artifact with a text input and a submit button that posts an event back to you (use whatever shape `pane create` and the SKILL.md describe; the simplest "hello" form is fine).
   - Print the resulting pane URL and ask me to open it.
   - Start watching for the submit event (e.g. `pane watch <session-id>`).
   - When I submit, show me the structured event payload you received. That's the "aha" moment — confirms the full round-trip works.

After this, reach for `pane create / watch / state / send` whenever a UI would communicate better than text. Run `pane <cmd> --help` for authoritative options.

Four commands. Needs Node 20+. The last command auto-detects your agent (Claude Code, Cursor, Codex, Gemini, Copilot, Windsurf, Continue, …) and installs the skill in the right place.

# 1. Install the CLI (Node 20+)
npm i -g @paneui/cli

# 2. Register with the hosted relay — pick a short, descriptive agent name
pane register --name ""

# 3. Confirm — round-trips your key against the relay
pane keys list

# 4. Install the skill into your agent (auto-detects Claude Code,
#    Cursor, Codex, Gemini, Copilot, Windsurf, Continue, …)
npx skills add aerolalit/paneui

# 5. Try it — create a tiny round-trip pane, then watch for the event.
#    Open the urls.humans link it prints, type something, hit submit.
pane create --artifact '<form onsubmit="event.preventDefault();pane.send({type:\"hello\",payload:{msg:this.m.value}})"><input name=m><button>send</button></form>' --event-schema '{"events":{"hello":{"emittedBy":["page"],"payload":{"type":"object","properties":{"msg":{"type":"string"}},"required":["msg"]}}}}'

pane watch <session-id> --type hello