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

  Рет қаралды 4,280

Vercel

Vercel

7 ай бұрын

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!

Пікірлер: 7
@WilsonMar1
@WilsonMar1 6 ай бұрын
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
@AhmadAwais 6 ай бұрын
Couldn't agree more!
@alexgochenour8740
@alexgochenour8740 2 ай бұрын
His CLI course is the best too ^^
@abidibnazam4462
@abidibnazam4462 6 ай бұрын
This is lit🎉
@AhmadAwais
@AhmadAwais 6 ай бұрын
Glad you like it. I'm excited to be launching this soon.
@dawid_dahl
@dawid_dahl 6 ай бұрын
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
@mo3k 5 ай бұрын
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.
Hands on with the Vercel AI SDK 3.1
13:04
Vercel
Рет қаралды 22 М.
Would you like a delicious big mooncake? #shorts#Mooncake #China #Chinesefood
00:30
¡Puaj! No comas piruleta sucia, usa un gadget 😱 #herramienta
00:30
JOON Spanish
Рет қаралды 23 МЛН
Ну Лилит))) прода в онк: завидные котики
00:51
10 common mistakes with the Next.js App Router
20:37
Vercel
Рет қаралды 176 М.
The Big Headless CMS Lie (James Mikrut)
18:14
Vercel
Рет қаралды 42 М.
Scaling Your Next.js Application on Vercel
47:10
Vercel
Рет қаралды 4,2 М.
Graphite 1: What is stacking?
2:34
Graphite
Рет қаралды 186
The Million Dollar Tech Stack
17:59
Tech With Tim
Рет қаралды 39 М.
Trying to attack the Vercel Firewall
13:09
Vercel
Рет қаралды 12 М.
Next.js App Router Caching: Explained!
25:22
Vercel
Рет қаралды 78 М.
Building Generative UI with Next.js (Jared Palmer)
13:16
The things Vercel won't show you (Theo Browne)
9:19
Vercel
Рет қаралды 19 М.
ПК с Авито за 3000р
0:58
ЖЕЛЕЗНЫЙ КОРОЛЬ
Рет қаралды 1,6 МЛН
What percentage of charge is on your phone now? #entertainment
0:14