As I have mentioned in my previous blog, we built HN Companion as a browser extension that adds AI summaries to Hacker News threads. It worked well, but getting people to use it was a bit tricky. Even tech-savvy folks are a bit hesitant to try new browser extensions. So we set ourselves this simple goal: create a zero-install, low-friction "demo" of the browser extension to reduce adoption friction. Here is the technical blueprint of how it went from concept to deployed in production on Cloudflare Workers in less than 24 hours 🤯. This was possible because we had already built the AI summary API for the extension, and we could use agentic coding with Opus 4.5. I was so excited about the progress that we made that I wanted to share the technical story behind it. HN clone implementations have become a framework benchmark, similar to what TodoMVC did for an earlier era. I believe this went particularly smoothly because the models have access to a huge amount of training data out there for building HN clones.
Since we waned to reuse the code from the browser extension as much as possible, we decided to keep DOM compatibility with real HN as a hard requirement. This meant that we had to preserve the exact structure and class names of HN's HTML, so that the extension logic could be reused without modification. Also, we kept the app strictly read-only - no login, submit, vote, reply etc. This kept the scope tight and focused on the core value proposition: demonstrating AI summaries with minimal friction.
Coding agents work best when given clear requirements and reference implementations and some examples to follow. In Claude code's plan-mode, we gave it access to the browser extension codebase. We also provided a reference implementation of an HN clone built with Remix from the HN PWA ecosystem. The original API was already deployed as a Next.js app on Cloudflare Workers - so, we decided to build this app on top of that codebase. This also meant that we will lean into Cloudflare platform features like D1 and Edge Cache. The plan mode allowed us to break down the problem into smaller tasks, and also to identify the key architectural decisions that we needed to make. For example, we decided to use a hybrid data source approach, where we would use Firebase for feeds (to get the authoritative HN ordering), Algolia for item pages (to get the full comment trees in one request), and the existing HN Companion API for summaries.
After iterating a few times with Claude, we were happy with the artifact that it produced. We asked Claude to write an implementation plan that is detailed enough that any coding agent could pick it up and execute on it. We knew that getting this spec right would save us a lot of trouble later on. So, we asked Codex to review the plan and give us feedback. After couple more iterations, we had a plan that we were confident in, and we were ready to move on to the implementation phase.
We cleared Calude's context and gave this specification for it to implement. Claude created step-by-step tasks, and executed on them one by one. It came up with the following implementation plan:
## Implementation Phases### Phase 1: Project Setup + Split Pane1. Initialize Next.js 15 with TypeScript, Tailwind2. Install `react-resizable-panels`3. Create `/item` route with resizable split pane4. Mobile: Stack panes vertically### Phase 2: HN DOM Clone1. Create Algolia API client2. Build `HNStoryHeader` with exact fatitem structure3. Build `HNComment` with exact comment structure:- `tr.athing.comtr` with id- `td.ind` for indentation- `td.votelinks` (empty or placeholder)- `td.default` with comhead, navs, commtext4. Build `HNCommentTree` for recursive rendering5. Add HN CSS (Verdana, #f6f6ef background, #828282 meta text)### Phase 3: Summary Pane1. Fetch from existing summary API2. Render markdown summary3. Loading/error states4. "Install Extension" CTA### Phase 4: Landing Page + Polish1. Landing page at `/` with:- Brief intro explaining the demo- Grid of featured story examples (curated HN posts)- Click to open in split-pane view- CTA to install extension2. Skeleton loaders3. Mobile responsive4. SEO meta tags### Phase 5: Deploy1. Cloudflare Pages2. `app.hncompanion.com` subdomain3. CORS headers if needed
We let it rip. Claude would finish each phase and we would validate the output, and then ask it to move on to the next phase. The first version that it produced was already pretty solid. Once that was done, we cleared context again and started working on specific tweaks and improvements. This involved improving scalability of comment rendering and home feed performance by adding caching layers with D1 and Cloudflare Edge Cache. We also implemented a worker that would keep the D1 cache warm by pre-populating it with home feed stories.
We continued to iterate on the app after the initial implementation, adding mobile optimizations, improving the UI, and adding more features. But the core functionality was there in less than 24 hours. This was a great example of how agentic coding with a clear plan can enable rapid development of complex applications. We are happy with how the app turned out. If you haven't tried it out yet, you can check it out at app.hncompanion.com.