Uploaded July 2024 | Updated September 2026, 20 hours ago

---

Learn how to build a clean and functional NextJS frontend for your RAG/AI API.

The AI app is a RAG (Retrieval Augmented Generation) app, built using Python and FastAPI, and hosted on AWS. The frontend will be using NextJS, TailwindCSS, and shadcn/ui components. The site will be fully static (free/cheap to host, without a dedicated server) and can generally be adapted to any kind of API backend.

👉 Links
🔗 Project: github.com/pixegami/deploy-rag-to-aws/tree/frontend-tutorial
🔗 Demo: rag.pixegami.io
🔗 API: api.rag.pixegami.io
🔗 UI Library: ui.shadcn.com

👉 Previous RAG Tutorials
💡 youtu.be/tcqEUSNCn8I
💡 youtu.be/2TJxpyO3ei4
💡 youtu.be/ldFONBo2CR0

📚 Chapters
00:00 - Introduction
02:43 - Architecture Overview
06:24 - Generate an API Client
09:32 - Implement "ViewQuery" Page
15:27 - Rendering Components
19:31 - Implement "SubmitQuery" Form
25:07 - Implement "QueryList" Component
28:26 - Final Layout