A production walkthrough with a live Next.js demo - JSON.parse() vs partial-json + Zod for real-time AI dashboards.
We don't prompt AI, we architect it.
Article content
If you ship real-time AI dashboards in React, you have probably seen this pattern:
- Stream starts.
- Metrics update for a few chunks.
- Console throws SyntaxError.
- UI goes blank.
The bug is usually not React. It is not Next.js.
It is calling JSON.parse() on a live stream buffer an unterminated string that is incomplete by design.
I built an open-source demo to make this failure obvious - and to show a resilient parsing pipeline you can copy into production.
Most tutorials teach you to crash. Production demands resilience.
Tutorial path:
→ JSON.parse(buffer) on every chunk
→ UI crashes on a single missing bracket
Production path:
→ partial-json + Zod .partial()
→ UI updates live, ignoring malformed chunks
Error boundaries: seatbelt, not engine
StreamErrorBoundary catches render errors in children. It does not replace safe streaming parse logic or catch async errors inside useEffect.
Use error boundaries as a safety net after you fix parsing strategy.
Run it locally in 5 minutes
git clone https://github.com/gauravthorath/react-llm-stream-json-demo.git
cd react-llm-stream-json-demo
pnpm install
pnpm run dev
Open http://localhost:3000 → click Run Stream → open DevTools on the left panel.
Architecture notes: https://github.com/gauravthorath/react-llm-stream-json-demo/blob/main/ARCHITECTURE.md
Production takeaway
Parse partial: do not JSON.parse the live buffer
Validate partial: Zod .partial().safeParse
Render partial: skeletons for missing fields
Retain last good snapshot: do not blank UI on trailing garbage
Parse partial. Validate partial. Render partial.
What is next
Follow-up: tool-calling streams and schema drift - when the model changes field shapes mid-session and your UI needs a migration strategy, not just a parser.
Comment Part 2 on the video if you want that teardown next.
Connect
YouTube: https://youtu.be/n51RAGJZGdQ
GitHub: https://github.com/gauravthorath/react-llm-stream-json-demo
Portfolio: https://gauravthorat-portfolio.vercel.app/blog/react-llm-stream-json-parser
react #nextjs #typescript #ai #frontend #webdevelopment #javascript #softwareengineering #llm #sse
