The workflow that was quietly wasting my time
Here's a pattern I bet a lot of you know well:
You open ChatGPT, Claude, or Gemini. You ask for a landing page, a demo, a quick prototype for a client. Thirty seconds later you've got a full HTML file — styled, responsive, ready to look at.
And then... nothing. It just sits there in a chat window.
To actually turn that into something you can send a client or drop into a browser tab, I was doing this, every single time:
- Copy the code block out of the chat
- Paste it into a new file in my editor
- Save it as
index.html - Either zip it and drag it into Netlify's dashboard, or open FileZilla, connect to FTP, and upload it to the right folder
- Go back, realize I forgot to check how it looks on mobile
- Repeat steps 1–4 after every small copy tweak
None of these steps are hard. That's exactly the problem — they're not hard, they're just friction, and friction is what kills momentum on small jobs. If you build landing pages, demos, or client prototypes regularly, this "last mile" between AI output and a live URL adds up to a surprising amount of dead time across a month.
I tried a few workarounds first:
- CodePen / JSFiddle — great for sharing a snippet, but not a real deployable page (no custom domain, no proper hosting, weird for client-facing work).
-
netlify deployvia CLI — fast once it's set up, but it means dropping into a terminal every time, which breaks flow when you're mid-conversation with an AI tool. - A local script that watches a folder and pushes to GitHub Pages — worked, but was one more repo to maintain, and useless the moment I was on a different machine.
None of it solved the actual bottleneck: getting from "the AI just wrote this HTML" to "here's a live link" without leaving the browser tab I was already in.
So I built a Chrome extension for it: HTML Deployer
The idea is simple: the extension watches the page while you're in ChatGPT, Claude, or Gemini, detects HTML code blocks as they're generated, and gives you a deploy panel right there — no copy, no paste, no context switch.
How it works, technically
1. Detection
A content script scans the DOM of supported AI chat interfaces for <pre><code> blocks that look like HTML (<!DOCTYPE, <html>, or a recognizable structure). It handles multiple code blocks on the same page, so if the model gives you three revisions in a thread, you can pick the one you want.
2. Preview before you ship anything
Before any network call happens, the extension renders the extracted HTML in an isolated preview — desktop, tablet, and mobile viewports side by side. This runs entirely client-side (no server round-trip), so you catch a broken layout before it's public instead of after a client opens the link.
3. Deploy targets — deliberately not locked to one host
This was the part I cared about most. A lot of "one-click deploy" tools quietly lock you into their own hosting. I didn't want that, so HTML Deployer supports:
| Target | What happens under the hood |
|---|---|
| Netlify | Uses Netlify's deploy API with your token, gives you HTTPS + CDN instantly |
| Vercel | Same idea, Vercel's edge network |
| GitHub Pages | Commits the file to a repo/branch you choose — version-controlled by default |
| FTP | Straight upload to any shared hosting you already pay for (cPanel, WHM, etc.) |
| Self-hosted (Host Agent) | A tiny PHP script you drop on your own server that accepts authenticated uploads — so you never have to store FTP credentials inside a browser extension |
| ZIP export | If you'd rather upload manually, or hand the file to someone else, you get a clean .zip with no dependency on the extension at all |
That last point matters for a dev audience specifically: your HTML is processed locally in the browser. It's only sent anywhere the moment you click Deploy, and only to the destination you picked. Nothing sits on a third-party server "just in case."
4. Instant feedback loop
On successful deploy you get a live URL and an auto-generated QR code — handy for testing on your phone or dropping straight into a client Slack message.
Who this is actually for
I'm not going to pretend this is groundbreaking distributed-systems engineering. It's a focused tool for a specific, repetitive gap:
- Marketers / no-code builders / solo founders who use AI to generate landing pages and don't want to touch a terminal at all.
- Freelancers and independent devs who ship small static sites for clients constantly and are tired of the same five manual steps for every demo.
- Small agencies running multiple microsites/campaign pages who want a lighter, less error-prone alternative to "junior opens FileZilla and hopes for the best."
If your deploys already involve CI/CD pipelines, this isn't trying to replace that — it's for the disposable stuff: prototypes, one-off landing pages, demos, things that don't need a full pipeline but still need to be a real, shareable URL.
What I'd genuinely like feedback on
- Anyone using a similar "watch the AI chat, extract the artifact" pattern for other file types (I'm curious if this generalizes beyond HTML)?
- If you've built self-host agents like this before, I'd love to compare notes on keeping credential handling minimal — right now the PHP agent approach avoids storing FTP creds in the extension at all, but I'm open to better patterns.
- Anything from the FTP/cPanel world that would trip this up on more unusual hosting setups?
The extension is live on the Chrome Web Store if you want to poke at it — happy to answer anything about the implementation in the comments.
Top comments (0)