Taylor Lindores-Reeves
Taylor Lindores-Reeves
  • 11
  • 49 185
Ultimate Guide: Function Calling with Vercel’s AI SDK RSC & NextJS 14
Join me in this comprehensive tutorial where I guide you through building a powerful crypto chatbot and stats interface with NextJS using Vercel’s AI SDK RSC package. This allows you to stream generative user interfaces to the browser using React Server Components & Server Actions.
I guide you through everything from setting up your environment, installing and configuring tools like TypeScript and Tailwind, and implementing code formatting with BiomeJS. You’ll learn how to handle API keys, manage environment variables, and stream various UI components for a truly unique user experience.
We incorporate tool calling in our AI integration which gives the LLM the ability to decide when and how to call custom functions based on certain conditions, inputs, or data. We then fetch real-time data using Binance and CoinMarketCap APIs to show cryptocurrency prices and stats. We also explore handling data formatting, loading states with skeleton components, and troubleshooting common errors.
This is perfect for developers looking to sharpen their skills in full stack AI development by leveraging awesome tools created by Vercel, NextJS and V0.dev.
Read this article to understand why I think these some of the coolest tools in web development currently: sdk.vercel.ai/docs/ai-sdk-rsc/generative-ui
🔑 Key Resources:
Vercel AI SDK RSC: sdk.vercel.ai/docs/ai-sdk-rsc/overview
V0.dev: v0.dev/
NextJS App Router: nextjs.org/docs/app
Create Next App: nextjs.org/docs/app/api-reference/create-next-app
BiomeJS: biomejs.dev/
Bun JS Runtime: bun.sh/
OpenAI API: platform.openai.com/
👨🏻‍💻 Source Code: github.com/taylor-lindores-reeves/ai-rsc
📖 Chapters:
00:00 Introduction to AI SDK React Server Components
01:04 Demonstration: Cryptocurrency Price Queries
03:20 Setting Up the Development Environment
05:11 Installing and Configuring BiomeJS
06:17 Integrating ShadCN UI Components
09:31 Setting Up Environment Variables
19:57 Building the Chat Interface
38:36 Creating Custom Hooks for Chat Functionality
47:04 Implementing Form Handling with React Hook Form
51:50 Styling the Chat Component
01:04:31 Handling User Messages and Responses
01:24:39 Setting Up the OpenAI Model
01:26:10 Configuring Initial Bot State
01:27:21 Handling LLM Responses
01:28:55 Implementing Tool Functions
01:33:45 Creating Generator Functions
01:42:33 Fetching Cryptocurrency Data
01:48:48 Building the UI Components
01:52:15 Integrating API Keys
01:54:39 Debugging and Testing
02:14:45 Finalising the Project
02:38:26 Conclusion and Feedback
zhlédnutí: 7 847

Video

