Next.js AI Chatbot using ChatGPT and Gemini AI

Learn to implement authentication in a Next.js app using Clerk, creating accounts, setting up a project, and wiring middleware and provider for secure sign-in and sign-up flows.

Create and render custom sign-in and sign-up pages in a Next.js app with Clerk, configure routes via environment variables, and verify name, email, and password registration with email verification.

Learn how to display the logged-in user details on the home page using Clerk's user button component, including viewing name and email, updating details, and signing out.

Display the logged-in user's name, email, and Clerk user ID on the home page by using the Clerk current user function in a Next.js server component, with optional user image.

Style the sign-in and sign-up pages by centering the card, removing shadows, and adding borders with Montserrat font, aligning with the deployed version and social login settings.

Connect Next.js to MongoDB using mongoose by creating a config/database.ts with a connect MongoDB function that reads the database URL from environment variables and handles errors.

Store registered user details in the MongoDB users collection to preserve data when switching authentication providers, ensuring name, email, and clerk user id are retrievable from MongoDB after registration.

Build a MongoDB user model with mongoose and implement a save current user server action that checks for existing users by clerk user id, creating or returning the user.

Create a custom layout to wrap all pages and save the logged in user details in a global store using a state management tool, enabling data sharing across components.

Display success and error messages with a toast message component and show a loading spinner during API processing, using a single UI library for both features.

Create a home page skeleton with a fixed-width sidebar and a responsive chart area. Use a mobile hamburger to toggle a drawer and apply tailwind styling.

In the Next.js AI Chatbot course, hide the sidebar on mobile, trigger a left drawer with a hamburger menu, and wire open/close state with white icons.

Vercel AI SDK is an npm library to build AI artboards in Next.js and React.js by integrating OpenAI, Gemini, Mistral, and Anthropic models with the same code base.

Learn how to generate and manage API keys for OpenAI and Gemini AI, including logging in with Google, creating secrets, copying keys, and preparing for Vercel SDK integration.

Integrate Vercel AI components and functions to build the chat UI in Next.js, wiring OpenAI and Google Gemini via environment variables, with a chart board UI and streaming responses.

Style the chat area by fixing the bottom input and aligning user messages to the right and AI messages to the left with icons and focus borders.

Show a loading spinner while the AI processes requests, wire isLoading from the useChart hook to the chat messages, and implement a fixed-height, scrollable messages area with customized scrollbars.

Format AI messages for readability using react-markdown by installing and importing the library, applying markdown formatting to bot responses, and testing with different AI models.

Display a welcome text in the chat area when the message list is empty and not loading, greeting the logged-in user with 'Hey [name], I am your personal assistant.'

Design a chat history model storing user messages in a MongoDB charts collection linked to the user. Define a chart schema with title and messages for subsequent APIs.

Implement chart module actions to perform charts crud operations, including save new chart, get charts by user id, update chart, and delete chart, with try-catch error handling and json responses.

Save user chats by creating a new chart for the first message and updating it with subsequent messages, manage the selected chart, and avoid duplicate documents.

Retrieves user charts asynchronously, stores them in a global store, and enables selecting a chart to display in the chart area, with hover-to-delete interactions and loading state management.

Select a user’s existing chat and display its messages in the chat area by applying conditional styling with the classnames library, updating the chart content when the selection changes.

Add a new chat by clearing the selected chart, hiding the sidebar on mobile, and appending the new chart to the top of the user charts array.

Implement delete chat from the sidebar, update the chart store after deletion, and show a loader during removal while improving readability by using a flex column layout.

Demonstrates resolving the chat area scroll issue by auto-scrolling to the bottom when new messages render using a messages ref, useEffect, and setting scrollTop to scrollHeight.

Learn to implement copy and share actions for AI responses in a Next.js chat app, including clipboard copying, copied state feedback, and UI button integration.

Implement a modal share feature with React Share, manage state for the message and modal visibility, and support WhatsApp, LinkedIn, Twitter, and Facebook.

Fix bugs and UI alignments across authentication pages, refine no charts found messaging, and streamline the deployment process for the next.js ai chatbot course.

Master the deployment workflow by securing environment variables with the .env file in .gitignore, publishing code to GitHub, and deploying on Vercel, then configure the MongoDB Atlas URL for production.