📚 Lesson 1.2: Components of a Custom AI System (LLM, UI, Database, API)
🧠 What Makes an AI Chat System Work?
When you use ChatGPT or DeepSeek, it feels simple—just type and get a smart answer. But behind the scenes, there are several connected parts working together.
In this lesson, we’ll break down the four key components you’ll need to build your own custom AI chat system:
🧩 1. LLM (Large Language Model) – The Brain 🧠
The LLM is the main intelligence engine of your chatbot. It’s the part that reads the user’s question and writes a smart, natural-sounding response.
Think of it like a very advanced “autocomplete” that understands meaning, context, and intent.
🛠 Tools you’ll use:
-
Ollama – to run LLMs on your own device.
-
Mistral, LLaMA, or DeepSeek LLM – open-source language models you can use for free.
🔑 What it does:
-
Understands user input.
-
Predicts and generates meaningful answers.
-
Learns from the text it’s trained on (books, websites, etc.).
🖼️ 2. UI (User Interface) – The Face 😄
The UI is the visual front-end where users interact with your AI. It can look like a simple chat window, a web app, or even a mobile app.
If the LLM is the brain, the UI is the mouth, ears, and face—it’s how users send messages and see answers.
🛠 Tools you’ll use:
-
React – for building web apps.
-
Streamlit or Gradio – easier tools to build fast interfaces with Python.
-
Tailwind CSS – for styling your interface.
🔑 What it does:
-
Allows users to type messages.
-
Displays responses from the AI.
-
Handles login and user sessions (if needed).
🗄️ 3. Database (Content Storage) – The Memory 🗃️
The database is where your AI stores information to use in responses. This might include:
-
Uploaded files (PDFs, Word docs, text)
-
Website content
-
User questions and answers
-
Login information (for secure systems)
A special kind of database called a Vector Database is used to store and search text by meaning, not just exact words.
🛠 Tools you’ll use:
-
ChromaDB, Qdrant, or Weaviate – free, open-source vector databases.
-
SentenceTransformers – to turn your content into embeddings (mathematical meaning-based codes).
🔑 What it does:
-
Stores knowledge your AI can search through.
-
Finds the most relevant content when a question is asked.
-
Helps the AI give better answers using real data.
🔗 4. API (Application Programming Interface) – The Messenger 📡
The API is the middleman that connects the UI, the LLM, and the database. When a user types a question:
-
The UI sends the message to the backend via the API.
-
The backend fetches useful info from the database (if needed).
-
The LLM uses that info to generate a reply.
-
The API sends the reply back to the user interface.
You can think of the API as a highway that delivers requests and responses between parts of your system.
🛠 Tools you’ll use:
-
FastAPI – a fast, modern Python framework for building APIs.
-
Axios – to send API calls from your frontend.
🔑 What it does:
-
Connects the chatbot interface to the AI model and database.
-
Organizes how data flows in and out of the system.
-
Adds features like login, file upload, and chat history.
🔄 How It All Connects (Simple Example):
User (on website) ➜ types: “What is quantum physics?”
⬇
UI sends the message to the backend API.
⬇
API checks the vector database for related content.
⬇
API sends question + context to LLM.
⬇
LLM generates a smart answer.
⬇
API sends answer back to UI.
⬇
User sees: “Quantum physics is the study of...”
🏁 Summary
| Component | Role in the System | Example Tools Used |
|---|---|---|
| LLM | Understands & generates text | Mistral, DeepSeek, LLaMA, Ollama |
| UI | Interface for users | React, Streamlit, Gradio |
| Database | Stores and searches knowledge | ChromaDB, Qdrant, Weaviate |
| API | Connects everything | FastAPI, Axios |
Together, these components make up a fully functional AI system you can build, customize, and deploy yourself.
90
