this.stephie
this.stephie
  • 55
  • 421 587
Build an AI powered Chatbot with SvelteKit and the Vercel AI SDK
Learn how to use the Vercel AI SDK to build a simple AI powered chatbot with SvelteKit and Open AI.
Vercel AI SDK Docs: sdk.vercel.ai/docs/introduction
Repo: github.com/StephDietz/sveltekit-ai-chatbot
0:00 - Intro
0:31 - Getting Open AI API key
1:52 - Setting up your project
3:23 - Creating your API Route
6:07 - Setting up the UI
#sveltekit #ai
มุมมอง: 1 568

วีดีโอ

Handling `next/image` errors with `onError`, `onLoad`, and `unoptimized`
มุมมอง 9858 หลายเดือนก่อน
Learn how to handle image loading errors in Next.js using the next/image component with onError, onLoad, and unoptimized props. This video provides a straightforward solution for displaying unoptimized images when encountering issues like 403 errors with externally hosted images. #nextjs 0:00 - Intro 0:08 - The issue 0:29 - The solution 1:36 - The `unoptimized` prop 1:51 - The `onError` prop 2:...
How to Use React's `useOptimistic` Hook
มุมมอง 2.8K8 หลายเดือนก่อน
Learn how to use React's `useOptimistic` hook for instant UI updates in you Next.js project. 0:28 - Intro 1:27 - The problem 1:48 - What does `useOptimistic` do? 1:52 - The solution Build UI blog post: buildui.com/posts/instant-search-params-with-react-server-components Book Inventory Repo: github.com/vercel-labs/book-inventory #useOptimistic #nextjs
Loading Large CSVs into a Vercel Postgres Database
มุมมอง 2.2K9 หลายเดือนก่อน
Learn how to efficiently load a large CSV dataset into a Vercel Postgres database using Next.js. We'll cover setting up your project / databse, parsing CSV files with PapaParse, and inserting the data into your database. 0:00 - Intro 0:13 - What is a CSV? 0:26 - Setting up our Next.js project 1:00 - Creating our Vercel Postgres database 1:43 - Parsing the CSV with papaparse 3:10 - Creating the ...
Next.js Middleware: When to use it and when to avoid
มุมมอง 4.9K10 หลายเดือนก่อน
Learn when and how to use Next.js Middleware effectively, and when not to use it. 0:00 - Intro 0:27 - When to use Middleware 1:42 - When to avoid using Middleware 3:30 - How to use Middleware #nextjs #middleware
Deploy Express.js on Vercel
มุมมอง 11K10 หลายเดือนก่อน
Learn how to deploy your Express.js server to Vercel 0:00 - Intro 0:06 - Creating your Express.js app 0:32 - Setting up your server 1:06 - Configuring for Vercel 1:26 - Using the Vercel CLI to test locally 2:29 - Deploying 📝 Express.js on Vercel: vercel.com/guides/using-express-with-vercel #expressjs #vercel
Returning and Displaying Form Errors from Server Actions
มุมมอง 3.7K11 หลายเดือนก่อน
#next.js #react #serveractions Learn how to return error messages from a Server action and deiplsy them in a form using the `useFormState` hook.
Optimizing Videos in Next.js
มุมมอง 5Kปีที่แล้ว
#nextjs #approuter Learn the best practices for optimizing videos in your Next.js application 00:05 - Embedding a youtube video using the iframe tag 01:51 - Embedding a self hosted video using the video tag 03:51 - Further optimization learning Resources: Next.js docs: nextjs.org/docs/app/building-your-application/optimizing/videos iframe attributes: developer.mozilla.org/en-US/docs/Web/HTML/El...
Streaming With Suspense
มุมมอง 924ปีที่แล้ว
#nextjs13 Dive into streaming and React's Suspense feature, and see how they change the way web pages load and display content. 0:00 - Intro 0:21 - What is streaming? 1:46 - What is suspense? 2:53 - Component-level data fetching 3:30 - Out of order streaming 💻 RESOURCES: React Suspense Docs: react.dev/reference/react/Suspense Next.js Streaming Docs: nextjs.org/docs/app/building-your-application...
NextAuth Credentials Provider Integration | Next.js App router
มุมมอง 17Kปีที่แล้ว
Learn how to integrate the NextAuth credentials provider into your App Router project! 00:00 Introduction 00:39 Setting up Next Auth 02:42 Using Credentials Provider 04:40 Adding Sign In Functionality 05:53 Connecting to Login Form 07:04 Testing Login Functionality 07:21 Adding Logout Functionality 07:45 Conclusion 💻 RESOURCES: Next.js Learn Course: nextjs.org/learn NextAuth.js Docs: next-auth....
Adding a Search Feature to a Server Component | Next.js App Router
มุมมอง 12Kปีที่แล้ว
#nextjs13 Learn how to use URL search parameters to add search functionality to a server component in a Next.js app router project. 0:00 - Intro 1:13 - Overview of page code 2:01 - Capturing the user's input 2:41 - Update URL with search param 4:13 - Keeping the url and input in sync 4:45 - Updating the table based on search query 5:42 - Debouncing 💻 RESOURCES: Next.js Learn Course: nextjs.org/...
Getting Started With Vercel Blob
มุมมอง 7Kปีที่แล้ว
💻 RESOURCES: Vercel Blob template: vercel.com/templates/next.js/blob-starter Vercel Templates Marketplace: vercel.com/templates Vercel Storage Docs: vercel.com/docs/storage Blob waitlist: vercel.com/storage/blob 🤝 LET’S CONNECT: ◆ Twitter: steph_dietz_ ◆ Github: github.com/StephDietz ◆ Blog: steph-dietz.com #nextjs #vercel
Intro to SvelteKit Form Actions
มุมมอง 2Kปีที่แล้ว
#sveltekit #formactions Learn how to optimize web forms with SvelteKit's form actions. 0:00 - Intro 0:30 - Demo 1:10 - Default form actions 3:30 - Named form actions 4:26 - Progressive Enhancement Links 🔗: SvelteKit form actions docs: kit.svelte.dev/docs/form-actions Vercel KV docs: vercel.com/docs/storage/vercel-kv
Vercel KV integration with Nitro Storage
มุมมอง 558ปีที่แล้ว
#nuxtjs #vercelstorage Discover how to seamlessly integrate Vercel KV, a serverless Redis solution, with Nuxt.js using Nitro storage. 0:00 - Intro to Nuxt 0:54 - App demo 1:22 - Creating Vercel KV store 1:42 - Installing Vercel KV 1:58 - Configuring your projecy 2:25 - Using KV storage 3:10 - deploying your project 3:38 - Connecting KV store to your project 🔗 Links: Template: vercel.com/templat...
Getting Started with Vercel Postgres
มุมมอง 8Kปีที่แล้ว
Learn how to add and use Vercel's new Postgres storage in a SvelteKit project. 0:00 - Intro to Vercel Storage 1:02 - Demoing the project 1:24 - Creating the Vercel Postgres database 1:45 - Setting up our Project 2:23 - Storing/fetching data in the database 4:42 - Testing the app 💻 RESOURCES: Vercel Templates Marketplace: vercel.com/templates?search=vercel postgres Vercel Storage Docs: vercel.co...
Exploring SvelteKit's Deployment Options: Server, Edge, and ISR
มุมมอง 1.9Kปีที่แล้ว
Exploring SvelteKit's Deployment Options: Server, Edge, and ISR
Build an AI application using Open AI, Vercel Edge Functions, and SvelteKit
มุมมอง 28Kปีที่แล้ว
Build an AI application using Open AI, Vercel Edge Functions, and SvelteKit
Beginner SvelteKit: Course Intro
มุมมอง 9K2 ปีที่แล้ว
Beginner SvelteKit: Course Intro
Beginner SvelteKit: Getting Started
มุมมอง 7K2 ปีที่แล้ว
Beginner SvelteKit: Getting Started
Beginner SvelteKit: Svelte's Reactivity
มุมมอง 4.7K2 ปีที่แล้ว
Beginner SvelteKit: Svelte's Reactivity
Beginner SvelteKit: Element Directives
มุมมอง 3.3K2 ปีที่แล้ว
Beginner SvelteKit: Element Directives
Beginner SvelteKit: Conditionals and Loops
มุมมอง 2.2K2 ปีที่แล้ว
Beginner SvelteKit: Conditionals and Loops
Beginner SvelteKit: CSS
มุมมอง 3.1K2 ปีที่แล้ว
Beginner SvelteKit: CSS
Beginner SvelteKit: Tailwind
มุมมอง 2.4K2 ปีที่แล้ว
Beginner SvelteKit: Tailwind
Beginner SvelteKit: Working With Components
มุมมอง 4.4K2 ปีที่แล้ว
Beginner SvelteKit: Working With Components
Beginner SvelteKit: Context API
มุมมอง 3.9K2 ปีที่แล้ว
Beginner SvelteKit: Context API
Beginner SvelteKit: Stores
มุมมอง 9K2 ปีที่แล้ว
Beginner SvelteKit: Stores
Beginner SvelteKit: Slots
มุมมอง 2.1K2 ปีที่แล้ว
Beginner SvelteKit: Slots
Beginner SvelteKit: Animations & Transitions
มุมมอง 4.3K2 ปีที่แล้ว
Beginner SvelteKit: Animations & Transitions
Beginner SvelteKit: Routing
มุมมอง 2.7K2 ปีที่แล้ว
Beginner SvelteKit: Routing

