Vercel’s AI SDK with SvelteKit & ChatGPT-4o Connections with SvelteKit! 🤖 LIVE Coding & Chill 🔴

Published: 01 January 1970
on channel: Johnny Magrippis
325
22

Vercel just had its big “Vercel Ship 2024” conference! Let’s take one of its biggest announcements for a spin, “The AI Framework for Typescript” 🤖

It’s meant to be “LLM-agnostic” to allow flexibility between the leading Large Language Models, but in the end, we’ll integrate specifically with ChatGPT 4o!

We don’t need Vercel’s SDK to work with an LLM of course! Check out my video from last year, on how to do it with SvelteKit 😁:    • ChatGPT-4 with SvelteKit 🤖 Generative...  

🚀 Click around the app yourself: https://chat-sveltekit.vercel.app/
💻 See the code (private repo 😱): https://github.com/johnnify & https://github.com/johnnify/chat-kit

— 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? Why use Vercel’s SDK for AI?
✅ My own quick video tutorial on ChatGPT with SvelteKit:    • ChatGPT-4 with SvelteKit 🤖 Generative...  
✅ Existing project overview
✅ Going through Vercel’s SvelteKit quickstart! https://sdk.vercel.ai/docs/getting-st...
✅ API Endpoint / Request handler to interface with OpenAI: https://kit.svelte.dev/docs/routing#s...
✅ Creating Project API keys in the OpenAI dashboard & using Environment Variables with SvelteKit: https://platform.openai.com/api-keys & https://kit.svelte.dev/docs/modules#$...
✅ Client-side form-handling with `useChat`: https://sdk.vercel.ai/docs/getting-st...
— WRAPPING CHAT-GPT —
✅ Is wrapping an LLM enough in 2024? (Spoiler-alert: **NO**)
✅ Adding flavour to our assistance with a `system` message!
✅ Streaming additional data along with the AI Chat Responses!
— BEYOND JUST AN LLM WRAPPER —
✅ Generative User Interfaces: https://sdk.vercel.ai/docs/ai-sdk-rsc...
✅ What about Vercel’s React UI? And v0? https://v0.dev/
— PRODUCTIONISE —
✅ Connecting to a real live Turso database! https://docs.turso.tech/cli/db/create
✅ Deploying to Vercel!
✅ Caching! https://sdk.vercel.ai/docs/advanced/c...
— NEXT STEPS —
✅ Actually useful responses with Embeddings: https://sdk.vercel.ai/docs/ai-sdk-cor...
✅ Working with Tools!
— HAVE FUN —

No affiliations whatsoever: if I show something, you know you're hearing my unfiltered thoughts 😄

— Highlighted software —
SvelteKit: https://kit.svelte.dev/
Vercel: https://vercel.com/
OpenAI: https://openai.com/
Playwright: https://playwright.dev/
Drizzle ORM: https://orm.drizzle.team/
Turso: https://docs.turso.tech/introduction
Lucia Auth: https://lucia-auth.com/
Tailwind: https://tailwindcss.com/

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 107!


TIMESTAMPS

00:00 - What are we doing today? Why use Vercel’s SDK for AI?
4:50 - My own quick video tutorial on ChatGPT with SvelteKit
8:48 - Existing project overview
12:07 - Going through Vercel’s SvelteKit quickstart!
19:19 - Creating Project API keys in the OpenAI dashboard & using Environment Variables with SvelteKit
24:17 - API Endpoint / Request handler to interface with OpenAI
32:29 - Client-side form-handling with `useChat`
1:18:50 - v0 for Svelte?! What’s v0 anyway?
1:23:57 - Is wrapping an LLM enough in 2024?
1:32:23 - Adding flavour to our assistance with a `system` message!
1:42:40 - Streaming additional data along with the AI Chat Responses!
1:54:50 - Generative User Interfaces?!
2:00:55 - Creating and connecting a real live Turso database!
2:06:30 - Migrating the production DB with Github Actions!
2:12:55 - Deploying to Vercel!
2:24:12 - Caching!
2:54:50 - Caching recap, demo and the instructions not quite working!
2:59:25 - Returning cached responses exactly how `useChat` wants them
3:21:00 - Production 🥳 Cached responses demo!
3:22:05 - Actually useful responses with Embeddings
3:26:20 - Working with Tools!
3:29:00 - How do you test ML, even?!


Watch video Vercel’s AI SDK with SvelteKit & ChatGPT-4o Connections with SvelteKit! 🤖 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 325 once and liked it 22 people.