NextAuth v5 for Beginners: Simple Server-Side Auth in NextJS
zhlédnutí 788Před měsícem
In this video, learn how to set up AuthJS v5 beta for authentication on the server in NextJS 14. This tutorial covers configuring sign-in and sign-out processes, email-only authentication with sessions, and setting up NextAuth to handle everything on the server. We'll use a database for session management, and explore essential configurations, Prisma ORM integration, and securing pages and API ...
The Easiest Way to Generate Clean NextJS API Documentation
zhlédnutí 139Před 2 měsíci
First of all, sorry for the audio quality... This beginner-friendly tutorial guides you through the process of building a Todo List app using NextJS API Routes with the Next REST Framework package, which automatically generates clean API documentation for each API request. Throughout the video, you'll gain hands-on experience as we code the app's functionality including create, read, update, an...
Mastering Fetch API and Caching in NextJS
zhlédnutí 1,6KPřed 5 měsíci
In this video, I guide you through a useful approach to managing the Fetch API and caching in NextJS. I demonstrate how the Fetch API by default caches data, which can be beneficial for reducing server resource load, but may also present obstacles when trying to display real-time data updates. I reveal a workaround that involves setting the cache on a global level, which allows for setting cach...
How to Build an AI Assistant using NextJS (Vercel)
zhlédnutí 2,7KPřed 7 měsíci
Throughout this in-depth tutorial, we’ll learn how to build a research paper summariser using OpenAI's Assistants API. The summariser takes in a document as form data and returns a summary of the document as the response. I will walk you through handling file data, form submissions, and responses from the API. We’ll also learn some of the limitations of the current version of the API. If you ar...
NextJS Server-Side Product Modals using URL, Suspense & Fetch
zhlédnutí 12KPřed 8 měsíci
Discover how to set up pop-up modals on the server! In this tutorial, learn how to build modals that are fully server-side rendered using Next.js. The video guide walks through how to create a product page by fetching data from a public API, manipulating URL state and using React Suspense for handling loading states. Attention is also given to building a loading UI and demonstrating a convenien...
New React Hooks with NextJS Server Actions (2024)
zhlédnutí 1,6KPřed 8 měsíci
Dive into my latest tutorial on the experimental useFormStatus and useFormState hooks! Discover how to enhance your web applications with server-side capabilities, enabling features like comment systems. This comprehensive guide walks you through the installation of these new hooks and demonstrates their potential with a practical example. I tackle the nuances of creating a comment system, show...
Database Session Authentication with Prisma & NextJS App Directory
zhlédnutí 11KPřed 9 měsíci
In-depth tutorial on Next-Auth login authentication - you will learn how to protect your pages with authentication using advanced strategies like NextAuth database sessions and Prisma client extensions. Plus, passwordless login for a seamless user experience! 🔥 🔑 Key Takeaways 1. How to set up NextJS app in 2 minutes 2. How to set up a new database and Prisma query layer 3. How to set up NextAu...
Server-side Pagination with NextJS 13 Server Actions
zhlédnutí 10KPřed 9 měsíci
Welcome to this in-depth tutorial on setting up SEO-optimised, server-side rendered pagination in Next.js 13.5 using Prisma ORM as the database querying layer. If you're looking to create a listing page or e-commerce shop, this guide is tailored for you. Pagination helps search engines understand your site structure and ensures all your pages are crawled and indexed, which is particularly impor...
NextJS 14 Image Optimisation using Imgix (2024)
zhlédnutí 541Před rokem
In this comprehensive tutorial, we'll dive deep into the world of image loading by leveraging NextJS's Image component, Imgix, and AWS S3. You'll learn how to create an Imgix Source, set up an S3 bucket, and create an IAM user with the necessary permissions and access keys. You'll also learn how to beautifully integrate these elements using NextJS's Image component with the loader prop and load...

