Ask AI
An embedded micro-frontend that brings conversational, AI-assisted content modeling into the host app, streaming generated schemas into an interactive, editable tree in real time.
Real-time
streaming UI
1
open-source spin-off
E2E
Playwright tested
Overview
Ask AI is an embedded micro-frontend that brings conversational, AI-assisted content modeling into the host product. Describe what you want and it streams a generated schema into an interactive, editable tree, running as an independent app while integrating cleanly with the host UI.
The challenge
AI-generated schemas stream in as incomplete, chunk-by-chunk JSON that standard parsers reject, so the interface can't render until the whole response lands. And every generated field has to slot into exactly the right place inside a deeply nested content-type tree, resilient to malformed or adversarial responses.
The approach
I built it as a micro-frontend communicating with the host over an event bus with shared global state, then solved the streaming problem by authoring an open-source parser (llm-json-validator) that completes partial JSON in real time, enabling smooth incremental rendering with stop, regenerate, and cancellation controls. 'Add Fields with AI' uses recursive, position-aware tree insertion and precise schema context so each generated field lands at the correct node, editable inline, and hardened against invalid generations.
What made it work
Self-contained in-host MFE
Runs as an independent micro-frontend yet integrates cleanly with the host through an event bus and shared state, no host rewrite required.
Streaming that renders live
Real-time completion of partial JSON turns raw model output into a hierarchical preview as it arrives, with stop, regenerate, and request-cancellation controls.
Precision tree insertion
Recursive, position-aware placement drops AI-generated fields at the exact node in deeply nested content types, editable inline through an interactive tree UI.
Built with