FastAPI + Next.js: the architecture I teach for every AI product

The two-service architecture behind the AI apps Pranjul Rathour ships and teaches in workshops: a Python API for models and retrieval, a Next.js front end for users, and the seams that keep both simple.

Speaking at a MeetKats event
Speaking at a MeetKats event

Every AI product I have shipped and every build workshop I run uses the same shape: a FastAPI service that owns models, retrieval and data, and a Next.js application that owns what the user sees. Students ask whether that is too much for a first project. It is exactly enough, and here is why the seams fall where they do.

Why two services

Python owns the AI ecosystem — embeddings, rerankers, training libraries, OCR clients. TypeScript owns the browser — streaming rendering, forms, auth flows. Putting each where its tools live keeps both codebases small. The one exception I have shipped is DocuLens AI, a single Next.js app with no database, chosen deliberately for a sensitive-document tool with minimal infrastructure.

What lives in FastAPI

  • Ingestion: chunking, embedding, OCR, storage.
  • Retrieval and generation: hybrid search, reranking, the confidence gate, provider fallback.
  • Streaming endpoints with Server-Sent Events; see streaming LLM answers with FastAPI.
  • Structured logs, request ids, health checks.

What lives in Next.js

  • Pages, forms, the streaming answer view and citation panel.
  • Authentication and session handling.
  • Calls to the API through a thin client with typed responses.
  • Nothing that needs a model. If the front end is doing inference, it is a browser-side ONNX case, not a shortcut.

The seams

  1. A typed contract for every endpoint — request and response schemas that both sides validate.
  2. Environment variables for URLs and keys; never a key in the front end.
  3. One Docker image per service, one compose file for local development.
  4. Errors as typed events, so the UI can say something useful.

In a workshop

Students build the API first and test it with a script, then the front end against the running API. By the end of the afternoon both are deployed, and they have a template for the next three projects. That is the "Ship it" workshop on my talk menu.

FastAPINext.jsArchitectureWorkshop
Pranjul Rathour
Pranjul Rathour
GenAI Engineer · Kanpur, Uttar Pradesh, India

GenAI engineer and AI product builder with 2+ years shipping production-grade AI systems: RAG pipelines, fine-tuned LLMs, hybrid retrieval and multi-modal apps across vision, speech and OCR, architected end to end from ingestion to deployment. Leads engineering for SCULT INDIA's 14-member team, founded the 500+ member TechVerse Enclave community and has mentored 200+ students. Three hackathon first prizes: Changethon 2025 (IIT Roorkee), Product Genesis at Vividhotsava 2025 (CSJMU Kanpur) and BYTEBATTLE (MeetKats).

Open to GenAI roles, hackathon judging, mentorship sessions and guest talks at colleges. Email pranjulrathour41@gmail.com.

Keep reading

More on Shipping AI

All Shipping AI posts →
Campus talks · hackathon judging · mentoring

Want this as a live session at your college?

Open to GenAI roles, hackathon judging, mentorship sessions and guest talks at colleges.

Pranjul Rathour, GenAI engineer in Kanpur