Backend Plus Frontend Plus AI: The Three-Stack Combo That Ships

Most of my weekly shipping lives at the intersection of three stacks: FastAPI on the backend, Next.js on the frontend, and a Claude-powered agent doing the interesting work in between. Six months of running this combo taught me which boundaries are load-bearing and which I can cross.

The Division of Labor

The hardest part of a three-stack combo is deciding what lives where. Here is how I split the work:

• Backend (FastAPI): data ownership, authorization, tool implementations, validation
• Frontend (Next.js): user experience, streaming rendering, optimistic updates, caching
• AI layer (Claude): understanding intent, orchestrating tools, generating content

The AI never talks to the database directly. The frontend never calls the AI directly. Every AI interaction goes through the backend, which enforces authorization and logs every call. That single rule has prevented more incidents than any other architectural decision I have made.

A Typical Request

1. User clicks button in Next.js
2. Frontend calls FastAPI endpoint with auth header
3. Backend validates auth, loads context, calls Claude
4. Claude calls backend tool functions as needed
5. Backend streams final response back to frontend
6. Frontend renders with optimistic UI patterns

Six hops. Each one has a clear contract. Each one has its own failure mode.

What I Stopped Doing

I used to have the AI return structured data that the frontend rendered directly. It worked until the AI decided to change the output format on a Tuesday morning. Now the backend always post-processes AI output into a known schema before it reaches the frontend. The AI has freedom inside the backend. The frontend sees a stable contract.

The Deployment Shape

The three stacks live in three repos deployed independently:

• Backend on AWS Lambda behind API Gateway
• Frontend on Vercel with ISR
• AI layer is just the backend talking to Anthropic's API

Each one can be updated without touching the others. That independence is what makes the combo worth running. If I had to redeploy three things to ship a fix, I would have collapsed the stack long ago.

The Next.js App Router docs cover the streaming patterns I use on the frontend.