Open-Source Reactive JSON Stream Parser
A high-performance incremental JSON stream parsing library published across the TypeScript (NPM) and Dart (pub.dev) ecosystems. Engineered with an event-driven state machine to intercept, buffer, and incrementally parse incomplete, chunked LLM JSON outputs, enabling real-time generative UI assembly and instant data bindings before the stream terminates.
The Overview
llm_json_stream is a high-performance, open-source package published across both the TypeScript (npm) and Dart (pub.dev) ecosystems. It is engineered to ingest, parse, and reactively yield complex JSON data streams generated by Large Language Models in real-time, bridging the gap between raw AI outputs and fluid front-end rendering.
The Problem
LLMs don't just hand you a perfectly formatted JSON object instantly; they stream data token by token. If you are building a Generative UI or a real-time data dashboard, waiting for the entire stream to finish before parsing completely ruins the user experience. You end up with static loading spinners instead of dynamic, assembling components. Traditional JSON parsers break when fed incomplete strings, throwing syntax errors until the very last bracket is closed.
The Solution
Instead of waiting for the stream to close, llm_json_stream acts as a reactive middleware. It safely buffers and parses incomplete JSON strings on the fly, emitting the highly-structured data incrementally. This allows the front-end to render UI components exactly as the AI generates the data, creating a zero-friction, instantly responsive experience.
How It Works
Under the hood, the parser maintains an internal state machine that tracks the opening and closing of JSON structures (objects, arrays, strings). As new text chunks arrive from the AI stream, it reconstructs the valid portions of the JSON tree. It handles edge cases like escaped characters, nested arrays, and incomplete keys without crashing. When it detects a usable chunk of state change, it yields the partial JSON object to the client, allowing UI components to dynamically paint themselves frame by frame.
How to Use It
Simply wrap your LLM stream output with the parser. Listen to the reactive yield, and map the incoming data directly to your state management solution (like React state or a Flutter StreamBuilder). It acts as a plug-and-play layer between your API call and your UI tree.
import { LLMJsonStreamParser } from 'llm-json-stream';
const parser = new LLMJsonStreamParser();
// Listen to incoming LLM text chunks
for await (const chunk of llmStream) {
const partialJson = parser.parseChunk(chunk);
if (partialJson) {
updateUIState(partialJson); // Reactively renders UI
}
}