Komentáře

  • @sohambhikadiya3346
    @sohambhikadiya3346 Před 17 hodinami

    I like this speedy tutorial, also it's good as you haven't mentioned the word 'beginner' But I am not sure why people is expecting it to be beginner friendly Also no worries, I could easily read the code :)

  • @user-zu3vr8vq3l
    @user-zu3vr8vq3l Před dnem

    Where can I get the callback url after submitting an email?

  • @gamescope2607
    @gamescope2607 Před 3 dny

    Fantastic video! I really appreciate it. Thanks a lot!

  • @ab_naved1362
    @ab_naved1362 Před 6 dny

    Using this tutorial i convert this code into recipe finder bot ?? What I can change?

  • @user-al1oc4845l
    @user-al1oc4845l Před 12 dny

    Korean windows 11 cannot run bunx it seems endcoing problem. please use npm when you teach tutorial..

  • @sivasirigiri6616
    @sivasirigiri6616 Před 14 dny

    Hey can you please make a same video using trpc or t3 stack

  • @zak10x
    @zak10x Před 22 dny

    Hey, I really like your UI settings. If you can make a video on them or share the json code, that would be amazing!

  • @trndsettrlabs
    @trndsettrlabs Před 23 dny

    What vscode theme are you using?

  • @srenhyer3895
    @srenhyer3895 Před 24 dny

    Few more questions. After implementing it this way I noticed that my page in the background did a rerender when the searchParams changed, even if I did router.replace instead of pushing the params. Also I wonder what are the pros of doing it this way (besides the js bundle size difference of a single client/server component), instead of just toggling the modal with a provider and passing in the server components by prop? I'd assume a modal would be the ideal usecase for keeping the modal a client component and passing in the server components? I'm asking because I'm not entirely sure.

    • @taylorlindoresreeves
      @taylorlindoresreeves Před 24 dny

      You could try using window.history.replaceState as this replaces the URL without browser refresh. The main benefit I think is SEO - pretty sure the search engines can pick up the URLs for each product modal when they're server rendered, but not with client components because it uses JavaScript to render the modal.

    • @srenhyer3895
      @srenhyer3895 Před 24 dny

      @@taylorlindoresreeves Thanks. Doesn't seem like you can "wait" executing/fetching from a server component child component until the parent modal client component is opened. It seem as if the modal is a client component, and ServerComponentThatFetches is passed as child/prop it starts fetching its data immediately and does not wait for the modal to show its content. So server modals might be our only option if we have serer components inside the modal that needs to fetch some data upon display.

  • @srenhyer3895
    @srenhyer3895 Před 25 dny

    Around thee 4.10 mark you mention that it's a bit of a technical challenge but definitely still doable to implement server side modals for global modals, but I'm curious how you'd do that let's say for a modal you trigger from clicking a button/icon in a global header, since you have no way of knowing whether search params changed from the root layout? :-)

    • @taylorlindoresreeves
      @taylorlindoresreeves Před 25 dny

      You can achieve this using middleware to capture the search parameters, storing them in a cookie. This same cookie can then be accessed in the layout at load time and during server‑side rendering.

    • @srenhyer3895
      @srenhyer3895 Před 23 dny

      @@taylorlindoresreeves don't you mean setting them in a header and not a cookie? Just like you do for the pathname? That will opt all routes into dynamic rendering, but that might be acceptable.

  • @riponsoum
    @riponsoum Před 25 dny

    github link not working

  • @GuriLudhiana
    @GuriLudhiana Před 25 dny

    knowledgeable

  • @nasko235679
    @nasko235679 Před 27 dny

    There's 0 documentation on credentials provider + database session. When I asked the creator of AuthJS he told me there never will be because he doesn't like it and I should just use JWT. You seem well versed in what is undoubtedly the worst documented auth library in the world lol, so it would be extremely helpful if you could make a video about credentials + database session setup. It's really hard for me to understand as a newer developer since it's all abstracted away and I don't know how to implement the session logic.

    • @taylorlindoresreeves
      @taylorlindoresreeves Před 27 dny

      Yeah, I've set up credentials across multiple projects so I certainly will create a video on that. It requires a few workarounds because as you said, the author doesn't want you to use credentials and it's obvious when trying to configure it, you have to implement a few hacks. Video will come soon. Thanks!

    • @nasko235679
      @nasko235679 Před 26 dny

      @@taylorlindoresreeves No man, THANK YOU! Coming from Laravel where everything is batteries included, setting up an actually useable nextJS environment with authentication is tough. So far I've had great success using lucia auth for database sessions + credentials, but I'd like to learn how to do the same in authJS.

  • @varunmehra5
    @varunmehra5 Před 27 dny

    Love this kinda content which is so natural that you didnt even bother editing the part where you missed importing Zod. Inspired me haha to not take my mistakes very seriously and get discouraged as a beginner

    • @taylorlindoresreeves
      @taylorlindoresreeves Před 27 dny

      Absolutely 👍 I make mistakes all the time 😅 it's part of being a programmer! Enjoy the journey 👨‍💻

  • @NitroBrewbell
    @NitroBrewbell Před 27 dny

    Great Tutorial Taylor ! Thank you. Hope you continue with more guides. Has anyone run into bun issue halfway through with error message: "ReferenceError: Can't find variable: TextDecoderStream" ? with with streamUI() function in actions file . It seems to work on Node but not on Bun. The workaround seemed complicated to me on Bun

    • @taylorlindoresreeves
      @taylorlindoresreeves Před 27 dny

      Thanks, no I haven't unfortunately. Hopefully someone else knows about this issue 🤔

  • @kyujong93
    @kyujong93 Před měsícem

    You have an apple keyboard :

  • @prashlovessamosa
    @prashlovessamosa Před měsícem

    Wow thanks very helpful

  • @prashlovessamosa
    @prashlovessamosa Před měsícem

    Great thanks for sharing

  • @tastefulthickness
    @tastefulthickness Před měsícem

    To the moon 🤘H

  • @leo-phiponacci
    @leo-phiponacci Před měsícem

    Thank you, great video! Can you please do a video about Credentials Provider with database sessions?

  • @StephenRayner
    @StephenRayner Před měsícem

    Thumb down, too slow. Might be right for some junior devs. But for me this is so slow, watching you install packages and remove icons 😮😢.

    • @taylorlindoresreeves
      @taylorlindoresreeves Před měsícem

      Yeah man, I felt feedback on my previous videos was I was too fast, not running through each step of the code. But I guess I could try a balance. Try on 2x 👍

  • @gamingwolf3385
    @gamingwolf3385 Před měsícem

    Thank you for the video . Keep going bro !

  • @codewitheric8800
    @codewitheric8800 Před měsícem

    great tutorial💯...is it possible to do a recursive function call with this? for instance it calls the get_crypto_price function and then uses the result to call a different function? thanks for the content

    • @taylorlindoresreeves
      @taylorlindoresreeves Před měsícem

      Hmm you might be able to do it by updating the AI state with another system message that asks the LLM to run another function. What’s the use case out of curiosity?

  • @salieflewis
    @salieflewis Před měsícem

    My understanding was Next.js does optimization inherently within its Image component, is Imgix more effective at compression?

    • @taylorlindoresreeves
      @taylorlindoresreeves Před měsícem

      For sure, NextJS does indeed do some optimisation. But with the loader prop for the image component you get the benefit of handing off your images to an external source such as S3 bucket, which is always beneficial in terms of performance. But with Imgix as an additional caching and compression layer, you get fine grained control of your images, all while having them stored in an external source. Technically you could store 20mb images and not have to worry about how to handle compression and optimisation in the business logic or frontend layer image component (I think NextJS uses Sharp). You simply use the imgix URL and provide it with format and compress query parameters.

    • @salieflewis
      @salieflewis Před měsícem

      @@taylorlindoresreeves That makes sense! Do you know if there is a similar workflow that can be used alongside Expo’s Image component?

    • @taylorlindoresreeves
      @taylorlindoresreeves Před měsícem

      @@salieflewis hmm I’m not sure honestly, I don’t have experience with Expo. Good luck 🤞

  • @karamguliyev7803
    @karamguliyev7803 Před měsícem

    Hey, I have noticed your code shows source in every paragraph. But I couldn’t understand how you managed to do that. Would you explain it to me or tell me when did you code that part?

  • @fixesdev
    @fixesdev Před měsícem

    Excellent video! keep em coming, cheers

  • @raunakbhanarkar1350
    @raunakbhanarkar1350 Před měsícem

    Beautiful Content🔥🔥 Deserve a lot more subs❤❤

  • @helciofranco6134
    @helciofranco6134 Před měsícem

    Is this cache for a specific user-session or shared between every user? I'd like to understand if another user have accessed your site if he would trigger a new request or not

    • @taylorlindoresreeves
      @taylorlindoresreeves Před měsícem

      For a REST API it’s cached globally for all users. However, if using a server action, fetch requests are not cached.

  • @ShaneCrenshaw
    @ShaneCrenshaw Před měsícem

    Do you have an updated version by any chance for Vercel's latest versions?

    • @taylorlindoresreeves
      @taylorlindoresreeves Před měsícem

      Yeah I do, I’m just re-publishing. I forgot to add the intro to the final edit. Will be released in 1-2 hours. I think it’s the best video I’ve done. Hope you like it.

  • @snbwcs
    @snbwcs Před měsícem

    Thank you, this is great content ! ;)

  • @megabanzaj
    @megabanzaj Před 2 měsíci

    thanks for tuto. No offence, hovewer some code looks overwhelmed. For example this: const currentPage = Math.min(Math.max(Number(page), 1), totalPages); Why can not you just use "page" variable instead, why you doing those calculations (I know that it's edge case handling)? Would be nice if you would explain those parts in your videos as well because it is not obvious at the first look. Now the biggest part of your video you just copy pasting some code that makes me feel that you just reusing someone else solution. It just my thoughts that maybe can improve your content :)

    • @taylorlindoresreeves
      @taylorlindoresreeves Před měsícem

      No worries. I am definitely going to spend more time in future videos explaining things a bit better (I am new to this). With regards to the copy pasting, I will try to do more coding on the fly - it just takes significantly longer so my concern is that people will get bored watching me code easy frontend stuff. Thanks for the feedback.

  • @destinygames3449
    @destinygames3449 Před 2 měsíci

    This server sided thingy is out of hand. What next ,server sided client browser

  • @nicolaspavon664
    @nicolaspavon664 Před 2 měsíci

    Hi! is there a way to switch assistants?

    • @taylorlindoresreeves
      @taylorlindoresreeves Před 2 měsíci

      You basically create the assistant. The assistants API has been updated significantly since I made this video. I will make another on the latest version (v2) and function calling.

  • @cidhighwind8590
    @cidhighwind8590 Před 3 měsíci

    You skipped over the entire coding of the pagination component...

    • @taylorlindoresreeves
      @taylorlindoresreeves Před měsícem

      Yeah I actually just re-used a component from v0.dev as it was quicker option. I am getting a lot of feedback to say I should stop re-using and just code the damn things, so I will take this on board and hopefully improve in future vids. Thanks for the feedback.

  • @jasondamico_webdev
    @jasondamico_webdev Před 3 měsíci

    Bro. I appreciate your knowledge, but read the room. How do you expect people to follow what you are doing when you are not only making fast cuts, but completely skipping entire code creations steps that are vital to finish the project. You also never acknowledged when you made mistakes and did not show your changes to the code when you did. Constructive criticism: SLOOOOWWWWW DOOWWWWWWNNNNN. Make part 1 and part 2 if you need to. :)

    • @taylorlindoresreeves
      @taylorlindoresreeves Před měsícem

      Good point, thanks for the feedback. I am going to do more on-the-fly coding and fixing - my concern is it bores people watching me debug, which is why I try and do things quickly. But a lot of feedback I am reading just now is similar to this, so I will do more full-length, less edited videos where I go through the whole process and don't re-use any code or components.

  • @ufuomaonecha9815
    @ufuomaonecha9815 Před 3 měsíci

    cool.. explantion

  • @JeswinJ-ey8kh
    @JeswinJ-ey8kh Před 3 měsíci

    lets say you deploy this app in production will you able to crawl all the single detail pages???if yes means is this the way to make it to crawl

  • @kekoa392
    @kekoa392 Před 3 měsíci

    good news

  • @romanmed9035
    @romanmed9035 Před 3 měsíci

    why without redux? it help my for pagination

  • @user-ck6yl6qb2g
    @user-ck6yl6qb2g Před 4 měsíci

    bad tutorial. I found it hard to follow you, it was unclear and unstructured

  • @achaabni
    @achaabni Před 4 měsíci

    All the bullshit to sell Prisma to the developers

  • @huseyinlora
    @huseyinlora Před 4 měsíci

    BROOOO ZOOOM ON THIS FKN EDITORR WE CANNOT SEE ANYTHING

  • @rabihdaoud8629
    @rabihdaoud8629 Před 4 měsíci

    Amazing tutorial. Can you do one with function calling??

    • @taylorlindoresreeves
      @taylorlindoresreeves Před 2 měsíci

      Absolutely, great idea, I've noted it down - lots of developments in the function calling API recently so it's a good time to do a tutorial. I will create this in the coming weeks. Please subscribe if you haven't already to make sure you're notified.

    • @taylorlindoresreeves
      @taylorlindoresreeves Před měsícem

      Just released this tutorial - check my latest vid 👀Hope you like it!

  • @benjaoliva3383
    @benjaoliva3383 Před 4 měsíci

    This is a very good video, straight to the point and nice quality code writing 👏

  • @user-vm6py5gf8m
    @user-vm6py5gf8m Před 4 měsíci

    Thank You.Can I ask about how it would function for different users accessing server at different time.Does it revalidate at a set interval of say 60 secs or 60 secs elapsed after the user accessed the server Thank you for your explanation💥

    • @taylorlindoresreeves
      @taylorlindoresreeves Před 2 měsíci

      I think it revalidates for each specific user. It's not global in that sense.

  • @davidhendriksen
    @davidhendriksen Před 5 měsíci

    Excellent! I see you're using Prisma. How do you typically handle the CMS part in your app? For instance, if admins wish to upload images for the e-commerce shop, would you integrate the CMS into your Next.js application, or opt for a separate backend?

  • @user-vr7gx8po5x
    @user-vr7gx8po5x Před 5 měsíci

    Please increase font size , You are doing awesome but 😢

  • @dailywisdomquotes518
    @dailywisdomquotes518 Před 5 měsíci

    the code not running, just i wasted some time

  • @dailywisdomquotes518
    @dailywisdomquotes518 Před 5 měsíci

    could you add function calling for above code

  • @lucascp021
    @lucascp021 Před 5 měsíci

    very useful video, keep up the great work