DEV Community

Cover image for htmlbook: a shelf for the HTML your AI agent writes
nullarch
nullarch

Posted on • Originally published at htmlbook.io

htmlbook: a shelf for the HTML your AI agent writes

#mcp #webdev #ai #showdev

TL;DR — Coding agents (Claude Code, Cursor, Codex) now write genuinely good HTML: reports, dashboards, specs. But that HTML ends up stranded in a project folder — you can't read it on your phone, and sharing it means a screenshot or a print-to-PDF. So I built htmlbook, an MCP-native shelf where your agent pushes an HTML doc and it becomes a themed, shareable page. Here's the idea — and how it's built.

The problem nobody talks about

You ask Claude Code for a "Q3 revenue dashboard," or you have it write up an incident postmortem. It hands you a clean, self-contained HTML file. It looks great in your browser.

And then it just... sits there.

  • It lives at ~/projects/acme/reports/q3.html.
  • You can't open it on your phone.
  • To show a teammate you screenshot it, print it to PDF, or paste it into Notion — throwing away the layout and the interactivity every single time.
  • Next week you can't find it. Or it's gone with the chat session that made it.

The HTML is good. The storage story is broken. We got really good at generating documents with AI and never figured out where they should live.

What I built

htmlbook is a bookshelf for AI-generated HTML. Three steps:

  1. Your agent pushes a doc — over MCP (one line) or a REST API key.
  2. It lands on a shelf — auto-organized by project, re-themed for reading, every version kept.
  3. You read & share it — responsive on any device; flip it to public for a short link anyone can open.

push to shelf to share — the three-step flow

The deliberate constraint: the website is read-only. The only way to create a document is the agent push. You never paste HTML into a web form — authoring stays in your agent, where the work already happens. The web app exists to read, organize, and share.

Connecting is genuinely one line

For an MCP client like Claude Code:

claude mcp add --transport http htmlbook https://htmlbook.io/api/mcp
Enter fullscreen mode Exit fullscreen mode

Then you just talk to your agent:

"Clean up that quarterly report and put it on my shelf."

It calls the publish tool and hands you back a link. Cursor and Codex connect the same way with an API key; claude.ai and Claude Desktop connect over OAuth.

The reading trick: documents with no CSS

This is the part I'm happiest with.

A document you push (an "hb-doc") carries no CSS of its own — it's just semantic HTML. That's the whole trick: because the document has no styles, the reader can re-theme it freely — paper, sepia, dark, adjustable width and font size — the way an e-reader reflows a book. Same document, three skins:

the same document in paper, sepia, and dark themes

And if you push a page that does ship its own CSS and JS — a custom interactive thing? htmlbook detects that, stores it verbatim, and renders it in a sandboxed iframe so it keeps its exact look without touching the rest of the site. So any HTML your agent makes has a home: simple docs become themeable, self-contained pages stay pixel-perfect.

How it's built (for the curious)

A few decisions other devs might find interesting:

  • Remote MCP server at /api/mcp with two auth modes: a static API key (for Claude Code / Cursor / Codex) and a self-hosted OAuth 2.1 authorization server (for claude.ai / Claude Desktop, which require OAuth, not keys). The OAuth side bridges the existing login instead of standing up a second user system.
  • Storage split: metadata in Firestore, document bodies in Cloudflare R2, keyed by version so every version is immutable. Public docs are mirrored to an edge path for fast, egress-free serving.
  • Security is not optional here: the reader injects document HTML same-origin, so every pushed hb-doc is sanitized on ingest (tag/attribute allowlist) and the whole app runs a nonce-based CSP (no unsafe-inline scripts). Bundles get the opaque-origin sandbox instead, so they can't reach the app's DOM or cookies.
  • Stack: Next.js (App Router) + React 19 on Vercel.

None of this is visible to the person using it — they just say "shelve this" and get a link. But that's kind of the point.

Try it

It's free to start — sign up and you get a library and an API key immediately. Connect your agent and ask it to publish something you made this week.

→ htmlbook.io

(There's even an llms.txt if your agent wants to read up on it first. 🙂)

I'd love feedback from people doing a lot of agent-assisted work: once a doc is on a shelf, what would you want your AI to be able to do with it next? Drop a comment, or come say hi in Discord.

Top comments (0)