Streaming UI and Scaling Full-Stack AI Like a Boss to Millions with Next.js (Ahmad Awais)

Presented at Next.js Conf 2023.
View all talks from the conference: • Next.js Conf 2023 - In...
Explore templates of sites built with Next.js: vercel.fyi/verceltemplates
Check out the Vercel product tour: vercel.fyi/producttour
"Did we really just do what we really just did?" was the feeling when I built a modern full-stack generative AI operating system on top of the new Next.js App Directory. It's not your run-of-the-mill AI wrapper; it's a UI/AI streaming masterpiece. The layouts magically switch components from server to client as needed. The UI streams seamlessly with AI inference, parameters, and prompts so lifelike you'd swear you're chatting with a real person. Simple, right? Not exactly rocket science, not groundbreaking, but oh-so-powerful. All of this was either impossible or extremely hard to pull off in the "Pages directory" just one year ago. It scales so well, I couldn't believe it myself. It's an undeniably brilliant full-stack AI developer experience. In this talk, I'll explain how Next.js App Directory is genuinely a winning bet and how it will change how we build UIs, especially for Gen-AI LLM-based apps. I'll also talk about how I created the AI operating system on top of the Next.js App Directory. By the end of this talk, you'll walk away prepared to build your own generative AI LLM web apps that will use server and client components to craft complex yet powerfully simple interactions. You'll feel confident in improving your web apps' Developer Experience (DX) and User Experience (UX). You'll be decisive in crafting apps with lightning-fast iteration velocity and default high performance. Let's go!

[@WilsonMar1]

This is the next generation platform. We’ve come full circle back to server-side rendering. But the server sends different components in parralel.

[@AhmadAwais]

Couldn't agree more!

[@alexgochenour8740]

His CLI course is the best too ^^

[@abidibnazam4462]

This is lit🎉

[@AhmadAwais]

Glad you like it. I'm excited to be launching this soon.

[@dawid_dahl]

So that last thing where the chat bar jumped to the top, and where the text was updated, how was it made? Annoying that you didn't also show the code for it. Was it just by adding a loading.ts file in the component directory, or?

[@mo3k]

Yes, just adding the loading.js file does the trick. It pretty much wraps the element in a Suspense element and passes the component in the loading.js file to the loading prop of Suspense element.