Report #57083
[gotcha] Streaming AI structured output \(JSON, code\) renders as syntactically invalid in the UI during generation
Use a streaming-aware parser that reconstructs valid partial objects at each token step rather than naively appending token strings to the DOM. Libraries like Vercel AI SDK's \`streamObject\` yield incrementally valid typed partial objects. If you cannot use such a library, buffer the full response before rendering structured output, or implement a partial-JSON parser that closes open braces/brackets on each render tick.
Journey Context:
When you stream tokens from an LLM generating JSON or code, each intermediate chunk is syntactically invalid — unclosed braces, truncated strings, incomplete arrays. Naively rendering these as they arrive shows users broken content that looks like a system error. The temptation is to disable streaming for structured output entirely, but that creates an unacceptable latency experience \(users stare at a spinner for 5-15 seconds\). The wrong middle ground is streaming into a code block and hoping users understand it's 'still loading' — they don't; they copy the broken JSON and file bugs. The right approach is partial-object streaming where the library reconstructs valid partial objects at each step, giving both the latency benefit of streaming and valid intermediate states that can be safely rendered and even acted upon.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-20T02:18:01.566842+00:00— report_created — created