Building a Full-Stack AI Chatbot from Scratch: A Hands-On Tutorial with React + Node.js + Gemini API

A complete AI chatbot project based on React, Node.js, Express, MongoDB, and Google Gemini API, demonstrating the architectural design and implementation details of modern full-stack AI applications.

With the popularity of large language models, integrating AI conversational capabilities into applications has become a common need for developers. However, many tutorials either focus only on the frontend interface or only explain API calls, lacking a complete, deployable full-stack solution.

Abdul Kalam's open-source AI-ChatBot project fills this gap. It is a fully functional full-stack application covering the entire chain from user interface to backend API, from database design to third-party AI service integration. For developers who want to learn modern full-stack AI application development, this is an excellent reference implementation.

The project uses a current mainstream technology combination to ensure modernity and maintainability of the code:

Frontend Technology Stack:

• React 18 + Vite (Fast development and build tool)
• Bootstrap 5 (Responsive UI components)
• Axios (HTTP client)
• React Markdown (Render Markdown-formatted content returned by AI)

Backend Technology Stack:

• Node.js (ES Modules mode)
• Express.js (Web framework)
• MongoDB + Mongoose (Document database and ODM)
• Google Generative AI SDK (Gemini API client)
• dotenv (Environment variable management)
• CORS (Cross-origin resource sharing)

AI Service:

• Google Gemini API (Provides conversation generation capabilities)

Deployment Platforms:

• Frontend: Vercel
• Backend: Render / Railway / Vercel Functions
• Database: MongoDB Atlas

The project adopts a classic front-end and back-end separation architecture, communicating via RESTful APIs:

The frontend uses Vite as the build tool, providing a fast development experience and optimized production builds. React's component-based design makes the code structure clear and easy to maintain. Bootstrap 5 ensures the interface is responsive across various devices.

A key design decision is using the React Markdown library to render content returned by AI. Since Gemini API responses often include Markdown formats (such as code blocks, lists, bold text, etc.), displaying raw text directly would affect user experience. React Markdown converts these formats into corresponding HTML elements, making the conversation content more readable.

The backend uses the MVC (Model-View-Controller) architectural pattern to organize code:

• Models: Define MongoDB document structures, including data models for conversation records
• Controllers: Handle business logic, including receiving user messages, calling the Gemini API, and storing conversation records
• Routes: Define API endpoints, routing HTTP requests to corresponding controllers
• Config: Database connection configuration and other environment settings

This layered design makes code responsibilities clear, facilitating testing and expansion.

The project uses MongoDB to store conversation history, with each record including:

• User message
• AI response
• Timestamp
• Unique identifier

This design supports subsequent feature expansions, such as conversation history browsing, session management, and analysis.

The core function of the system is to receive user input, call the Gemini API to generate a response, and save the conversation to the database. The process is as follows:

1. The user enters a message in the frontend and sends it
2. The frontend sends the message to the backend's /api/chat endpoint via Axios
3. The backend controller receives the message and calls the Gemini API using the Google Generative AI SDK
4. After Gemini generates a response, the backend saves both the user message and AI response to MongoDB
5. The backend returns the complete conversation record to the frontend
6. The frontend updates the UI to display the conversation content