Vercel’s AI SDK with SvelteKit 🤖 Svelte 5 & SvelteKit 2 tutorial 🎥 LIVE Coding & Chill 🔴
Let’s add AI features to our new app for streamers, and YouTubers and all sorts of creators, by integrating with ChatGPT using Vercel’s AI SDK!
We explored Vercel’s AI right when it was released, let’s revisit it and set ourselves up for exploring more advanced features next time, including RAG with LangChain, to implement generative Q&A with citations based on video transcripts!
🚀 Click around the app yourself: https://chronokit.vercel.app/
💻 See the code (private repo 😱): https://github.com/johnnify & https://github.com/johnnify/chrono
If you’re a beginner, you may want to start with our Portfolio "Paulina Puppers" series, and end up with the same or an equivalent project: • Brand new Fullstack App with Svelte 5...
No need to watch the previous episodes, but this series playlist is: • Event Sourcing with PocketBase & Svel...
Check around the channel for more playlists and increasingly complicated tech stack choices 🙌
— JOHNNIFY PREMIUM —
Get this repository AND MORE with Johnnify Premium: https://johnnify.com/premium
— 🙌🙌🙌 —
— COMMUNITY —
Our DISCORD SERVER 👾: / discord
— 🥳🥳🥳 —
— Agenda —
✅ What are we doing today?
✅ UI and backend logic to save a livestream title and description! `livestream/[id]/edit`: https://superforms.rocks/get-started & https://zod.dev/
✅ “AI suggest“ form action!
✅ Why not use OpenAI directly? • ChatGPT-4 with SvelteKit 🤖 Generative...
✅ Bringing in Vercel's AI SDK! https://sdk.vercel.ai/
✅ Creating a new OpenAI project and api key!
✅ Backend logic to get a suggestion based on the agenda!
✅ Get 3 suggestions, UI to show and optionally use them!
✅ Caching results!
— NEXT STEPS —
[ ] Suggest Titles too?
[ ] Hooking up LangChain?! https://sdk.vercel.ai/providers/adapt...
[ ] Generative Q&A with “citations”!
[ ] How do you test ML, even?!
— HAVE FUN —
No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄
— Highlighted software —
SvelteKit: https://kit.svelte.dev/
Turso: https://docs.turso.tech/introduction
Playwright: https://playwright.dev/
Tailwind: https://tailwindcss.com/
shadcn-svelte: https://shadcn-svelte.com/
Vercel: https://vercel.com/johnnify
Turbo: https://turbo.build/
My own website: https://magrippis.com/
Search for `@jmagrippis` to find me on socials like Instagram & Twitter! And remember our DISCORD SERVER 😉: / discord
Between the comment section and the socials, let me know *somewhere* what you’d like me to cover next 🙌
Stream number 120!
—
TIMESTAMPS
—
00:00 - What are we doing today?
6:42 - UI and backend logic to save a livestream title and description! `livestream/[id]/edit`
45:30 - UI and form action for an “AI suggest“ feature!
54:55 - Why not use OpenAI directly?
58:31 - Bringing in Vercel's AI SDK!
1:00:49 - Creating a new OpenAI project and api key!
1:13:05 - Backend logic to get a suggestion based on the agenda!
1:38:08 - Suggestion flow LIVE 🥳 DEMO!
1:56:26 - Caching overview!
2:02:35 - Get 3 suggestions with `generateObject`
2:09:31 - Implement caching!
2:40:21 - LIVE 🥳 DEMO!
2:44:45 - Styling and chill 😁
2:54:09 - Copy suggestion on click!
3:08:05 - Remember to update your `turbo.json` when you add env vars
3:10:12 - ULTIMATE LIVE 🥳 DEMO!
Watch video Vercel’s AI SDK with SvelteKit 🤖 Svelte 5 & SvelteKit 2 tutorial 🎥 LIVE Coding & Chill 🔴 online without registration, duration hours minute second in high quality. This video was added by user Johnny Magrippis 01 January 1970, don't forget to share it with your friends and acquaintances, it has been viewed on our site 355 once and liked it 14 people.