Using AI Structured Output with NextJS & React

Let's dig into OpenAI's structured output with three different ways, including streaming JSON, using React and NextJS.

👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF

00:00 Introduction
01:24 Building NextJS with ShadCN
04:05 Structured Output with Zod
05:10 Creating the Vercel AI API Route
06:46 Building the Vercel AI Page
08:26 ShadCN Integrates With V0
12:15 DIY AI API Endpoint
13:30 Using the DIY AI Endpoint
14:16 Streaming Structured Output
17:30 Outroduction

[AnteZivkovic]

Love your way of passing on knowledge. Concise, clear and useful!

[yassineoh]

Thank you Jack, I was waiting since your announcement about your AI serie.

[Esteban-uhov]

I don't want to miss a video🎶. Great content! Pure gold on every single video.

[sambushell]

This is super helpful, thank you!

Could you consider doing a tutorial on using a combination of OpenAI Assistants with streaming and structured outputs?

Appreciate your work!

[ManfredSpecht]

Hey Jack, that was really cool. I always love your content. I'll definitely introduce it to my people.🤓

[larrymcfarlane]

Holy balls! I think v0 and the new release of shadcn almost overshadowed you on this one. 😆 Awesome clip!

[MajesticGeek]

Very helpful and timely for me. Thank you!

[AaronConnolly-bm]

Next level teaching and video clarity!

[hugodsa]

Best value for money pronextjs no doubt. So happy to get it ❤

[marc]

Hey there, thanks for sharing this. Where did u find the sidebar-6 via shadcdn. May be i am blind but can't find it on their website

[realbigsquid]

I'm 100% certain that shadcnui is the next bootstrap. For better or worse, I predict that we're going to start noticing that the main difference between uis will be whether or not they picked default or new York. Kinda like you can tell a bootstrap site from the header. Maybe I'm old, but I feel like shadcn is just that revolutionary to front end design

[developerpranav]

2:45 There's a --src-dir flag that you can pass ;)

[Merchance]

What's your thought about Cursor IDE?

[pepew]

When submiting the form, why not using a server action instead of a route ?

[Itsmeyouknow]

Hi sir, though next is making its way through SSR, SSR is cpu bound and nodejs is a single thread. Can you please make a video about that. Is there any work around or any solution

[lamhung]

Hi sir, do you feel Next.js Actions is similar to Remix 's route actions.

What's the the difference?

[KayKhan-xc]

Do you still use TRPC? or do you no longer recommend that anymore?

[TylerJusCodes]

I get this error
`OpenAI API key is missing. Pass it using the 'apiKey' parameter or the OPENAI_API_KEY environment variable."`

at what point do i pass the APIKey, The OpenAI class seems like it's deprecated.

[nelsonsbrian]

I personally hate the new streaming pattern of AI responses, especially when it comes to longer items. The screen always moves/shifts while you're trying to read. I'd rather just wait the 2 seconds extra as I have to wait anyway.