🚀 AI Chat Interface with MCP - Cloud Project

A comprehensive, production-ready AI chat application featuring a Next.js frontend, FastAPI backend, and advanced Model Context Protocol (MCP) integration. This project leverages Google Gemini LLMs and LangGraph agents to provide a powerful, context-aware chat experience with capabilities extending to GitHub, Supabase, and academic research tools.

---

📋 Table of Contents

• Overview
• Architecture
• Key Features
• Project Structure
• Getting Started
• Components
  • Frontend
  • Backend
  • LlmOps
  • Monitoring
  • Helm
• Tech Stack

---

🔭 Overview

This project implements a full-stack AI chat solution designed for scalability and extensibility. It goes beyond simple text generation by integrating MCP (Model Context Protocol), allowing the AI agent to interact with external systems like GitHub repositories, databases, and search engines in real-time.

The system is composed of a modern React-based frontend, a high-performance Python backend, and a robust DevOps infrastructure including monitoring and CI/CD pipelines.

Landing Page

Chat Interface

---

🏗️ Architecture

The application follows a microservices-inspired architecture:

1. Frontend (Next.js 16): Handles user interaction, authentication, and real-time chat rendering.
2. Backend (FastAPI): Orchestrates AI agents, manages MCP connections, and handles business logic.
3. Database (PostgreSQL): Stores user data, conversation history, and preferences.
4. Async Workers (Celery + Redis): Handles background tasks like email notifications.
5. MCP Servers: External tools (GitHub, Supabase, etc.) that the AI agent can control.
6. Infrastructure: Dockerized services, Kubernetes (Helm) charts, and Prometheus/Grafana monitoring.

User Interaction Flow

Database Schema

API Architecture

---

✨ Key Features

• 🤖 Advanced AI Agents: Powered by LangGraph and Google Gemini, capable of reasoning and tool use.
• 🔌 MCP Integration: Seamlessly connect to GitHub, Supabase, Paper Search, and Exa via Model Context Protocol.
• 💬 Rich Chat Interface: Markdown support, code syntax highlighting, and real-time streaming.
• 🔐 Secure Authentication: Multi-provider support (Google, GitHub, Email) via NextAuth.js.
• 🧠 Context Persistence: Long-term memory for conversations using MemorySaver.
• 📊 Comprehensive Monitoring: Real-time metrics with Prometheus and Grafana.
• 🚀 DevOps Ready: Includes Terraform scripts, Jenkins pipelines, and Helm charts.

AI Agent Tracing

Authentication

---

To run the full stack, you will need to start the backend and frontend services.

Prerequisites

• Docker & Docker Compose
• Python 3.12+
• Node.js 18+
• PostgreSQL

Quick Start

1. Backend Setup

Navigate to the backend directory to set up the server and agents.

cd backend
# See backend/README.md for detailed env setup
pip install -r requirements.txt
uvicorn main:app --reload

2. Frontend Setup

Navigate to the frontend directory to launch the user interface.

cd frontend
# See frontend/README.md for detailed env setup
npm install
npm run dev

3. Monitoring (Optional)

Launch the observability stack.

cd monitoring
docker-compose up -d

---

🚀 CI/CD Pipeline

Jenkins Workflow

CI/CD Diagram

Helm Deployment

---

🧩 Components

🖥️ Frontend

Built with Next.js 16, TypeScript, and Tailwind CSS.

• Features: Real-time chat, Model selection, User profiles, Dark mode.
• Tech: NextAuth.js, Prisma, Radix UI, Sonner.

Use Cases

⚙️ Backend

Monitoring & Observability

Prometheus Metrics

Grafana Dashboard

Alertmanager

Flower Task Queue

Infrastructure

Terraform Output

DNS Configuration (Namecheap)

Email Confirmation

---

📊 Tech Stack

Component	Technology
Frontend	Next.js 16, TypeScript, Tailwind CSS, Prisma, NextAuth.js
Backend	FastAPI, LangGraph, LangChain, Celery, SQLAlchemy, Flower
AI / LLM	Google Gemini, Model Context Protocol (MCP)
Database	PostgreSQL, Redis
DevOps	Docker, Kubernetes (Helm), Terraform, Jenkins
Monitoring	Prometheus, Grafana, Alertmanager, Kube-Metrics

---