ความคิดเห็น

  • @jonasweinert1508
    @jonasweinert1508 5 วันที่ผ่านมา

    Amazing tutorial! Thanks a lot Stephie! Quick question: Is the message history always sent back and forth between the client and the server? So a db for storing it would only be needed if we wanted to enable coming back to the conversation at a later point?

  • @bigpunchline
    @bigpunchline 12 วันที่ผ่านมา

    Is it responsive or not? (Can someone tell me to watch this or not) is this left to right

  • @thomas-pgl
    @thomas-pgl 28 วันที่ผ่านมา

    clear and fast thank you !

  • @AustinSerb
    @AustinSerb หลายเดือนก่อน

    You literally didn’t optimize anything. And that was the title of the video.

  • @pie9994
    @pie9994 หลายเดือนก่อน

    Super useful, thanks a lot!

  • @limbubibas152
    @limbubibas152 หลายเดือนก่อน

    really appreciate :)

  • @AnupomRoy-is3pc
    @AnupomRoy-is3pc หลายเดือนก่อน

    so straight on point.. just awesome

  • @komiljonyormurodov3979
    @komiljonyormurodov3979 หลายเดือนก่อน

    how to add loader while the page is rerendering?

  • @AnkitSingh-ff6ew
    @AnkitSingh-ff6ew หลายเดือนก่อน

    When i pass filename and upload to vercel blob it add random string in postfix after uploading file to vercel blob storage.

    • @vanshaj2018
      @vanshaj2018 29 วันที่ผ่านมา

      here from the sonny sangha video huh? lol

  • @Gabriel-kl6bt
    @Gabriel-kl6bt 2 หลายเดือนก่อน

    It seems unnecessarily complicated now.

  • @manojgmanojg9600
    @manojgmanojg9600 2 หลายเดือนก่อน

    I got 404 error not found, how to solve this.

    • @RahmeenZafar-b8n
      @RahmeenZafar-b8n 4 วันที่ผ่านมา

      I also got 404 error can you please help how to resolve this error

  • @davidpelaez2370
    @davidpelaez2370 2 หลายเดือนก่อน

    Great video, concise and very clear information. Gran video, conciso y muy con información muy clara.

  • @acorn_zx
    @acorn_zx 2 หลายเดือนก่อน

    so for the 'red' no workaround?

  • @lucasbailo
    @lucasbailo 2 หลายเดือนก่อน

    It worked! Thanks a lot. Keep Up the great job!

  • @justaregularguy2390
    @justaregularguy2390 2 หลายเดือนก่อน

    just WOW!!

  • @fungames3716
    @fungames3716 3 หลายเดือนก่อน

    Detailed and easy to follow tutorial. Thanks a bunch

  • @yashchauhan5710
    @yashchauhan5710 3 หลายเดือนก่อน

    Cani wrap client component with suspense and that client components makes request.... Or is it only works wrapping with server component?

  • @noah_ayyubi
    @noah_ayyubi 3 หลายเดือนก่อน

    bruh do we change the fetches to the new url domain instead of loalhost3000, shawty gave the world vagues explaation and deployed a damn html file with out ans script or jss smh

  • @CsabaKissColorado
    @CsabaKissColorado 3 หลายเดือนก่อน

    Fantastic video. Thank you! This content was enough to get me going with my project.

  • @AB-kq9xm
    @AB-kq9xm 5 หลายเดือนก่อน

    Why is this better than just fetching the data, storing it in state and filtering it with the searchbar?

  • @atmmoreirarj
    @atmmoreirarj 5 หลายเดือนก่อน

    I'm receive 404, not found, when I run verce, dev. Anyone can help me, please.

    • @vilmarcabanero2500
      @vilmarcabanero2500 4 หลายเดือนก่อน

      Hi, probably you don't have vercel.json or if you have, the content is invalid.

  • @sorcerer2608
    @sorcerer2608 5 หลายเดือนก่อน

    worthless you must click again to errors disappear

  • @rob_mccormack
    @rob_mccormack 5 หลายเดือนก่อน

    Very well done! Thanks

  • @C.r.i.m.s.o.n
    @C.r.i.m.s.o.n 5 หลายเดือนก่อน

    Godsend vid

  • @emretrn
    @emretrn 5 หลายเดือนก่อน

    Great content; thanks, Stephie! I wonder How can we add filtering functionality?

  • @emmanueldjamba5887
    @emmanueldjamba5887 5 หลายเดือนก่อน

    i do not understand how the data props contain the database value

  • @MohammadAbrar-tx3fc
    @MohammadAbrar-tx3fc 5 หลายเดือนก่อน

    This channel is sooooooooooooooooo under rated 🥲🥲🥲🥲🥲🥲🥲🥲

  • @rezarst5734
    @rezarst5734 5 หลายเดือนก่อน

    So useful, Thanks

  • @charlesokorobo508
    @charlesokorobo508 6 หลายเดือนก่อน

    Hello Ma, This SvelteKit tutorial is so great. I followed it to create the skeleton of my Project. Now, when we wanted to start learning about Web Development, they said that we should have a Project in mind-- so that at the end of the learning process, we can have something to expend the gained skill on. In sync to that advice, I have chosen to build a Social Media Application like Facebook. There are many tutorials on Svelte and SvelteKit, and I as a beginner, has already learned Svelte and SvelteKit from those tutorials, including yours-- in which case I have started the journey of wanting to build my Social Media Application. Unfortunately for me, and many other Svelte lovers out there, most tutorials which have built a Facebook clone used mostly React or Next.Js -- while there's no tutorial in all of TH-cam that has created a Facebook clone using Svelte and SvelteKit. Would you be able to create a tutorial series on building a Facebook clone using Svelte and SvelteKit, with a Postgres Database, Drizzle ORM and Lucia Authentication? Regards.

  • @kaungkhantkyaw4020
    @kaungkhantkyaw4020 6 หลายเดือนก่อน

    Explaining to deploy api in 3 minutes and Damn it's too simple af 😭

  • @eng3d
    @eng3d 6 หลายเดือนก่อน

    :-( no update in 2 years.

    • @LuLeBe
      @LuLeBe 3 หลายเดือนก่อน

      What exactly needs to be updated there? It's a tiny reactivity library for when you you have a mostly static site but suddenly need something interactive that's too much to just handwire the databinds in JS. Unless it has bugs, I don't see why it needs updates.

  • @moroccan_pentester
    @moroccan_pentester 6 หลายเดือนก่อน

    thank you for this amazing tutorial

  • @zeeeeeman
    @zeeeeeman 6 หลายเดือนก่อน

    I see "use client" and I try and find another video. Why can't we just send an error back to the page like use to do 20 years ago.

  • @davidlintin
    @davidlintin 6 หลายเดือนก่อน

    Perfect tutorial. Looking to use this in my project. But I have additional filters so will probably require a search button instead of live updating.

  • @ezevalentine7610
    @ezevalentine7610 6 หลายเดือนก่อน

    Great service from Vercel, butI dont know how stable this is, tried it out and then there is a build error.

  • @ElhamIzanloo-r4y
    @ElhamIzanloo-r4y 6 หลายเดือนก่อน

    Hey! awesome. i cant use {searchParams}:{searchParams?:{ query?: stringify; page?:stringify; }} could you please give me your Doc?

  • @ejazalam6512
    @ejazalam6512 6 หลายเดือนก่อน

    Just started to learn SvelteKit with you. Hope I will understand many things with you until the end of this playlist...!!

  • @StephanSenkyireDuah
    @StephanSenkyireDuah 6 หลายเดือนก่อน

    Very good video..Thank you very much

  • @kennysus6174
    @kennysus6174 6 หลายเดือนก่อน

    Hey whenever i host any website on vercel, the css just doesnt not load. all of the other things work fine...

  • @veljkomaksimovic
    @veljkomaksimovic 7 หลายเดือนก่อน

    Great tutorial. Exactly what I was looking for!

  • @abdelhakimkhabir
    @abdelhakimkhabir 7 หลายเดือนก่อน

    Do fetching using sql function get cached for later requests??????

  • @iaintheardofu
    @iaintheardofu 7 หลายเดือนก่อน

    Hello! Thank you for what you do!!! Awesome!! GitHub repo link???😢

  • @przemek_woźniak
    @przemek_woźniak 7 หลายเดือนก่อน

    :) dzięki wielkie :) dopiero znalazłem Twój kanał i na pewno ponaoglądam się tu sporo :) pozdrawiam

  • @tecdockerz
    @tecdockerz 7 หลายเดือนก่อน

    WOW !!! to the point showed the professional production-ready example. better than a long tutorial ends up in no way.

  • @0xtz_
    @0xtz_ 7 หลายเดือนก่อน

    if the book display etc is all RSC how can i know that its loading hmmm 🤔 bc for ex in my app the displays are ssr and when i search i use nuqs and it rerenders the component and i get flash after the rendering... is done and idk how to make a loading or something

  • @2u841r
    @2u841r 7 หลายเดือนก่อน

    1:02 I need Svelte Foundation, not Solid's 😀 (JK, I love Svelte)

  • @peterokwara
    @peterokwara 7 หลายเดือนก่อน

    How to streamObject with the ai sdk if it's even possible with svelte kit

  • @gfddgitgud3848
    @gfddgitgud3848 7 หลายเดือนก่อน

    Thank you1!

  • @d4yno
    @d4yno 8 หลายเดือนก่อน

    thanks for the quick tutorial

  • @didyoustealmyfood8729
    @didyoustealmyfood8729 8 หลายเดือนก่อน

    wow so empty