<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Agentfield247</title>
    <description>The latest articles on DEV Community by Agentfield247 (@medievalbatman).</description>
    <link>https://dev.to/medievalbatman</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4078271%2F943d3018-0b78-4bff-9310-6f96edc59cf2.jpg</url>
      <title>DEV Community: Agentfield247</title>
      <link>https://dev.to/medievalbatman</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/medievalbatman"/>
    <language>en</language>
    <item>
      <title>We built a CLI that turns frontend code into API contracts, mock servers, and database schemas</title>
      <dc:creator>Agentfield247</dc:creator>
      <pubDate>Mon, 17 Aug 2026 15:01:32 +0000</pubDate>
      <link>https://dev.to/medievalbatman/we-built-a-cli-that-turns-frontend-code-into-api-contracts-mock-servers-and-database-schemas-37no</link>
      <guid>https://dev.to/medievalbatman/we-built-a-cli-that-turns-frontend-code-into-api-contracts-mock-servers-and-database-schemas-37no</guid>
      <description>&lt;p&gt;We didn’t set out to build a whole product.&lt;br&gt;
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.&lt;/p&gt;

&lt;p&gt;So we built &lt;strong&gt;Bazable:&lt;/strong&gt; 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.&lt;/p&gt;
&lt;h2&gt;
  
  
  How it started
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;The usual fix was:&lt;/p&gt;

&lt;p&gt;Notice the bug.&lt;/p&gt;

&lt;p&gt;Dig through network tabs.&lt;/p&gt;

&lt;p&gt;Compare code with backend docs.&lt;/p&gt;

&lt;p&gt;Realise the docs were outdated too.&lt;/p&gt;

&lt;p&gt;That got old fast.&lt;/p&gt;

&lt;p&gt;We thought: what if the frontend itself could tell us what APIs it expects?&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;That file became the contract.&lt;/p&gt;
&lt;h2&gt;
  
  
  What Bazable actually does
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;It reads your code, not your docs&lt;/strong&gt;&lt;br&gt;
You run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bazable extract &lt;span class="nt"&gt;--payloads&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It scans your entire project – JS, TS, HTML, even Python and PHP if you use presets – and finds every API call.&lt;/p&gt;

&lt;p&gt;It even notices custom wrappers like fetchLedgerAPI or apiClient, because let’s be honest, nobody uses raw fetch everywhere.&lt;/p&gt;

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

&lt;p&gt;No more manual documentation that’s out of date the moment you write it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Once you have a contract, you can run:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bazable inspect
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It checks your code against the contract and catches things like:&lt;/p&gt;

&lt;p&gt;Dead URLs – you’re calling an endpoint that isn’t in the contract.&lt;/p&gt;

&lt;p&gt;Payload mismatches – you’re sending "123" when the contract expects a number.&lt;/p&gt;

&lt;p&gt;Over‑fetching – the API returns 10 fields, but you’re only using 2.&lt;/p&gt;

&lt;p&gt;It can even auto‑fix some mismatches with&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bazable inspect &lt;span class="nt"&gt;--fix&lt;/span&gt;&lt;span class="nb"&gt;.&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  It tests all your APIs in one command
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bazable &lt;span class="nb"&gt;test&lt;/span&gt; &lt;span class="nt"&gt;--mock&lt;/span&gt; &lt;span class="nt"&gt;--all&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Bazable will hit every contracted endpoint and report which ones are alive and which ones are broken.&lt;/p&gt;

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

&lt;h2&gt;
  
  
  It generates frontend and backend code
&lt;/h2&gt;

&lt;p&gt;This is where it gets fun.&lt;/p&gt;

&lt;p&gt;From the same contract, you can generate:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;TypeScript types –
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bazable types
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;A typed API client –
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bazable client
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;React + Tailwind forms –
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bazable gen ui POST /v1/users
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Express/Hono backend routers –
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bazable gen backend
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Prisma models or Supabase SQL –
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bazable gen db
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So a frontend developer can generate the exact form they need. A backend developer can generate the exact database schema. Everyone stays in sync.&lt;/p&gt;

&lt;h2&gt;
  
  
  It syncs contracts across your team
&lt;/h2&gt;

&lt;p&gt;If you work on a team, Bazable Cloud lets you push and pull contracts.&lt;/p&gt;

&lt;p&gt;Backend dev runs bazable push.&lt;br&gt;
Frontend dev runs bazable sync.&lt;br&gt;
No more Slack messages like “I changed the API, I am sure... don't worry”.&lt;/p&gt;

&lt;p&gt;You can even watch for changes automatically:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bazable watch
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;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.&lt;/p&gt;

&lt;h2&gt;
  
  
  It’s AI‑ready and agent‑friendly
&lt;/h2&gt;

&lt;p&gt;Bazable now supports:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bazable explain POST /v1/users
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;– AI explains what an endpoint does in plain English.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bazable propose &lt;span class="s2"&gt;"add a phone field"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;– AI suggests a schema change.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bazable accept &amp;lt;&lt;span class="nb"&gt;id&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;– approve and apply that change.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why it’s different from Postman / Swagger / etc.
&lt;/h2&gt;

&lt;p&gt;Most API tools start from documentation or manually‑written collections.&lt;br&gt;
Bazable starts from real code.&lt;/p&gt;

&lt;p&gt;That means:&lt;/p&gt;

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

&lt;p&gt;And the whole thing is open source and free.&lt;/p&gt;

&lt;p&gt;You can try it right now.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;-g&lt;/span&gt; bazable-api
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Links
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://bazable.mintlify.app" rel="noopener noreferrer"&gt;Documentation:&lt;/a&gt;&lt;/strong&gt; &lt;a href="https://bazable.mintlify.app" rel="noopener noreferrer"&gt;https://bazable.mintlify.app&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://github.com/Agentfield247/bazable" rel="noopener noreferrer"&gt;GitHub:&lt;/a&gt;&lt;/strong&gt; &lt;a href="https://github.com/Agentfield247/bazable" rel="noopener noreferrer"&gt;https://github.com/Agentfield247/bazable&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://www.npmjs.com/package/bazable-api" rel="noopener noreferrer"&gt;npm:&lt;/a&gt;&lt;/strong&gt; &lt;a href="https://www.npmjs.com/package/bazable-api" rel="noopener noreferrer"&gt;https://www.npmjs.com/package/bazable-api&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Kindly Star the Repo and drop feedbacks at my mail &lt;br&gt;
*&lt;em&gt;&lt;a href="mailto:the247th@gmail.com"&gt;the247th@gmail.com&lt;/a&gt; *&lt;/em&gt;&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>opensource</category>
      <category>devops</category>
      <category>api</category>
    </item>
  </channel>
</rss>
