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: https://github.com/pixegami/deploy-rag-to-aws/tree/frontend-tutorial
🔗 Demo: https://rag.pixegami.io
🔗 API: https://api.rag.pixegami.io
🔗 UI Library: https://ui.shadcn.com
👉 Previous RAG Tutorials
💡 https://youtu.be/tcqEUSNCn8I
💡 https://youtu.be/2TJxpyO3ei4
💡 https://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