DEV Community

Cover image for We built a CLI that turns frontend code into API contracts, mock servers, and database schemas
Agentfield247
Agentfield247

Posted on

We built a CLI that turns frontend code into API contracts, mock servers, and database schemas

#productivity #opensource #devops #api

We didn’t set out to build a whole product.
We just kept running into the same problem over and over: frontend code and backend APIs would drift apart, and nobody noticed until something broke in production.

So we built Bazable: a single command‑line tool that reads your frontend code, builds an API contract automatically, and then uses that same contract to enforce safety, spin up mock servers, generate types, and even create database schemas.

How it started

Me and my cofounder were working on a pretty large admin panel for our startup product. The backend dev would change a response shape. The frontend team wouldn’t know. A few days later, something would silently break.

The usual fix was:

Notice the bug.

Dig through network tabs.

Compare code with backend docs.

Realise the docs were outdated too.

That got old fast.

We thought: what if the frontend itself could tell us what APIs it expects?

So we wrote a CLI that scans your code, finds every fetch, axios, or custom API call, and builds a bazable.config.json file from it.

That file became the contract.

What Bazable actually does

It reads your code, not your docs
You run:

bazable extract --payloads
Enter fullscreen mode Exit fullscreen mode

It scans your entire project – JS, TS, HTML, even Python and PHP if you use presets – and finds every API call.

It even notices custom wrappers like fetchLedgerAPI or apiClient, because let’s be honest, nobody uses raw fetch everywhere.

The result is a contract file that lists every endpoint, its HTTP method, and the shape of the data you’re sending and receiving.

No more manual documentation that’s out of date the moment you write it.

Once you have a contract, you can run:

bazable inspect
Enter fullscreen mode Exit fullscreen mode

It checks your code against the contract and catches things like:

Dead URLs – you’re calling an endpoint that isn’t in the contract.

Payload mismatches – you’re sending "123" when the contract expects a number.

Over‑fetching – the API returns 10 fields, but you’re only using 2.

It can even auto‑fix some mismatches with

bazable inspect --fix.
Enter fullscreen mode Exit fullscreen mode

It tests all your APIs in one command 

bazable test --mock --all
Enter fullscreen mode Exit fullscreen mode

Bazable will hit every contracted endpoint and report which ones are alive and which ones are broken.

It can also use real authentication (email/password or token), so you can test protected endpoints without writing a single line of test code.

It generates frontend and backend code

This is where it gets fun.

From the same contract, you can generate:

  • TypeScript types – 
bazable types
Enter fullscreen mode Exit fullscreen mode
  • A typed API client – 
bazable client
Enter fullscreen mode Exit fullscreen mode
  • React + Tailwind forms – 
bazable gen ui POST /v1/users
Enter fullscreen mode Exit fullscreen mode
  • Express/Hono backend routers – 
bazable gen backend
Enter fullscreen mode Exit fullscreen mode
  • Prisma models or Supabase SQL – 
bazable gen db
Enter fullscreen mode Exit fullscreen mode

So a frontend developer can generate the exact form they need. A backend developer can generate the exact database schema. Everyone stays in sync.

It syncs contracts across your team

If you work on a team, Bazable Cloud lets you push and pull contracts.

Backend dev runs bazable push.
Frontend dev runs bazable sync.
No more Slack messages like “I changed the API, I am sure... don't worry”.

You can even watch for changes automatically:

bazable watch
Enter fullscreen mode Exit fullscreen mode

It polls the cloud and auto‑fixes your frontend code when the backend contract changes. That feels like magic the first time you see it.

It’s AI‑ready and agent‑friendly

Bazable now supports:

bazable explain POST /v1/users
Enter fullscreen mode Exit fullscreen mode

– AI explains what an endpoint does in plain English.

bazable propose "add a phone field"
Enter fullscreen mode Exit fullscreen mode

– AI suggests a schema change.

bazable accept <id>
Enter fullscreen mode Exit fullscreen mode

– approve and apply that change.

And if you use AI coding agents like Cursor or Claude Code, Bazable can generate context files (.cursorrules, .mcp.json) so the AI always respects your API contract instead of hallucinating endpoints.

Why it’s different from Postman / Swagger / etc.

Most API tools start from documentation or manually‑written collections.
Bazable starts from real code.

That means:

  • It’s always up to date.
  • It works with existing projects instantly.
  • It doesn’t require a separate team to maintain specs.
  • It runs entirely in your terminal – no GUI required, no cloud account needed.

And the whole thing is open source and free.

You can try it right now.

npm install -g bazable-api
Enter fullscreen mode Exit fullscreen mode

Links

Documentation: https://bazable.mintlify.app

GitHub: https://github.com/Agentfield247/bazable

npm: https://www.npmjs.com/package/bazable-api

Kindly Star the Repo and drop feedbacks at my mail
*the247th@gmail.com *

Top comments (3)

Collapse
 
alexshev profile image
Alex Shev •

Generating contracts from frontend code is powerful if the output is reviewable instead of magical. I would want the CLI to show exactly which UI states became API assumptions, which fields were inferred, and where a human must confirm the backend meaning.

Collapse
 
medievalbatman profile image
Agentfield247 •

Thank you so much for your feedback.
right now Bazable marks all extracted endpoints as

"schema_status": "unverified_extracted_manually"
Enter fullscreen mode Exit fullscreen mode

, so a human knows it was inferred from code, not a backend spec. We also log the file and base URL during extraction.
then all APIs can be tested by sending a request to the backend and seeing the result using

bazable test --all
Enter fullscreen mode Exit fullscreen mode

which tests all endpoints against the real API and if there is an authentication you can run

bazable test --all --token "your-access-token"
bazable test --all --email you@example.com --password secret123 --method POST
Enter fullscreen mode Exit fullscreen mode

or you could simply run CURL commands too

bazable curl https://jsonplaceholder.typicode.com/posts/1
Enter fullscreen mode Exit fullscreen mode

But we are now going to go further by showing source file/line for each API call in the contract, and also add a new command like

bazable inspect --origin
Enter fullscreen mode Exit fullscreen mode

that will help clear the ambiguity of the API origin
There are other features that bazable offer and I will be making a post to address each one and each update.

I appreciate the feedback let me know if this addresses the issue or you have any suggestion or feedback

Collapse
 
medievalbatman profile image
Agentfield247 •

We are also building an extension for code editors so it is easier to track all these including overfetching which is done in the CLI for now