In this section · Start from something brokenRepair, then TypeScript
Start from something broken
Repair an AI answer, then type it
A model’s reply with a code fence and Python values becomes JSON, then a TypeScript interface.
You asked a chat model for a sample record so you could write the code that handles it, and it obliged — with a friendly sentence on top, the record inside a Markdown fence, a closing offer of more help, and a couple of values spelled the way Python spells them. None of that parses. What you actually want is two things in a row: the record as JSON you can keep, and a TypeScript interface describing it, so the editor in your project can check the code you write against the shape. This recipe gets you both in two presses and one paste.
1 · Repair the answer
The model’s reply goes into the editor exactly as it came, chatter and all. There is no need to trim it by hand first: finding the block inside the prose is part of what Repair is for.
Input
Here is the account as JSON:
```json
{
"id": 1042,
"name": "Rosa Lind",
"email": "[email protected]",
"plan": "team",
"seats": 12,
"verified": True,
"referrer": None,
}
```
Let me know if you need the invoices too.Do
- Paste the input into the left pane of the editor.
- Press Repair in the editor band.
Result
Removed a Markdown code fence
Removed text around the code block
Removed trailing commas
Converted Python literals (2)
{
"id": 1042,
"name": "Rosa Lind",
"email": "[email protected]",
"plan": "team",
"seats": 12,
"verified": true,
"referrer": null
}Four kinds of fix, each named. The fence and the two sentences around it are gone, True and None became true and null, and the comma after the last field, which JavaScript would forgive and JSON does not, was removed. The layout of the record itself is untouched: Repair changes only what it has to, so the indentation the model chose survives.
Repair takes the fenced block because there was exactly one object in the reply. Had the model put its JSON inline in a sentence, with no fence, the editor would have refused and said so in the status bar, since guessing where an object starts inside prose is the kind of guess that goes wrong silently.
2 · Generate the interface
The repaired text is now an ordinary document, and it is what the second block starts from, character for character. Copy it out of the left pane, or press Try it under the block below, which opens Generate with it already in the source.
Input
account.json
{
"id": 1042,
"name": "Rosa Lind",
"email": "[email protected]",
"plan": "team",
"seats": 12,
"verified": true,
"referrer": null
}Do
- Set From to JSON, and under Language choose TypeScript.
- In Options, under TypeScript, set Declaration to interface and Optional fields to name?: T, and tick export declarations.
- Paste the input into the source pane, and type
Accountinto Root name, since a paste has no file name to take it from.
Result
export interface Account {
id: number;
name: string;
email: string;
plan: string;
seats: number;
verified: boolean;
referrer: null;
}One interface, named after the file. Every field the sample had is required, because a single example cannot show that any of them is sometimes missing, and each type is read straight off its value: the id and the seat count are numbers, the flag is a boolean.
The line to look at twice is referrer: null. From one sample the generator knows only that the field was null this time, so null is the only type it can honestly write. The real field is almost certainly a string that happens to be empty for this account. Either widen it by hand to string | null, or — better — ask the model for a second record where a referrer is set and paste both as an array; the generator then merges the two and writes the union itself.
Doing it all in the editor
You do not have to leave the editor for the second step. With the repaired document in the left pane, Generate in the band opens a panel over the right pane with the same ten languages and the same options, writing the interface for whatever the left pane holds. Its root name starts from the name above the pane, so rename the pasted document to account.json first and the interface comes out as Account without typing anything else.
The Generate page is the better choice when you want more room, or when the next answer arrives as YAML rather than JSON: it reads either, and shows the JSON it read in a tab of its own. The panel is quicker when you are still fixing the document, since every edit to the left pane rewrites the interface as you type.
The options that decide the output
The steps name every TypeScript option, even the ones left at their defaults, because all of them are remembered between visits and shared with the editor’s panel. If you chose type alias last week, you would otherwise follow these steps and get export type Account = instead of an interface. Optional fields matters only once a field is missing from some samples; with a single record it has nothing to mark.
If the model tends to answer with a list rather than one record, paste the list as it is. The root becomes an array, the element type is named in the singular, and fields missing from some elements are marked optional — which is often more useful than the single record, since it shows which fields you can rely on.
When it goes wrong
If Repair answers with a refusal, the reply almost certainly holds two candidate objects, or an object inside a sentence with no fence around it. Delete the prose by hand down to the record, press Repair again, and carry on. If Generate shows a line and a column instead of code, the source did not parse — usually because only part of the repaired text was copied across. Select the whole pane and paste again.
And if the record the model gave you was cut off before its last brace, Repair closes it for you; the next recipe starts from exactly that case, and ends with a schema you can hand back to the model so it answers in the right shape next time.
Where to go from here
- JSON from an AI model: the fences, chatter and truncation Repair handles, and what it leaves alone.
- Repair broken JSON: every fix, and when the editor refuses.
- TypeScript from JSON: optional fields, nested types and how each is named.
Open the editor and paste a reply of your own.