DEV Community: solca

I added an AI helper to my JSON mock-API tool — the hybrid design, and a Workers AI gotcha

solca — Wed, 22 Jul 2026 16:28:27 +0000

I run TempTools — a small suite of free, no-signup web tools that expire and delete themselves. The one I use most is Temp API: paste JSON or CSV, get a live mock endpoint in seconds.

I just added an AI helper to it, and the design turned out more interesting than "call an LLM." The rule I set for myself was: AI is never allowed to touch correctness. Here's how that shook out — plus a Cloudflare Workers AI gotcha that broke two of the three features while the third worked fine.

What the helper does

Three buttons on the Temp API editor:

Fix & format — clean up messy/broken JSON and explain what changed
Generate schema — a JSON Schema (draft 2020-12) from your data
Generate sample — realistic mock data with the same shape

The design rule: keep AI away from your data

Here's the thing I didn't want: an AI silently rewriting my JSON while pretending to "format" it. If you paste {"id": 42} and the tool hands back {"id": 43}, that's not a fix — that's a bug you'll chase for an hour.

So repair and formatting are 100% deterministic. No AI. I use jsonrepair:

export function formatOrRepair(input: string) {
  try {
    return { ok: true, formatted: JSON.stringify(JSON.parse(input), null, 2), repaired: false };
  } catch {
    /* not valid — try to repair */
  }
  try {
    const repaired = jsonrepair(input);
    return { ok: true, formatted: JSON.stringify(JSON.parse(repaired), null, 2), repaired: true };
  } catch {
    return { ok: false };
  }
}

The AI is only used for things where being "approximately right" is fine and there's no source of truth to corrupt:

explaining what the deterministic repair changed
generating a schema
generating brand-new sample data

That split matters for the copy too. It would be tempting to market this as "AI fixes your JSON!" — but that's not true, and someone will call it out. The UI says the repair runs locally and reserves "AI" for the schema/sample/explanation. Honest and it dodges a whole class of complaints.

The AI calls (Cloudflare Workers AI)

The generation runs on Workers AI with an ai binding — no external API keys, it just runs on the edge:

export const AI_MODEL = "@cf/qwen/qwen2.5-coder-32b-instruct";

async function runText(ai, messages, maxTokens) {
  const out = await ai.run(AI_MODEL, { messages, max_tokens: maxTokens, temperature: 0.2 });
  return out.response.trim(); // ← this line is a trap. more below.
}

generateSchema and generateSample are just runText with a system prompt that says "output ONLY raw JSON, no markdown fences," and then I strip any stray fences/prose defensively before parsing.

The gotcha: `response` isn't always a string

Here's the bug that had me confused for a while. In production:

Fix & format worked perfectly (including its AI explanation)
Generate schema and Generate sample both failed with a generic 502

Same model. Same runText. Same binding. So why did one of three AI calls work and two fail?

I temporarily surfaced the real error in the response and got this:

((intermediate value).response ?? "").trim is not a function

out.response wasn't a string — so .trim() didn't exist on it.

The pattern clicked once I saw which calls failed. The explanation prompt returns prose, so response is a string. The schema and sample prompts return JSON — and when the model's output is JSON, Workers AI can hand you response as an already-parsed object, not a string. Calling .trim() on an object throws.

The fix is boring but worth knowing: don't assume response is a string.

async function runText(ai, messages, maxTokens) {
  const out = await ai.run(AI_MODEL, { messages, max_tokens: maxTokens, temperature: 0.2 });
  const r = (out as { response?: unknown }).response;
  const text = typeof r === "string" ? r : r == null ? "" : JSON.stringify(r);
  return text.trim();
}

If response is a string, use it. If it's an object (parsed JSON), JSON.stringify it back — which is exactly what I want to hand to the schema/sample path anyway. null/undefined becomes an empty string instead of crashing.

Two debugging lessons I keep re-learning:

"Some calls work, some don't" is a gift. The difference between the working and broken calls is the bug. Here it was the output type (prose vs JSON), not the model or the binding.
A generic catch → 502 hides the answer. One temporary line echoing the real error message turned a guessing game into a one-line fix. (Then I took it back out.)

Keeping it cheap and abuse-resistant

Because repair/formatting never calls the model, the common case (paste valid-ish JSON, format it) costs zero AI. The model only runs when you ask for an explanation, schema, or sample.

On top of that, AI calls are rate-limited per IP with a tiny rolling log table (same trick I use for uploads), and the input is size-capped before it ever reaches the model. It all stays comfortably inside the Cloudflare free tier.

Try it

It's live at temptools.webcli.jp/tools/temp-api — paste some rough JSON and hit the AI buttons. No signup, and the endpoint you create expires on its own.

