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 (0)