🔴 React.js Clones by PAPA React - 🔴 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-build-opt-in-form 🚨 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