🔴 Let’s build an AI Help Bot with NEXT.JS 14! (Neon PostgreSQL, Clerk, AI Agent, OpenAI, IBM)
1️⃣ Get Started with Clerk Authentication 👉 https://go.clerk.com/2TtD63C
2️⃣ Sign up with IBM API Connect Essentials for free 👉 https://ibm.biz/BdKBmQ
3️⃣ Setup your Neon PostgreSQL database for free 👉 https://fyi.neon.tech/sonny
❗️Get the SQL Seed File for free 👉 https://www.papareact.com/intercom-bu...
🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: https://www.papareact.com/course
🛠️ Looking for the Code for this build? (Plus over 50+ others!)
https://links.papareact.com/github
Join me as I show you how to build an Intercom Clone AI App from scratch with the latest Next.js 14. You'll learn the following in this build:
👉 Ability to chat to the AI Agent in a Real-time 1 - 1 Chat which uses the OpenAI Completions API to respond to user queries!
👉 Ability to store Admin Details & Prompts in a PostgreSQL DB provided by Neon!
👉 How to implement StepZen to introspect the PostgreSQL DB & generate a GraphQL API for efficient data querying and manipulation!
👉 How to use Clerk Authentication to add Google User Authentication with ease!
👉 Ability to Create New Chatbots with a unique link that allows anyone to chat with the chatbot to assist them with their queries!
👉 How to implement an Admin Dashboard to create new chatbots, edit prompts, and view all previous chat histories.
👉 How to utilise the power of caching in Next.js to create an optimal & efficient user experience!
👉 How to use Next.js Server Components & Client Components and when/where to use them!
👉 How to utilise the power of Server Actions & caching in Next.js to create an optimal & efficient user experience!
👉 How to use Next.js 14 Server Components & Client Components and when/where to use them!
👉 Create a Beautiful UI & UX for our Frontend using the highly Popular Shadcn & Tailwind CSS
👉 How to use TypeScript to reduce the overall number of Bugs and Errors
👉 How to deploy the final build on Vercel
🎵 WANT TO LISTEN TO THE EXCLUSIVE PAPAFAM PLAYLIST?
Sign up for the PAPAFAM Newsletter here 👉 https://links.papareact.com/newsletter
🕐 TIMESTAMPS:
00:00 Introduction
01:05 Build Demo
08:50 Build Tech & Explanation
20:05 Initialising the Build
24:05 Setting Up Clerk
30:06 Building the Admin & Guest Section
34:46 Building the Header Component (1/2)
37:26 Building the Avatar Component
39:49 Building the Header Component (2/2)
48:42 Building the Sidebar Component
52:17 Implementing Shadcn/ui
56:28 Building the Create Chatbot Page (1/2)
1:02:35 Setting Up a PostgreSQL DB in Neon
1:08:59 Setting Up IBM API Connect Essentials
1:12:09 Introspecting the PostgreSQL DB with IBM API Connect Essentials (StepZen)
1:22:36 Implementing the Apollo Client
1:24:49 Implementing a Proxy API End Point
1:29:39 Building the GraphQL Backend
1:41:14 Implementing Queries & Mutations
1:42:57 Building the Create Chatbot Page (2/2)
1:47:46 Live Debugging
1:57:10 Building the Edit Chatbot Page (1/3)
2:06:57 Implementing Toast Notifications with Shadcn Sonner
2:08:11 Building the Edit Chatbot Page (2/3)
2:17:20 Building the Characteristic Section of the Chatbot
2:29:06 Building the Edit Chatbot Page (3/3)
2:41:42 Building the View Chatbot Section
2:55:48 Building the Review Sessions Page (1/2)
3:00:38 Building the Chat Bot Sessions Component
3:10:26 Building the Review Sessions Page (2/2)
3:13:58 Creating the Messages Component
3:14:54 Implementing DaisyUI
3:16:49 Building the Messages Component
3:29:26 Building the Login Page
3:36:27 Building the Home Page
3:38:40 Building the Chatbot Page (1/3)
3:48:09 Implementing the New Chat Functionality
3:54:10 Building the Chatbot Page (2/3)
3:59:49 Implementing a Form with Zod & React-Hook-Form
4:06:45 Building the Chatbot Page (3/3)
4:11:28 Implementing OpenAI Completions API
4:24:38 Deploying to Vercel
4:32:39 Tips to Fix CORS Error
4:33:25 Final Deployed Build Demo
4:36:36 Build Summary
4:38:45 Outro
Let’s get it PAPAFAM 🔥.
DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Intercom and/or any of its subsidiaries in any form. Copyright Disclaimer Under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for educational purposes.
#nextjs #nextjs15 #IBM #ai #chatgpt #neon #Clerk #postgres #stepzen #shadcn #tailwindcss #reactjstutorial #coding #openai #intercom #programming #aiagents #story #javascript
Смотрите видео 🔴 Let’s build an AI Help Bot with NEXT.JS 14! (Neon PostgreSQL, Clerk, AI Agent, OpenAI, IBM) онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Sonny Sangha 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 25,160 раз и оно понравилось 814 людям.