Build an AI Personal Assistant Using Next.js, React, Convex, and Eden AI

AI-powered personal assistants have become invaluable tools, helping us with everything from managing tasks to answering queries.

In this article, based on TubeGuruji's YouTube tutorial, we will guide you through the process of building a sophisticated AI personal assistant using modern web technologies like Next.js, React, Convex, and Eden AI."

By the end, you will have a fully functional assistant that can respond to user inputs, be customized to fit different needs, and even process payments for credits, all while being deployed to the web.

‍

Solution Overview

This project will involve creating a frontend using Next.js and React, allowing users to interact with the AI assistant through a chat interface.

The backend will be powered by Convex, a serverless platform, to handle user data and AI interactions in real-time. Eden AI will provide the AI models that process user input and generate intelligent responses.

We’ll also implement user authentication, AI assistant customization, and payment integration to handle token credits for AI usage. Finally, the app will be deployed on Vercel for live access.

For a highly detailed video tutorial, you can watch TubeGuruji’s Youtube video, which provides a step-by-step guide to make the process easier to follow.

‍

Setting Up the Project

‍

Creating the Next.js Application

The first step in building your AI assistant is to set up a new Next.js project. To begin, open your terminal and create a new Next.js application using the following command:

  
    npx create-next-app@latest ai-assistant
    cd ai-assistant
    npm install
  

‍

Next, we will install Tailwind CSS to handle the styling of the application. Tailwind allows for rapid, responsive design with a minimal amount of custom CSS. Start by installing the necessary packages:

  
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p
  

‍

Now, configure Tailwind CSS by editing the tailwind.config.js file and adding the necessary paths to your content. With Tailwind set up, you can begin working on the UI layout, which will include a navbar, sidebar, and a main chat area where users will interact with their AI assistant.

‍

Implementing the Dark Theme

To manage theme switching in your application, you can use React Context to handle the global state of the theme across your app.

By leveraging the useState hook, you can easily toggle between light and dark modes, providing users with a seamless experience. Additionally, to ensure that the user's theme preference persists across sessions, you can store the selected theme in localStorage.

This allows the app to remember the user's choice even after they refresh the page or revisit the site. Using this approach, you can create a responsive and user-friendly theming system that adapts to individual preferences.

‍

Setting Up Authentication

For security, it's crucial to implement authentication so that only authorized users can access the assistant. You can use NextAuth.js, a library built for authentication in Next.js apps, which supports multiple providers, including Google OAuth and email/password login.

Start by setting up Google OAuth or an email-based authentication system. This will allow users to log in securely and access their personalized AI assistants. Additionally, you will need to implement protected routes to restrict access to certain pages or features unless the user is logged in.

You can easily integrate NextAuth into your project by following the official documentation, ensuring that the authentication process is both smooth and secure.

‍

Backend with Convex

The backend of this project is powered by Convex, a serverless backend platform designed for managing real-time data and state. Convex simplifies managing databases, handling user sessions, and performing other backend functions without needing to set up a traditional server.

Start by installing the Convex client:

  
    npm install convex react convex/react
    npx convex dev
  

Once installed, you can initialize your Convex backend and start defining the necessary backend functions, such as:

• Storing user sessions.
• Saving assistant chat history for each user.
• Handling AI-generated responses.

The real-time nature of Convex makes it ideal for an application like this, where user inputs and assistant responses need to be handled immediately.

‍

Create AI Assistant List

Design a UI that displays a list of available AI assistants. Fetch assistant details from Convex and render them dynamically.

• Implement a search and filter function for easier navigation and selection.

‍

Design the Workspace Layout

To manage the workspace, build design a dashboard-style layout, including a sidebar for easy navigation.

This layout will be responsive, ensuring that it looks good on both desktop and mobile devices. Use useState or useContext to handle the selection of different AI assistants within the app.

‍

AI Model Integration with Eden AI

To integrate AI models into your application using Eden AI, the first step is to register on the Eden AI platform and obtain an API key.

This key will allow you to securely connect to their services and utilize a variety of powerful AI models. Once you have your API key, you'll need to install axios, a promise-based HTTP client, to handle API requests and interact with Eden AI’s endpoints. You can do this by running the following command:

npm install axios

Next, you’ll set up an API function that will take user input and send it to Eden AI’s servers. The function should handle sending the request and receiving the AI-generated responses, which you can then display or process further in your application.

