How to build AI-apps with React + FastAPI (full beginner tutorial)

Python-frameworks like Streamlit and Gradio have become very popular in the AI-boom, as many people are excitedly building demos and prototypes to test the technology. While they are good for doing just that, they do lack the flexibility for building applications that are genuinely usable in the real world, at scale.

In this video, I hope to demystify the leap to building more powerful, full-stack AI-applications using React and FastAPI, which forms a very popular frontend+backend combo for modern web applications.

▬▬▬▬▬▬ LINKS ▬▬▬▬▬▬
Want to build AI-applications for your business? Get in touch!

Connect with me on LinkedIn:

Code:
▬▬▬▬▬▬ T I M E S T A M P S ▬▬▬▬▬▬

0:00 - Intro
0:50 - FastAPI setup
4:56 - Qdrant Vectorstore setup
9:42 - LangChain and RAG
15:52 - Adding websites to vectorstore
17:40 - React setup & overview
22:02 - Handling user input
27:01 - Connect API with frontend
31:41 - UI-styling & animation
41:22 - Add new websites through UI

[figs]

Massively underrated channel brother! Would love to see how to do this without langchain.

[ZZsunfire]

Wonderful tutorial. Thank you so much!!

[johannesjolkkonen]

If you enjoyed this video, I made a part 2 where I add streaming, a way to do RAG without LangChain and finally also deploying the app.

[brianmorin]

I started watching just for the react front end piece as I want to build something more custom than streamlit

I haven’t even gotten past the first half yet but already subscribed. Great stuff. I hadn’t even seen the concept of embedding on demand for any article we want in our vector store. I’ll have to try to connect this to a google extension I made for saving the URL to text file so I can get there in one click

[max-eugenemamet]

Thank you for the tutorial ! You should really zoom in for better code visibility (as well as using a light theme in vscode)