FastAPI Backend Setup & Integration
Guide
For: MERN/Next.js Developer
Backend file: try.py (FastAPI)
Frontend: Next.js
Step 1: Install Python & Set Up the Backend
Prerequisites
1. Install Python 3.9+ from https://www.python.org/downloads/
2. Open your terminal or VS Code terminal
Project Structure
college-recommender-backend/
│
├── try.py ← FastAPI backend
└── (optional) .env or README.md
Setup Python Environment
# Step into the folder
cd college-recommender-backend
# (Optional) Create a virtual environment
python -m venv env
# Activate virtual environment
# Windows:
env\Scripts\activate
# Mac/Linux:
source env/bin/activate
# Install required Python packages
pip install fastapi uvicorn groq pydantic
Run the FastAPI Server
uvicorn try:app --reload
● try: the filename try.py
● app: FastAPI object in the code
● --reload: auto restart on file changes
👉
Now open this:
http://localhost:8000/docs ← Interactive API Explorer
How the Backend Works (Summary)
4 API Endpoints:
Endpoint Method Description
/init_session POST Starts a new chat session
/chat POST Sends user message and receives
response
/profile/{session GET Gets the profile data as JSON
_id}
/download_profile GET Downloads the profile as .txt file
/{id}
Example: How to Use the Endpoints in Next.js
1. /init_session – Start a New Session
// pages/api/init-session.ts
export async function initSession(apiKey: string) {
const res = await fetch("http://localhost:8000/init_session", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ api_key: apiKey, name: "Lauren" }),
});
return await res.json(); // → { session_id, profile_file }
}
2. /chat – Send a Message to Chatbot
// pages/api/send-message.ts
export async function sendMessage(sessionId: string, message: string) {
const res = await fetch("http://localhost:8000/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
session_id: sessionId,
message: message,
history: [], // or maintain history in state
}),
});
return await res.json(); // → { response, profile_status, profile_file }
}
3. /profile/:session_id – Get Full JSON Profile
// pages/api/get-profile.ts
export async function getProfile(sessionId: string) {
const res = await fetch(`http://localhost:8000/profile/${sessionId}`);
return await res.json(); // → full profile JSON
}
4. /download_profile/:session_id – Download Profile File
// e.g., from a download button in Next.js
<a href={`http://localhost:8000/download_profile/${sessionId}`} download>
Download Profile
</a>
Where to Get the api_key?
● Go to: https://console.groq.com/keys
● Generate your API key and paste it during /init_session.
Summary for Frontend Developer
Task What to Use
Start chatbot session initSession(apiKey)
Chat with bot sendMessage(sessionId, message)
Show progress/profile getProfile(sessionId)
Download profile file <a href="..." download> or
window.open()
Optional: API Proxy Setup in Next.js
To avoid CORS in production:
next.config.js
module.exports = {
async rewrites() {
return [
{
source: "/api/chat",
destination: "http://localhost:8000/chat",
},
{
source: "/api/init_session",
destination: "http://localhost:8000/init_session",
},
// Add others as needed
];
},
};
