webdev #tools #productivity #javascript
A while back I had a question I couldn't shake: what if an AI agent could autonomously plan, build, and ship developer tools — not just assist a human doing it, but actually own the entire pipeline from concept to deployment?
That experiment became devnestio — an autonomous AI studio that mass-produces free, no-nonsense developer tools for the English-speaking dev community. We're now running 18 tools live on Cloudflare Pages, all built by Claude AI agents with minimal human intervention. Here's the honest story of how it works — and the full list of everything we've shipped.
What Is devnestio?
devnestio is a free developer toolsite factory powered by Claude AI agents. The goal is simple: build the kind of small, focused utility tools that developers reach for constantly — JWT decoders, regex testers, timestamp converters — and ship them fast, free, and without accounts, tracking, or paywalls.
Every tool runs as a single HTML file on Cloudflare Pages. No server, no backend, no build step. Vanilla JS, zero dependencies. It loads instantly, works offline, and costs nothing to run at scale.
The twist is that a human isn't writing most of this. Claude agents are.
The Agent Setup
devnestio uses two types of Claude sessions working in tandem: a Dispatch session and Code sessions.
Dispatch is the strategic brain. It runs as a persistent planning agent that identifies tool ideas worth building (based on developer search demand, tool simplicity, and gap analysis), writes detailed spec documents ("発注書" — purchase orders), prioritizes the backlog, and hands off specs to Code sessions. It also handles post-deployment tasks: logging metadata to Obsidian, updating the hub index, and tracking the overall portfolio.
Code sessions are ephemeral execution agents. Each one receives a spec from Dispatch, implements the tool as a single-file HTML/JS application, runs internal testing, and produces a deployable artifact. They operate independently and terminate once the tool is done.
The handoff looks roughly like this:
Dispatch → writes spec (tool name, features, UX requirements, edge cases)
→ spins up Code session with spec attached
→ Code session implements + self-tests
→ artifact saved to repo
→ Dispatch triggers Cloudflare Pages deploy
→ Dispatch logs result to Obsidian vault
→ loop repeats
Dispatch also maintains awareness of the full portfolio so it doesn't duplicate tools or suggest ideas that are too similar to existing ones.
This separation of concerns — strategy vs. execution — turned out to be the key insight. A single agent trying to plan and code simultaneously tends to cut corners on planning. Splitting the roles forces better specs, which produces better tools.
The Workflow: One Tool, Start to Finish
Let me walk through what building a single tool actually looks like in practice.
1. Ideation (Dispatch)
Dispatch evaluates tool candidates based on two criteria: is this something developers search for regularly, and can it be implemented cleanly in a single HTML file? A JWT decoder scores high on both — common need, self-contained logic, no server required. It gets added to the backlog.
2. Spec Writing (Dispatch)
Dispatch writes a detailed spec document covering: the tool's name and slug, core features, UX requirements (input/output layout, copy buttons, keyboard shortcuts), edge cases to handle (malformed tokens, expired JWTs), and non-goals (no signature verification against remote keys). The spec is precise enough that a Code session can execute without asking clarifying questions.
3. Implementation (Code session)
A Code session picks up the spec and builds the tool. Since everything is vanilla JS in a single HTML file, the agent doesn't need to manage dependencies, configure bundlers, or worry about deployment pipelines. It writes the HTML, styles it inline, implements the JS logic, and does a self-review pass checking the spec requirements against the implementation.
4. Testing
The Code session runs through the edge cases listed in the spec: empty input, invalid Base64, missing header/payload/signature segments, tokens with none algorithm. Any failures get fixed before the artifact is finalized. Each tool ships with a browser-based test suite (test.html) covering at minimum 30 test cases.
5. Deploy
The HTML file gets pushed to the repo and Cloudflare Pages auto-deploys it. Since there's no build step, the deploy takes about 30 seconds. The tool is live.
6. Logging (Dispatch)
Dispatch records the tool in the Obsidian vault: URL, deploy date, spec summary, and any known limitations. It also updates the hub index at devnestio.pages.dev so the new tool appears in the directory.
Total wall-clock time from "let's build a JWT decoder" to live URL: under an hour.
The bottleneck isn't writing code. It's writing a good spec. A vague spec produces a mediocre tool; a precise spec produces something genuinely useful.
The Tech Stack (Or Lack of One)
There's a certain pleasure in how little infrastructure this requires:
- Cloudflare Pages — free tier, global CDN, automatic deploys from Git
- Vanilla JS + single HTML files — no framework, no bundler, no node_modules
- Obsidian — local Markdown vault for tracking the portfolio and specs
- Claude API — powers both Dispatch and Code sessions
Total running cost at 18 tools: effectively $0/month on Cloudflare's free tier. The AI compute is the only real cost, and it's front-loaded during development rather than ongoing.
The single-HTML-file constraint turned out to be a feature, not a limitation. It forces simplicity. If a tool is getting too complex to fit cleanly in one file, that's a signal the scope is wrong.
The 18 Tools: Full List
Here's the complete portfolio, all live and free:
JWT Decoder & Inspector — decode and inspect JWT tokens entirely in the browser; detects algorithm, validates expiry, displays all claims in readable JSON. Your tokens never leave your machine.
Cron Expression Builder — build and test cron schedules visually with human-readable previews; supports standard 5-field and extended 6-field (with seconds) formats. Paste an existing cron expression to get it explained in plain English.
Regex Tester — live regex matching with real-time match highlighting and capture group display; flags (g, i, m, s, u) toggle instantly. Named and numbered capture groups both shown in the detail panel.
Base64 Encoder/Decoder — encode and decode Base64 with URL-safe variant support; handles file encoding for data URIs. Useful for inspecting JWT payloads and API responses.
Unix Timestamp Converter — convert between Unix timestamps and human-readable dates across timezones; auto-detects seconds vs. milliseconds and shows relative time ("3 hours ago").
URL Encoder/Decoder — encode/decode URLs and individual components with RFC compliance; shows the difference between encodeURI and encodeURIComponent behavior side by side.
CSS Color Converter — convert between HEX, RGB, HSL, and HSV with a live color preview; all four fields update simultaneously as you type in any one. Supports named CSS colors.
Hash Generator — generate MD5, SHA-1, SHA-256, SHA-384, and SHA-512 hashes in the browser using the Web Crypto API; supports file drag-and-drop for integrity verification.
Number Base Converter — convert between binary, octal, decimal, and hexadecimal with all four fields live-updating simultaneously; handles negative numbers with two's complement display.
String Case Converter — transform strings to camelCase, snake_case, PascalCase, kebab-case, SCREAMING_SNAKE_CASE, and more; handles edge cases like acronyms (XMLParser → xml-parser) and mixed input.
JSON Diff Tool — compare two JSON objects side-by-side with highlighted differences; additions, deletions, and modifications each get distinct color coding.
Lorem Ipsum Generator — generate placeholder text by words, sentences, or paragraphs; useful for UI prototyping and document templates.
UUID Generator — generate UUID v1 (time-based), v4 (cryptographically random), and v5 (namespace + name deterministic) in the browser using the Web Crypto API; batch generation up to 100 UUIDs, plus a validator.
Password Generator — generate secure passwords with configurable character sets (uppercase, lowercase, numbers, symbols) and strength indicator; everything runs locally, generated passwords never touch a server.
HTTP Status Codes Reference — searchable reference for all 61 HTTP status codes (1xx–5xx) with "when to use" guidance and real-world examples; covers the practical distinctions (401 vs 403, 301 vs 308, 400 vs 422) that are hard to find elsewhere.
JSON Formatter & Validator — format, minify, validate, and tree-view JSON in the browser; validation errors include line and column numbers, and the interactive tree view uses native <details>/<summary> elements — no framework.
SQL Formatter & Beautifier — format and beautify SQL queries with keyword casing control (UPPERCASE/lowercase/preserve) and minify mode; string literals are handled safely so keywords inside quotes are never transformed.
YAML Formatter & Validator — format, validate, and convert YAML ↔ JSON bidirectionally; error messages include line numbers; built with a hand-rolled Vanilla JS parser (zero npm packages) so your config files never leave the browser.
Browse everything at devnestio.pages.dev.
All 18 tools follow the same philosophy: one page, one purpose, loads in under a second, no login required.
Why Browser-Only?
The "no backend, no server" constraint isn't a technical limitation — it's a deliberate design choice that drives most of the product decisions.
Privacy: Developers regularly paste sensitive data into tools — JWT tokens with embedded credentials, SQL queries exposing schema details, YAML configs with API keys and hostnames, passwords being generated or verified. Routing any of this through a third-party server creates a trust problem that's hard to reason about. Browser-only eliminates it entirely.
Speed: No round-trip latency means interactions feel instantaneous. The regex tester highlights matches as you type. The color converter updates all four formats simultaneously as you type in any one. The JSON formatter validates in real time. This kind of responsiveness is only possible when compute is local.
Reliability: No backend means no backend failures, no rate limits, no maintenance windows. The tools work offline after first load. They work on flaky VPN connections. They work in air-gapped environments. There's nothing to go down.
Cost: Cloudflare Pages free tier has no bandwidth limits for static content. 18 tools, millions of potential requests, $0/month hosting cost. The economics only work because there's no compute to pay for.
What's Next
The immediate priority is getting accepted into EthicalAds — a developer-focused ad network that serves contextual, privacy-respecting ads. No trackers, no behavioral targeting, no third-party cookies. If approved, it becomes a sustainable revenue model that doesn't compromise the user experience — and aligns with the privacy-first philosophy of the tools themselves.
Beyond monetization, the roadmap is more tools. The backlog Dispatch maintains currently has 30+ candidates. Ideas in queue include a generic text diff viewer, a Markdown preview tool, a color palette generator, and a curl command builder.
The selection criteria stays the same: useful to working developers, implementable as a single HTML file, something you'd realistically reach for during a coding session.
Honest Reflections
A few things I didn't expect after building 18 tools this way:
The constraint is the product. Committing to "vanilla JS, single HTML, no server" sounds limiting. In practice it's the reason tools are fast, trustworthy, and cheap to operate. Users don't have to trust a backend they can't see.
Specs matter more than code. The Code sessions rarely produce bad implementations. They produce bad tools when the spec is vague. Investing Dispatch's time in precise specs — specifying edge cases, non-goals, and exact UX behavior upfront — pays off immediately in output quality.
Shipping beats polishing. A tool that's live and useful is infinitely more valuable than a tool that's 20% better but still in development. The iteration loop — ship, get feedback, improve — only works if you ship.
The hard problem isn't building. The hard problem is distribution. Getting 18 quality tools deployed is straightforward with this setup. Getting developers to find them and use them regularly is an entirely different challenge. Technical execution is the easy part.
Try It
If you're a developer who uses any of these kinds of tools, give them a spin at devnestio.pages.dev.
If something's broken, missing a feature, or you have a tool idea that should exist — drop it in the comments below. Dispatch is listening.
devnestio is an ongoing experiment in autonomous tool development. Building in public.
Top comments (0)