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...
🔑 Key Resources:
Vercel AI SDK RSC: sdk.vercel.ai/docs/ai-sdk-rsc...
V0.dev: v0.dev/
NextJS App Router: nextjs.org/docs/app
Create Next App: nextjs.org/docs/app/api-refer...
BiomeJS: biomejs.dev/
Bun JS Runtime: bun.sh/
OpenAI API: platform.openai.com/
👨🏻‍💻 Source Code: github.com/taylor-lindores-re...
📖 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

[@varunmehra5]

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]

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

[@zak10x]

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

[@raunakbhanarkar1350]

Beautiful Content🔥🔥 Deserve a lot more subs❤❤

[@taylorlindoresreeves]

Thank you, appreciate the comment!

[@prashlovessamosa]

Great thanks for sharing

[@taylorlindoresreeves]

No worries, hope you enjoyed it

[@NitroBrewbell]

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]

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

[@GuriLudhiana]

knowledgeable

[@taylorlindoresreeves]

Thanks, hope you gained something from my content

[@codewitheric8800]

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]

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?

[@trndsettrlabs]

What vscode theme are you using?

[@taylorlindoresreeves]

Hey it's called Dracula Pro 👍

[@riponsoum]

github link not working

[@taylorlindoresreeves]

My bad, it was the incorrect link. Have updated it now!

[@kyujong93]

You have an apple keyboard :

[@taylorlindoresreeves]

Good call! 👍

[@StephenRayner]

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]

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 👍