Docs

Publish HTML from Claude Code

Claude Code can write a report, a chart or a small app in a minute, but a file on your disk is hard to show anyone. Connect it to Openpane once, and it publishes what it makes as a page at its own link, then keeps that page up to date as you work.

Connect Claude Code

You need an Openpane API key. The API keys page makes one for Claude Code and fills it into every step. Here, the steps show YOUR_API_KEY where it goes.

Make a key for Claude Code

  1. Add Openpane

    Run it in any terminal. --scope user makes Openpane available in every project.

    TerminalmacOS · Linux · Windows
    claude mcp add --transport http --scope user openpane https://openpane.oblaidish.com/api/mcp --header "Authorization: Bearer YOUR_API_KEY"

  2. Check it

    Openpane should show as connected.

    Terminalcheck
    claude mcp list

Claude Code in VS Code, Cursor and JetBrains reads the same settings, so Openpane is there too. To set it up for everyone in a repository, see Connect Claude Code.

Ask for a page

Start claude in your project and say what you want to see. Mention Openpane or a pane, so Claude publishes it instead of saving a file:

Prompttry it
Chart this repository's commits per week over the last year, and publish it as an Openpane pane.
Prompttry it
Turn coverage/coverage-summary.json into a dashboard pane, least-covered files first.
Prompttry it
Publish docs/architecture.md as a Markdown pane.

Claude writes the page and sends it to Openpane with the create_pane tool, as HTML, React or Markdown, whichever suits it. It answers with the pane's link, such as https://openpane.oblaidish.com/p/k7m2xq9fha. The pane is private: only you can open it, signed in, until you share it.

Change it, keep the link

Ask for changes in the same session, such as “make the bars horizontal” or “add a table under the chart”. Claude edits the pane with update_pane: the link stays the same, and every change is saved as a new version. Anyone who has the pane open gets the latest with the reload button in its bar.

In a later session, ask Claude to find the pane: list_panes lists yours, and get_pane reads its source back, so Claude can pick up where it left off.

Make it live

A pane is a real web page, so it can fetch its data each time it opens instead of freezing what Claude saw. Ask for that, and the same link shows current numbers to everyone who opens it:

Prompttry it
Make a pane that charts daily npm downloads for react, vue and svelte, fetched live from api.npmjs.org.
Live · React paneClaude Code made this one: it fetches the npm registry's counts as it opens.Open it full size

Panes can fetch from APIs that allow requests from any origin, and load libraries from a CDN. Live dashboards goes further.

Share it

Ask Claude, or open the pane's Share page:

  • Unlisted: anyone with the link can open it, without an account.
  • Public: also listed on Openpane's home page, and open to search engines.
  • People, by email: they open it by signing in with that address. When Claude shares a pane, it only asks: you approve on the Share page.

Unlisted and public panes can also be embedded in any website with one line of HTML. More in Sharing.

Codex, Gemini CLI and other agents

Every MCP client gets the same seven tools, so the same requests work. Make each one its own key on the API keys page.

Codex

The Codex CLI, its IDE extension and its desktop app share ~/.codex/config.toml:

~/.codex/config.tomlTOML
[mcp_servers.openpane]
url = "https://openpane.oblaidish.com/api/mcp"
http_headers = { "Authorization" = "Bearer YOUR_API_KEY" }

Gemini CLI

TerminalGemini CLI
gemini mcp add --transport http --scope user --header "Authorization: Bearer YOUR_API_KEY" openpane https://openpane.oblaidish.com/api/mcp

Antigravity, Cursor, VS Code, Zed and Devin Desktop are in Connect your AI.

Good to know

  • A pane is one page, up to 1 MB. It can load libraries from a CDN but not files from your project, so Claude puts the data and styles in the page.
  • React panes can import only react and react-dom. For a chart library, ask for an HTML pane that loads it from a CDN.
  • Panes run in a sandbox on a separate domain, so a pane can't read your Openpane account, your cookies or your computer.
  • What Claude writes into a pane, anyone who can open it can read: keep panes with private numbers private.

Pane types has the details.

Made this way

Claude Code made each of these through the Openpane MCP server.