freenet.free

Inspiration

Every "can I build this for free?" conversation ends the same way: six pricing tabs open, a guess at request counts, and the real answer arriving on the first invoice. Teams draw architectures on whiteboards, then find out which box breaks the budget only after the code is written.

We wanted the drawing itself to be the simulator. Lay out the network, watch honest traffic flow through it, and see which layer hits a quota and what the platform does about it, before a line of code exists. Then WebMCP made the second half obvious: if the studio exposes its actions as tools, the agent in your browser can ideate on the same canvas, under the same rules, and show its work.

What it does

freenet.free is a studio for choosing and validating a stack before you write code.

• Visualise the network. Products from Cloudflare and Vercel (and third-party services from OpenAI, Shopify and Netlify) sit as nodes on a canvas. Edges carry real request flow, coloured from source to target so you can read the topology at a glance.
• Simulate honest traffic. A daily mix of humans, search crawlers, AI crawlers, scrapers and botnets runs through the graph. Gates block, caches answer, stores meter reads and writes, compute meters CPU. Arrivals always equal served plus blocked plus dropped.
• See the free tier break. Quotas are enforced the way the platforms enforce them: past the cap, requests drop or the feature stops. The timeline plays a day, a month or a year with one track per layer as a percent of its allowance, so you see which meter breaks and on which day.
• Compare stacks. One key switches the same design between Cloudflare and Vercel. Names, prices and partner gaps update; the bill is computed from each provider's own pricing page, with a source URL on every meter.
• Ideate with an agent. 33 WebMCP tools cover everything a person can do: read and rewrite the design, set traffic, toggle protections, drive the timeline, read the bill and layers, analyse a product URL, propose an architecture, export config, save and remix designs. Chrome's agent and the in-page architect use the same tools, and every call lands in the conversation so you can watch the design take shape.

The result is a plan you can trust: a diagram, a traffic model, a bill and a verdict, all from the same source of truth, before you commit to a stack.

How we built it

• TanStack Start on Cloudflare Workers, with a Durable Object agent built on the Cloudflare Agents SDK, the AI SDK and Workers AI (gpt-oss-120b) as the in-page architect.
• One tool contract, three surfaces. Tools are defined once with zod. The derived JSON Schema is registered from an inline script in <head> so document.modelContext.getTools() is never empty, server-rendered as declarative <form toolname> elements for agents that only read markup, and registered imperatively after hydration for full coverage. The architect calls the same tools through executeTool, so WebMCP is the single execution path for both agents.
• A request-accounting simulator with linear per-class rates, node roles (source, gate, cache, compute, store, sink), a two-pass free-tier cap, and conservation tests.
• Pricing as data: 70 meters across Cloudflare and Vercel plus vendor meters for OpenAI, Shopify and Netlify, each with unit, allowance, overage behaviour and source URL. computeBill never invents a number.

Challenges we ran into

• Tool discoverability before hydration. A browser agent listed tools while React was still loading and saw an empty bridge. Registering the surface from the server-rendered head, then handing execution to the app, closed the gap.
• Chrome's result envelope. executeTool returns a JSON string wrapping content[].text; the architect had to unwrap it so both agents see identical results.
• Background tabs. Agents often drive a tab you are not looking at, where animation frames never fire. The clock, focus, and timeline all had to work without them.
• Honest pricing across five vendors. Per-day versus per-month quotas, 1k versus 1M units, credits versus dollars, and Marketplace partners had to be normalised without hiding the gaps.

Accomplishments that we're proud of

• A design tool where the diagram, the simulation, the timeline and the bill are one model, so ideation and validation happen in the same place.
• A free-tier verdict that is concrete: the meter, the day it breaks, and what the platform does next.
• One tool contract serving Chrome's agent and our own architect, with a complete audit trail in the chat.
• Real products, real prices, real gaps: 40 Cloudflare meters, 30 Vercel meters, and 20 third-party services, every one sourced.

What we learned

Agents are very good at using a well-described tool surface and very bad at guessing a UI. Investing in describe_studio, precise tool descriptions and a few named workflows did more than any prompt. We also learned that "honest" is a feature: showing partner gaps and unverified prices made the tool more convincing, not less.

What's next for freenet.free

• Partner pricing for Marketplace products such as Neon and Upstash.
• Shareable public designs with a read-only WebMCP surface, so an agent can review a plan without editing it.
• Export to infrastructure as code, so the validated plan becomes the first commit.
• A declarative-only mode that lets agents drive the studio with JavaScript disabled.

Built With

• ai-sdk
• cloudflare-agents-sdk
• cloudflare-workers
• durable-objects
• elk
• fluid-functionalism
• react
• react-flow
• tanstack-start
• typescript
• vitest
• webmcp
• workers-ai
• zod