Building a streaming ChatGPT clone, with Django, Channels, and HTMX

In this video I walkthrough the process of building a ChatGPT clone step-by-step using Django, websockets, and HTMX. I break down each piece of functionality into a single commit, and then explain and demo that commit. At the end we have a fully functional, streaming chatbot app!

Links:

Timestamps:

0:00 - Demo
1:02 - UI Scaffolding
2:13 - Websocket setup with backend consumer and HTMX extension
4:15 - Showing the user's message with Websockets and HTMX
5:32 - Clearing the input bar with the htmx:wsAfterSend events
6:13 - Showing the system message template and loading indicator
8:00 - Adding the ChatGPT API and streaming the response to the front end
9:37 - Removing the loading indicator
10:40 - Adding message history support
12:20 - Adding automatic scrolling with htmx:wsAfterMessage event

[czue]

For those asking for the code, it's hard for me to share the repo since it's built on top of a proprietary product (SaaS Pegasus), but here is a Git patch file of the diffs for the entire video, which should help you apply it to your own Django projects. In addition to this diff you will need to set up a Django project and set up Channels. The full code is also now available in Pegasus.

[sagartamang]

You sir are a hero! You literally taught me so many things that I was stuck of months!!

[anzedb]

This looks great! Great to see a practical example for web sockets with HTMX and Django Channels!

[thuanquoc]

Very nice, I will use this as a reference for my future hobby project.

[davidbolli]

great video, thanks. I would also be very interested in the repo

[skaus]

Great video. Is there a repo you could share ?

[clearthinking]

This is not async. When would you ever use a chatbot that is not async, doesn't that block the event loop ... ?