Paste any API response JSON or text. Click Explain. You get a field map, status and pagination notes, errors to guard, and quick examples. Generate TypeScript types, Zod schema, JSON Schema, or example requests in multiple languages.
-
function startTimer(){ stopTimer(); startTs = performance.now(); statusEl.textContent = "Explaining... 0 ms"; timerId = setInterval(()=>{ const ms = Math.floor(performance.now() - startTs); statusEl.textContent = "Explaining... " + ms + " ms"; }, 37); } function stopTimer(){ if(timerId){ clearInterval(timerId); timerId = null; } } function finalizeTimer(){ const total = Math.floor(performance.now() - startTs); statusEl.textContent = "Done in " + total + " ms"; }
function sanitize(text){ if(!text) return ""; text = text.replace(/```[\s\S]*?```/g, m => m.replace(/```/g,"")); // drop fences only text = text.replace(/[*_`#>|]/g, ""); text = text.replace(/\[[^\] ]{1,5}\]/g, ""); text = text.replace(/https?:\/\/\S+/g, ""); text = text.replace(/ {3,}/g, "
"); return text.trim(); }
function tryPrettyJson(raw){ try{ return JSON.stringify(JSON.parse(raw), null, 2); } catch{ return raw; } }
const langMap = { javascript: { label: "JavaScript fetch", hint: "Use fetch with an async main and console.log key fields" }, typescript: { label: "TypeScript fetch", hint: "Use fetch in TS, include minimal inline types if obvious" }, python: { label: "Python requests", hint: "Use requests and print selected fields" }, java: { label: "Java 11 HttpClient", hint: "Use java.net.http.HttpClient and print to stdout" }, csharp: { label: "C# HttpClient", hint: "Use System.Net.Http.HttpClient and Console.WriteLine" }, go: { label: "Go net/http", hint: "Use net/http and encoding/json, print with fmt.Println" }, php: { label: "PHP cURL", hint: "Use curl_init and json_decode, echo fields" }, ruby: { label: "Ruby Net::HTTP", hint: "Use Net::HTTP and JSON.parse, puts fields" }, rust: { label: "Rust reqwest", hint: "Use reqwest blocking client and serde_json, println selected fields" }, bash: { label: "Bash curl", hint: "Use curl and jq if available; print selected fields" } };
function buildPrompt(responseText, contextText, mode, lang, format){ const modeMap = { explain: "Explain", typescript: "TypeScript", zod: "Zod", jsonschema: "JSON Schema", examples: "Examples", everything: "Everything" }; const chosen = modeMap[mode] || "Explain"; const selected = langMap[lang] || langMap.javascript; const inputFormat = format === "json" ? "JSON" : format === "text" ? "Plain Text" : "Auto";
return ( `Act as a senior API engineer. Explain the response and generate practical artifacts.
Mode: ${chosen} Example Language: ${selected.label} Example Hint: ${selected.hint} Input Format: ${inputFormat}
Return ONLY these plain-text sections in this exact order. No markdown. No code fences. No references.
Summary: Two lines that explain what this response represents.
Status And Pagination: Say the status field if present, success vs error shape, and the pagination pattern you detect such as page and perPage or next cursor or link headers. One or two lines.
Field Map: A compact list of key fields with short meanings. One line per field. Show nested paths with dots like data.items[].id
Errors And Edge Cases: One short list that shows error shape, common failure reasons, and any null or missing fields to guard.
Quick Actions: Two to five lines with concrete steps or queries a developer should try next.
Generated Types: If Mode is TypeScript or Everything include TypeScript interfaces for the response. If Mode is Zod or Everything include a Zod schema. If Mode is JSON Schema or Everything include a draft 2020-12 JSON Schema. Keep this section code only with no extra words. If Mode is Explain or Examples and types are not requested, leave this section empty.
Example Requests: If Mode is Examples or Everything include one short ${selected.label} example that fetches https://api.example.com/resource and prints the key fields. ${selected.hint}. Keep this section code only with no extra words. If Mode is Explain or a types-only mode, leave this section empty.
When To Stop: One or two lines with advice on what to check after you parse this response.
API Response: ${responseText}
Context: ${contextText || "(none)"}` ); }
async function explain(){ const rawResp = respEl.value.trim(); const ctx = ctxEl.value.trim(); if(!rawResp){ output.textContent = "Please paste an API response first."; return; } output.textContent = "-"; startTimer();
const pretty = formatSel.value === "json" || formatSel.value === "auto" ? tryPrettyJson(rawResp) : rawResp; const prompt = buildPrompt(pretty, ctx, modeSel.value, langSel.value, formatSel.value);
try{ const res = await fetch("https://cfg-ai.heyaditya29.workers.dev/", { method: "POST", headers: { "Content-Type":"application/json" }, body: JSON.stringify({ model: "sonar", messages: [{ role: "user", content: prompt }], max_tokens: 1800, temperature: 0.2 }) }); const data = await res.json(); let txt = "Failed to parse response."; if(data.error){ txt = "Error: " + data.error; }else if(data.choices && data.choices[0]?.message?.content){ txt = sanitize(data.choices[0].message.content); }else{ txt = sanitize(JSON.stringify(data, null, 2)); } output.textContent = txt || "No output."; }catch(err){ output.textContent = "Failed: " + err.message; }finally{ stopTimer(); finalizeTimer(); } }
function extractSection(text, section){
const lines = text.split("
");
const idx = lines.findIndex(l => l.trim().toLowerCase() === section.toLowerCase());
if(idx === -1) return "";
const nextNames = ["Summary","Status And Pagination","Field Map","Errors And Edge Cases","Quick Actions","Generated Types","Example Requests","When To Stop","API Response","Context"];
const nextSet = new Set(nextNames.map(n => n.toLowerCase()));
let end = lines.length;
for(let i = idx + 1; i < lines.length; i++){
if(nextSet.has(lines[i].trim().toLowerCase())) { end = i; break; }
}
return lines.slice(idx + 1, end).join("
").trim();
}
runBtn.addEventListener("click", explain);
clearBtn.addEventListener("click", () => {
respEl.value = ""; ctxEl.value = ""; output.textContent = "-"; statusEl.textContent = ""; stopTimer();
});
copyBtn.addEventListener("click", async () => {
try{ await navigator.clipboard.writeText(output.textContent || ""); copyBtn.textContent = "Copied";
setTimeout(()=> copyBtn.textContent = "Copy Output", 1100);
}catch(e){ copyBtn.textContent = "Copy Failed"; setTimeout(()=> copyBtn.textContent = "Copy Output", 1100); }
});
copyTypesBtn.addEventListener("click", async () => {
const types = extractSection(output.textContent || "", "Generated Types");
try{ await navigator.clipboard.writeText(types || ""); copyTypesBtn.textContent = "Types Copied";
setTimeout(()=> copyTypesBtn.textContent = "Copy Generated Types", 1100);
}catch(e){ copyTypesBtn.textContent = "Copy Failed"; setTimeout(()=> copyTypesBtn.textContent = "Copy Generated Types", 1100); }
});
copyExampleBtn.addEventListener("click", async () => {
const ex = extractSection(output.textContent || "", "Example Requests");
try{ await navigator.clipboard.writeText(ex || ""); copyExampleBtn.textContent = "Example Copied";
setTimeout(()=> copyExampleBtn.textContent = "Copy Example Requests", 1100);
}catch(e){ copyExampleBtn.textContent = "Copy Failed"; setTimeout(()=> copyExampleBtn.textContent = "Copy Example Requests", 1100); }
});
bookmarkBtn.addEventListener("click", () => {
alert("Press Ctrl+D on Windows or Command+D on Mac to bookmark this page.");
});
});
Paste a JSON body or a raw text response, click Explain, and you will get a short summary, a field map in plain words, notes on status and pagination, likely errors, and quick next steps. You can also generate TypeScript types, Zod schemas, JSON Schema, and small example requests for different languages. It runs in the browser and needs no signup.
Do not get lost. Hit Ctrl+D on Windows or Command+D on Mac to bookmark this tool for instant access.
An API response explainer reads the structure and content of a payload and describes it without drama. It pulls out the important keys, explains their intent, and shows the shape of arrays and objects in a way that you can map straight into UI or storage. It also points out error envelopes and pagination rules so you do not guess. On top of that it gives you types and small example requests so you can paste code into a file and start building.
The reality is simple. Most of us skim JSON and guess what fields mean. Then we get a runtime error because a nested key is optional. This tool exists to remove that guesswork.
Students who are learning APIs and want fast clarity. Beginners who are pasting their first REST or GraphQL response and feel lost. Professionals who need to wire a new endpoint into a feature and do not want to read a long PDF. You can use it during prototyping, in code review, or when debugging a production bug that smells like a response mismatch.
Paste the JSON body into the first box. If you have context like an endpoint note, paste it into the second box. Choose a mode. Explain will give you a summary, a field map, error shapes, and actions. Typescript will return interfaces. Zod and JSON Schema return validators. Examples will give a cURL style fetch in JavaScript or Python requests with sensible defaults. Everything returns all sections together. Click Explain and copy what you need.
Keep the paste focused. One response at a time will give the best results.
You paste this JSON
{
"data": [
{"id": "u_1", "name": "Ada", "role": "admin"},
{"id": "u_2", "name": "Linus", "role": "user"}
],
"meta": {"page": 1, "perPage": 20, "total": 42, "next": "/users?page=2"},
"error": null
}
The tool explains that data is an array of user objects. It says id is a string, name is a string, and role is a string with values like admin and user. It notes that meta holds page, perPage, total, and a next link. It calls out that error can be null and that you should guard for meta.next when you page forward. It can then generate a TypeScript interface for User and for the full response. It can also show a JavaScript fetch example that reads data, appends to a list, and follows meta.next when present.
You paste this JSON
{
"data": null,
"error": {
"code": "rate_limit",
"message": "Too many requests",
"retryAfterMs": 30000
}
}
The tool explains that success returns data and failure returns error. It tells you to check error.code and to back off based on retryAfterMs. It suggests reading the header if the server also sends Retry-After and to wrap calls in a simple backoff helper.
You paste this JSON
{
"items": [{"id": 101}, {"id": 102}],
"cursor": {"next": "eyJwYWdlIjoyfQ==", "hasMore": true}
}
The tool says that paging uses a cursor token and not page and perPage. It shows how to send the next token as a query parameter like cursor=eyJwYWdlIjoyfQ and to stop when hasMore is false. It also suggests that you store the cursor along with your last item if you need resume.
You paste this JSON
{
"data": {"user": {"id": "u_1", "projects": [{"id": "p_1"}]}},
"errors": []
}
The tool explains that the important path is data.user and that errors is present even on success. It suggests safe checks on data being present and errors length equals zero before you use nested fields.
The Field Map section is the part that saves time. It uses dotted paths and array brackets so you can create selectors and props without hunting through the whole JSON. Examples
When you build a table or a card you can wire fields straight from this section.
Strong types stop a class of mistakes before runtime. If you choose TypeScript you get small interfaces that match the response shape. If you choose Zod you get a validator that you can run in runtime to assert that the server delivered what you expect. If you need a machine readable contract you pick JSON Schema. All three are useful for different teams. Interfaces help IDEs and refactors. Zod protects the edges in the browser. JSON Schema gives you contract testing and documentation generators.
For the first example response you can expect interfaces like
export interface User {
id: string
name: string
role: "admin" | "user"
}
export interface UsersResponse {
data: User[]
meta: { page: number; perPage: number; total: number; next?: string | null }
error: null | { code: string; message: string; retryAfterMs?: number }
}
You can paste that near your fetch call. Your editor will hold your hand when you access fields.
import { z } from "zod"
export const UserZ = z.object({
id: z.string(),
name: z.string(),
role: z.enum(["admin","user"])
})
export const UsersResponseZ = z.object({
data: z.array(UserZ),
meta: z.object({
page: z.number(),
perPage: z.number(),
total: z.number(),
next: z.string().nullable().optional()
}),
error: z
.object({
code: z.string(),
message: z.string(),
retryAfterMs: z.number().optional()
})
.nullable()
})
This gives you a runtime check that throws a helpful message when the server changes something.
A schema lets you document and validate at the boundary. You can feed it into validators or generators. The tool can emit draft 2020 schemas with clear types and required keys.
When you want to poke an endpoint without reading a full SDK you can use small examples. The tool can output JavaScript fetch that hits a placeholder URL and prints a few key fields. It can output Python requests with the same idea. These are minimal and easy to adapt. You can drop them into a scratch file and run them to confirm your auth and your filters.
Start with Explain mode to build a picture. Then add types once your shape stabilizes. Use Zod when you integrate with third party APIs where you do not control the contract. Use JSON Schema when you share an internal API and want generator support. Keep example requests around for smoke tests. Save one script that hits staging with a real token and prints a key count. It will catch surprises early.
If you build a list view you need ids, names, and total count. The field map makes that obvious. If you build a detail page you need a clean object with nested fields. The explainer tells you which ones can be null. That hints at form defaults and placeholder text. Small notes like this prevent rough edges in UX.
Back end code benefits from strict types and validators. Once you paste the schema into your service you can validate incoming payloads or serialize outgoing ones in a predictable way. The same map helps you write integration tests that pin down the contract.
If the output looks noisy you pasted more than one response. Trim it to one. If types look too broad add a short note in Context with known values like role is admin or user. If the example code does not run you probably need an auth header or a real URL. Replace placeholders and try again.
We hope our AI-powered API response explainer helped streamline your task. At CodeForGeek, we are constantly developing intelligent tools to boost developer productivity.
