Streaming

StreamingJSON

Progressive pretty-printer for JSON arriving from an LLM or network stream. Tries a strict parse first, then repairs unclosed braces/brackets and truncates partial trailing tokens so the tree renders even when the payload is incomplete. Keys render in brand, strings in success, numbers in warning.

Sourcesrc/components/ai/streaming-json.tsx

Complete payload

A fully-parsed JSON document — no cursor, no partial markers.

{
  "tool": "search_flights",
  "args": {
    "from": "NYC",
    "to": "HND",
    "maxPrice": 1000  },
  "results": [
    {
      "carrier": "United",
      "price": 745,
      "stops": 1    },
    {
      "carrier": "ANA",
      "price": 812,
      "stops": 0    },
    {
      "carrier": "Delta",
      "price": 899,
      "stops": 1    }  ],
  "cached": false}

Partial stream

The payload ends mid-string. StreamingJSON closes the open structures, truncates the partial token, and flags the render as partial with a blinking cursor.

{
  "status": "generating",
  "plan": [
    "search",
    "filter",
    "rank"  ],
  "current": {
    "step": "filter",
    "progress": 0.42,
    "note": "dropping dupli"  }}

Collapsible tree

collapsible lets users fold any object or array to reduce noise — useful for deep tool-call results in debugging views.


  "user": 
    "id": "u_8821",
    "prefs": 
      "model": "gpt-4o",
      "temperature": 0.7,
      "tools": 
        "web",
        "calc"      ]    }  },
  "session": 
    "tokens": 
      "in": 1284,
      "out": 612    },
    "cost_usd": 0.0193,
    "active": true  }}