Scribd
Upload
10 views5 pages

FastAPI Backend Setup & Integration Guide

This document provides a guide for setting up a FastAPI backend integrated with a Next.js frontend, including installation steps and project structure. It details the creation of API endpoints for session management, messaging, profile retrieval, and file downloads, along with example code for using these endpoints in Next.js. Additionally, it includes instructions for setting up an API proxy to handle CORS issues in production.

Uploaded by

junktryyy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views5 pages

FastAPI Backend Setup & Integration Guide

This document provides a guide for setting up a FastAPI backend integrated with a Next.js frontend, including installation steps and project structure. It details the creation of API endpoints for session management, messaging, profile retrieval, and file downloads, along with example code for using these endpoints in Next.js. Additionally, it includes instructions for setting up an API proxy to handle CORS issues in production.

Uploaded by

junktryyy
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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
];
},
};

You might also like