Receive model output in a defined shape with named fields and types.
<div class="scene"><div class="heading">SCHEMA CHECK</div><div class="schema mono">{<br> "title": <span id="title-value">"출시"</span>,<br> "count": <span id="count-value">3</span><br>}</div><div class="validation" id="validation">필드와 타입 일치</div></div>.scene{width:min(94vw,800px);height:min(88vh,326px);padding:clamp(10px,2.7vmin,19px);border:1px solid var(--line);border-radius:13px;background:var(--surface);font:500 clamp(13px,2.4vmin,17px)/1.3 var(--font-sans,sans-serif);position:relative;overflow:hidden}.scene .mono{font-family:ui-monospace,SFMono-Regular,monospace}.scene .muted{color:var(--muted)}.scene .accent{color:var(--accent)}.scene .heading{font-weight:750;color:var(--accent);margin-bottom:clamp(5px,1.6vmin,12px)}.schema{border:1px solid var(--line);background:var(--bg);border-radius:7px;padding:clamp(9px,3vmin,19px);height:62%;line-height:1.55}.schema span{color:var(--accent)}.schema span.bad{color:#c05545}.validation{margin-top:8px;padding:5px 8px;border-left:3px solid var(--accent);background:var(--bg)}.validation.bad{border-color:#c05545;color:#c05545}let bad=false;function draw(){bad=!bad;document.getElementById('count-value').textContent=bad?'"three"':'3';document.getElementById('count-value').classList.toggle('bad',bad);document.getElementById('validation').textContent=bad?'count는 숫자여야 함':'필드와 타입 일치';document.getElementById('validation').classList.toggle('bad',bad)}draw();setInterval(draw,1500)Structured output describes required fields and types with a schema, then constrains or validates the model response against it. This reduces ad hoc text parsing but does not prove the values are meaningful.
The demo fills an object and flags a value with the wrong type. Business rules and factual correctness still need checks after schema validation.
Use it when model output must feed an API, database, or automation step in a stable shape.