If you're building on Workers AI, keep that response-type gotcha in your back pocket. And if you find a rough edge in Temp API, I'd genuinely love to hear it. 🛠️

Add analytics to your site without a cookie consent banner

solca — Mon, 20 Jul 2026 02:25:26 +0000

I wanted to know if anyone was actually visiting my new side project — but I really didn't want to slap a GDPR cookie-consent banner on a tool that's supposed to be frictionless.

The default move is Google Analytics. But GA sets cookies, which (in the EEA/UK and friends) means a consent banner, a CMP, and a pop-up in every new visitor's face. That's a lot of baggage just to answer "did anyone show up?"

Turns out there's a much lighter option: Cloudflare Web Analytics. It's free, cookieless, doesn't fingerprint, and doesn't track people across sites — so in many cases, you don't need a consent banner.

Here's how I added it, and the one gotcha that bit me.

What you get (and what you don't)

Cloudflare Web Analytics gives you:

Page views, visits, top pages
Referrers and countries
Core Web Vitals (LCP / INP / CLS)

What you don't get: per-user journeys, custom events, funnels — the granular stuff GA does. Because there are no cookies and no client-side state, it can't follow a single user around.

For "is anyone using this, and where are they coming from?", that's plenty. For deep product analytics, it's not GA. Know which question you're answering.

Setup, option 1: automatic (zero code)

If your site is proxied through Cloudflare, you don't need to touch your code:

Cloudflare dashboard → Analytics & Logs → Web Analytics
Add a site, enter your hostname
Choose Automatic setup

Cloudflare injects the beacon at the edge. Done. Nothing to deploy.

Setup, option 2: the manual beacon

If you want control (or you're on a framework where you'd rather drop it in yourself), use the beacon snippet:

<script defer src="https://static.cloudflareinsights.com/beacon.min.js"
        data-cf-beacon='{"token": "YOUR_TOKEN"}'></script>

In a Next.js app, I load it only in production via next/script:

import Script from "next/script";

const TOKEN = process.env.NEXT_PUBLIC_CF_BEACON_TOKEN;

export default function CloudflareAnalytics() {
  if (process.env.NEXT_PUBLIC_APP_ENV !== "production" || !TOKEN) return null;
  return (
    <Script
      strategy="afterInteractive"
      src="https://static.cloudflareinsights.com/beacon.min.js"
      data-cf-beacon={JSON.stringify({ token: TOKEN })}
    />
  );
}

Gating on production keeps localhost out of your numbers.

The gotcha: Content-Security-Policy

I ship a fairly strict Content-Security-Policy, and the beacon just… didn't fire. No error I noticed at first — it was silently blocked.

The beacon loads a script from static.cloudflareinsights.com and sends data to cloudflareinsights.com. If you have a CSP, you have to allow both:

script-src  ... https://static.cloudflareinsights.com;
connect-src ... https://cloudflareinsights.com;

If your analytics look empty and you have a CSP, this is the first thing to check.

Do you still need a privacy policy?

The consent banner goes away because there are no cookies and no personal profiling. But "no banner" isn't "no disclosure" — I still mention it in the privacy policy, something like:

For usage measurement we use Cloudflare Web Analytics, which is privacy-first: it doesn't use cookies, doesn't fingerprint, and doesn't track you across sites.

Transparent, and no pop-up nagging every visitor.

Wrapping up

I added this to TempTools and it's honestly a relief: I get country-level traffic and Core Web Vitals, users get zero pop-ups, and I didn't have to wire up a consent platform.

If your site mostly needs "how many people, from where" — and especially if it's a small tool where a cookie banner feels heavier than the product itself — cookieless analytics is a really nice default.

(Bonus: it's also great for confirming that most of my traffic is, so far, still just me. 😅)

How I built a suite of self-destructing web tools on Cloudflare (solo, free tier)

solca — Sat, 18 Jul 2026 06:08:25 +0000

Most cloud tools are built around saving things. But a lot of the time I don't want to save anything — I just want to hand something off for a few minutes and have it disappear on its own.

A mock API for the frontend I'm testing. A file that's too big for chat. A password I need to send a teammate without pasting it into Slack forever. Every existing tool wants me to create an account, and then clean up after myself later.

So I built TempTools — a small set of free, no-signup web tools that expire and delete themselves:

Temp API — paste JSON/CSV, get a live mock endpoint
Temp QR / Temp Link — expiring QR codes and short links
Temp File — share a file (up to 100MB) that self-deletes
Temp Note / Temp Password — a note or a secret that can self-destruct after a single view

It's all built solo, on the Cloudflare free tier. Here are the parts I found interesting to build.

The stack

Next.js 16 (App Router) deployed to Cloudflare Workers via OpenNext
D1 (SQLite) for metadata + the text payloads
R2 for files
A separate Workers Cron worker for garbage collection
Free tier the whole way

Expiry done right: lazy expiry + a cron janitor

The obvious way to expire things is a cron job that deletes stuff on a schedule. But if you rely only on cron, an item stays "alive" until the next run — a 5-minute window where an expired secret is still readable. Not great.

So the correctness lives on the read path, and cron is just the janitor:

export async function readAndConsume(id: string, kind: EntryKind) {
  const row = await db.prepare(`SELECT * FROM entries WHERE id = ?`).bind(id).first();
  if (!row || row.kind !== kind) return { status: "not_found" };

  const now = Date.now();
  if (row.consumed === 1 || row.expires_at <= now) {
    await db.prepare(`DELETE FROM entries WHERE id = ?`).bind(id).run(); // lazy delete
    return { status: "gone" };
  }
  // ...serve it
}

Expiry is exact because it's checked the moment someone reads. The 5-minute cron then sweeps up anything that expired but was never accessed (and deletes the matching R2 objects for files):

DELETE FROM entries WHERE expires_at <= ? OR consumed = 1;

Burn-after-read

For one-time secrets, the row is deleted the moment it's opened. For files, the R2 object is deleted with ctx.waitUntil after the response streams out:

if (row.burn_after_read === 1) {
  ctx.waitUntil(env.BUCKET.delete(id)); // delete the file after serving it
}
return new Response(obj.body, { /* ...headers */ });

The Next.js 16 gotcha that cost me a deploy

I wanted / to redirect to /en, so I reached for middleware. In Next.js 16 middleware was renamed to proxy — and here's the catch:

Proxy defaults to the Node.js runtime. The runtime config option is not available in Proxy files.

OpenNext on Cloudflare doesn't support Node.js middleware, so the build failed with "Node.js middleware is not currently supported." You can't force it to edge either.

The fix was to drop the proxy entirely and do the redirect in next.config.ts:

async redirects() {
  return [{ source: "/", destination: "/en", permanent: false }];
}

No middleware needed. If you're moving a Next 16 app to Cloudflare, watch out for this one.

Analytics without a cookie banner

I wanted to know if anyone actually visited without slapping a GDPR consent banner on a tool that's supposed to be frictionless. Cloudflare Web Analytics is cookieless and doesn't fingerprint, so no consent banner is required — one snippet and done. It's less detailed than Google Analytics, but for country-level traffic and basic numbers it's plenty.

Staying inside the free tier on purpose

Free tiers are generous, but files can blow through them, so I added guardrails:

Per-file cap of 100MB
Per-IP upload limit (a small upload_log table + a rolling 24h count)
Total R2 cap — I track each file's size in D1 and reject uploads once the sum would exceed a configurable limit (well under R2's 10GB free storage)

Cloudflare's free limits that made this viable:

Workers: 100,000 requests/day (static assets served by Workers Assets don't count)
D1: 5M reads/day, 100k writes/day, 5GB
R2: 10GB storage, egress free

Bonus: it ships in 10 languages

Everything lives under a [lang] segment with one dictionary per locale (en, ja, zh, es, de, fr, ko, pt, it, tr). hreflang + a sitemap handle the SEO side. Doing it from day one was far less painful than retrofitting it later.

Wrapping up

None of this is groundbreaking on its own, but it's a fun reminder of how much one person can run on a free serverless stack today: a multi-tool app, in 10 languages, with real storage, a cron janitor, rate limiting, and analytics — for $0.

If you want to poke at it, it's live at temptools.webcli.jp (no signup, everything expires). I'd genuinely love feedback — especially on the developer bits like Temp API.

I'll be writing more about the individual pieces (the AI JSON helper, the i18n setup, the deploy pipeline) — follow along if that's your kind of thing. 🛠️

DEV Community: solca

I added an AI helper to my JSON mock-API tool — the hybrid design, and a Workers AI gotcha

What the helper does

The design rule: keep AI away from your data

The AI calls (Cloudflare Workers AI)

The gotcha: response isn't always a string

Keeping it cheap and abuse-resistant

Try it

Add analytics to your site without a cookie consent banner

What you get (and what you don't)

Setup, option 1: automatic (zero code)

Setup, option 2: the manual beacon

The gotcha: Content-Security-Policy

Do you still need a privacy policy?

Wrapping up

How I built a suite of self-destructing web tools on Cloudflare (solo, free tier)

The stack

Expiry done right: lazy expiry + a cron janitor

Burn-after-read

The Next.js 16 gotcha that cost me a deploy

Analytics without a cookie banner

Staying inside the free tier on purpose

Bonus: it ships in 10 languages

Wrapping up

The gotcha: `response` isn't always a string