Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Next.js AI Chatbot using ChatGPT and Gemini AI
Rating: 4.6 out of 5(13 ratings)
132 students

Next.js AI Chatbot using ChatGPT and Gemini AI

Build a real-time AI Chatbot using Vercel AI SDK with two AI models support (OpenAI , GeminiAI)
Last updated 6/2024
English

What you'll learn

  • Nextjs 14 latest features
  • Introduction to Vercel AI SDK and Advantages
  • Building AI Chatbot using Vercel AI SDK with two top AI Models (OpenAI , GeminiAI)
  • Learn how to send the prompts to AI and how to show the AI streamed response on UI
  • Learn how to save all users chats to database , so even after the page refresh they can view all the previous chats with AI

Course content

10 sections32 lectures4h 35m total length
  • Create next app6:51

Requirements

  • React JS Basics
  • Next JS Basics

Description

Welcome to the "Next.js AI Chatbot" course! In this project-based course, you will learn how to build a powerful AI chatbot application using the latest features of Next.js 14 and the Vercel AI SDK.

Course Curriculum

Introduction to Next.js 14 and Vercel AI SDK

  • Overview of Next.js 14 and its latest features

  • Introduction to Vercel AI SDK and its advantages

  • Setting up the development environment

Building the User Interface

  • Implementing user authentication and authorization using Clerk

  • Designing the UI using Tailwind CSS

  • Creating reusable components for the chatbot interface

Integrating AI Models

  • Connecting to OpenAI and GeminiAI models using Vercel AI SDK

  • Configuring API keys and environment variables

Implementing Chatbot Functionality

  • Handling user input and generating prompts for AI models

  • Streaming AI responses to the UI in real-time

  • Displaying AI responses with proper formatting

Copy and Share AI Responses

  • Copy AI responses to the clipboard and use wherever it requires

  • Share AI response to different social platforms like whatsapp , gmail , instagram , facebook , linkedin etc.

  • Displaying AI responses with proper formatting

Persisting Chat History

  • Saving user chats to a database

  • Retrieving and displaying previous chat history

  • Allowing users to resume conversations based on past messages

Enhancing User Experience

  • Implementing features for selecting and resuming past chats

  • Providing a seamless and intuitive user interface

Deployment and QA

  • Deploying the application to Vercel

  • Performing thorough testing and quality assurance

  • Providing complete source code access to students

By the end of this course, you will have built a fully functional AI chatbot application using Next.js 14, Vercel AI SDK, and popular AI models. You will learn how to integrate user authentication, design an attractive UI, handle AI responses, and save chat history for a better user experience. The course will also cover deployment and provide access to the complete source code for future reference and learning.

Who this course is for:

  • Students who want to build real-time projects using their technical skills