UI Engineering for the AI Age

on YouTube ↗38m

" summary

Live-stream LLM outputs to avoid 15+ second waits and show content as it arrives, using Express + OpenAI then upgrading to the Vercel AI SDK stream_object abstraction to emit one JSON object per line (NDJSON) so each list item appears immediately — tested with requests for 20 and even 200 cheeses. Implementation reads res.body with a reader and TextDecoder, validates items with Zod, and renders fully interactive fragments via React Server Components & Suspense; the demo app movies++ ships and works.

AI-written summary · about

" chapters (11)

1. 0:00AI age UI engineering intro
2. 1:08Full stack AI app demo
3. 5:22Problem with non-streamed AI responses
4. 6:26Streaming for better UX
5. 10:41Handling partial JSON in streaming
6. 17:31Incremental JSON with NDJSON
7. 18:55Vercel AI SDK for streaming JSON
8. 21:03Generative UI with movies++
9. 23:32AI-powered UI code walkthrough
10. 31:42React server components + AI
11. 32:02Closing remarks

" related talks

• 44mUsing AI Effectively in 2025Tejas Kumar · React Paris 2025
• 28mCreating fluent Frontend Experiences in an age of AITejas Kumar · Frontend Nation 2025
• 14mStreaming UI and Scaling Full-Stack AI Like a Boss to Millions with Next.jsAhmad Awais · Next.js Conf 2023
• 24mFull Stack Web Development with AITamas Piros · CityJS London 2025
• 47mStructured Outputs in OpenAI: Building Reliable JSON-Based AI IntegrationsRainer Stropek, Melanie Bauer · MLcon London 2026
• 17mReact Server Components in AI ApplicationsTejas Kumar · React Advanced 2024
• 27mAI-Generated React Server ComponentsTejas Kumar · CascadiaJS 2024
• 41mFrom RAGs to riches: Build an AI document interrogation app in 30 minsEswaramoorthy, Pothina · PyData NYC 2023