For added flexibility, you can create a function that allows you to switch between different AI models based on the task at hand. For example, you might use one model for a chatbot that provides conversational responses, and another model for tasks like code generation.

‍

Configure AI Assistant Settings

Users can create and customize AI assistants by setting attributes like name, personality, and tone. These preferences are stored in Convex, ensuring they persist across sessions.

We’ll provide edit and delete options, allowing users to update or remove assistants easily. Editing will involve a pre-filled form for quick modifications, while deletion will include a confirmation step to prevent accidental removals. This ensures a fully personalized and flexible assistant experience.

‍

Building the Chat UI

The chat UI is the main interaction point for users. You’ll need to create a dynamic chat interface where users can send messages and receive responses from the assistant. React hooks are used to manage the state of the chat, dynamically displaying the conversation as it evolves.

The chat should include:

• User messages displayed on one side of the interface.
• AI responses displayed on the other side.
• A typing indicator to provide feedback that the assistant is generating a response.

To improve the user experience, you can also handle errors gracefully, displaying user-friendly messages if something goes wrong with the API request.

‍

Develop the AI Model API

To power the AI assistant, we’ll create a Next.js API that connects with Eden AI’s NLP models, ensuring smooth communication between the chat interface and AI.

First, we’ll set up a Next.js API route (/api/ai) to receive user messages, send them to Eden AI via Axios, and return responses to the frontend.

To prevent excessive API usage, we’ll implement rate limiting, restricting request frequency per user to control costs and optimize performance. This ensures the AI assistant remains fast, efficient, and responsive.

‍

AI Assistant Creation and Customization

Allowing users to create their own custom AI assistants is a powerful feature. You can provide a form where users can set:

• Name, personality, and preferred AI model.
• Custom greeting messages and other settings.

These settings will be stored in Convex, and each user can manage multiple assistants based on their preferences. You will also need to implement functionality to edit and delete assistants, making the assistant management process as seamless as possible.

‍

Set Up User Profiles & Account Management

We’ll create a user profile page displaying name, email, and assistant usage stats, allowing users to track their AI interactions.

Users can update their profile picture and preferences, such as notifications and themes, through an editable form. Changes will be securely stored to persist across sessions.

To ensure security, we’ll implement authentication-based access control, allowing only authorized users to modify their data, creating a seamless and personalized experience.

‍

Credit and Token System

Since Eden AI’s models may have usage costs, you can implement a credit system where users purchase credits or tokens to make API calls. This adds a layer of monetization and allows users to manage their budget for AI interactions.

To handle this, you can track credits in Convex and deduct tokens from the user's balance whenever they interact with the assistant. Additionally, you can notify users when their credits are running low, prompting them to purchase more.

‍

Razorpay Payment Integration

To facilitate the purchase of AI credits, we’ll integrate Razorpay, a popular payment gateway. Razorpay will allow users to securely purchase credits and tokens. After completing the payment, you can use webhooks to update the user’s balance in Convex, ensuring the transaction is securely processed.

Install the Razorpay SDK:

  
    npm install razorpay
  

Integrate the Razorpay payment flow into your app, allowing users to make payments and automatically update their credit balances. Razorpay’s API provides all the necessary endpoints to handle payments, refunds, and transaction verification.

‍

Deploying the Application

To finalize debugging and optimization:

1. Thoroughly test all UI components to ensure they function correctly.
2. Optimize API requests to reduce load time and improve performance.
3. Fix minor UI/UX issues to enhance accessibility and provide a smoother user experience.

Finally, once your application is complete, it’s time to deploy it. Push the project to GitHub and connect it to Vercel, which provides a seamless deployment process for Next.js applications. Vercel handles everything from hosting to environment variable management, making it easy to take your app live.

After deployment, configure your environment variables, including the Eden AI API key and Razorpay credentials, ensuring that sensitive information is kept secure.

‍

Conclusion

By following this guide, you’ve built a powerful AI personal assistant that can respond to user input intelligently, be customized to the user’s preferences, and handle payments for credits using Razorpay.

The combination of Next.js, React, Convex, and Eden AI creates a robust, scalable platform for building interactive AI-powered applications.

This project can be further enhanced by integrating voice recognition, adding multi-assistant collaboration, and exploring more advanced AI features, such as sentiment analysis or emotion detection.

With everything deployed on Vercel, your app is ready for real-world use, providing a sleek, modern experience for users!