This project consists of a backend (Python FastAPI server) and a frontend (React-based web application) for the MacEwan chatbot assistant.
- Project Structure
- Requirements
- Setting up the Virtual Environment
- Backend Setup and Running
- Frontend Setup and Running
- Running Both Backend and Frontend Together
- API Calls
- Images
MacEwan_Chatbot_Assistant
├── back-end/
│ ├── chat_bot/
│ │ ├── crawlers/
│ │ │ └── ReaderCrawler.py
│ ├── .env
│ ├── main.py
│ ├── vector_store.py
│ └── app.py
├── front-end/
│ ├── public/
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── manifest.json
│ ├── src/
│ │ ├── components/
│ │ ├── images/
│ │ ├── App.js
│ │ ├── index.js
│ │ └── styles.css
│ ├── package.json
│ ├── package-lock.json
├── venv/
├── .gitignore
├── README.md
└── requirements.txt
- Python 3.12
- Node.js 14+
- npm 6+
To efficiently manage Python dependencies and run backend services, it's recommended to use a virtual environment, though it's not mandatory.
In the root directory of the project, execute:
python3.12 -m venv venv
-
On Windows:
.\venv\Scripts\activate
-
On macOS/Linux:
source venv/bin/activate
With the virtual environment activated, install the required Python packages from requirements.txt
:
pip install -r requirements.txt
If you prefer to run the backend locally instead of using the hosted version on Render (https://macewan-chatbot-backend.onrender.com/query), follow these steps. The backend uses FastAPI and integrates with Coheres, langchain and PineCones APIs.
Create a .env
file in the back-end/
directory and add the necessary environment variables:
HUGGINGFACE_API_TOKEN=your_api_key_here
PINECONE_API_KEY=your_api_key_here
COHERE_API_KEY=your_api_key_here
With the virtual environment active and dependencies installed, navigate to the back-end
directory and start the FastAPI server using uvicorn
:
uvicorn back-end.app:app --reload
- The backend will be accessible at:
http://127.0.0.1:8000
To modify the frontend appearance, follow these steps.
Navigate to the front-end/
directory and install the required Node.js dependencies:
npm install
npm start
The frontend will be accessible at http://localhost:3000
.
Activate the Python virtual environment and run the FastAPI server as described in the Backend Setup and Running section.
Navigate to the front-end/
directory and start the React development server as described in the Frontend Setup and Running section.
The React frontend will send API requests to the backend running at http://127.0.0.1:8000
(or any other backend server you configure).
The frontend communicates with the backend using the following API call:
const response = await fetch(
`https://macewan-chatbot-backend.onrender.com/query/?query=${encodeURIComponent(userInput)}&session_id=${sessionId}`,
{
method: "GET",
headers: {
"Session-ID": sessionId,
"Content-Type": "application/json",
},
}
);
- Endpoint:
/query/
- Method: GET
- Parameters:
query
: The user input to be processed by the chatbot.session_id
: A identifier for the session.
- Headers:
Session-ID
: The session identifier.Content-Type
:application/json
