1️⃣ Get Started with Clerk Authentication 👉 [ Ссылка ]
2️⃣ Sign up with IBM API Connect Essentials for free 👉 [ Ссылка ]
3️⃣ Setup your Neon PostgreSQL database for free 👉 [ Ссылка ]

❗️Get the SQL Seed File for free 👉 [ Ссылка ]

🚨 Join the world’s BEST developer community & course Zero to Full Stack Hero: [ Ссылка ]

🛠️ Looking for the Code for this build? (Plus over 50+ others!)
[ Ссылка ]

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 👉 [ Ссылка ]

🕐 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

свернуть