- 11
- 67 300
Taylor Lindores-Reeves
United Kingdom
Приєднався 4 гру 2022
Welcome to the world of modern web development! My channel is your one-stop destination for mastering cutting-edge web technologies. I am here to simplify complex concepts, share best practices, and help you build future-ready digital applications.
With a deep focus on practical, project-based learning, we provide step-by-step tutorials, insightful tips, and comprehensive guides that cater to both beginners and advanced web developers. Each video is designed to enhance your understanding of core development principles and push your coding skills to new heights.
Whether you want to harness the power of TypeScript's strong-typing, explore the power of Next.js, or dive into other essential web development tools, we have got you covered. Beyond just teaching you how to code, we're committed to helping you understand what it takes to create scalable, high-performance web applications
Subscribe now to join a community of passionate developers and let's start coding the future!
With a deep focus on practical, project-based learning, we provide step-by-step tutorials, insightful tips, and comprehensive guides that cater to both beginners and advanced web developers. Each video is designed to enhance your understanding of core development principles and push your coding skills to new heights.
Whether you want to harness the power of TypeScript's strong-typing, explore the power of Next.js, or dive into other essential web development tools, we have got you covered. Beyond just teaching you how to code, we're committed to helping you understand what it takes to create scalable, high-performance web applications
Subscribe now to join a community of passionate developers and let's start coding the future!
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
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
Переглядів: 14 003
Відео
NextAuth v5 for Beginners: Simple Server-Side Auth in NextJS
Переглядів 1,5 тис.7 місяців тому
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
Переглядів 8348 місяців тому
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
Переглядів 2,4 тис.11 місяців тому
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)
Переглядів 3,2 тис.Рік тому
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
Переглядів 14 тис.Рік тому
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)
Переглядів 1,7 тис.Рік тому
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
Переглядів 16 тис.Рік тому
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
Переглядів 13 тис.Рік тому
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)
Переглядів 704Рік тому
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...