Javascript Fatigue: HTMX is all you need to build ChatGPT — Part 1

In fact, you can actually write your own little GPT-like UI with HTMX and just a few lines of Python!

A real demo: a ChatGPT app with HTMX and FastAPI

For this article, we will build a little chat with less than 100 lines of Python and HTML. We will start with very simple demos to show how HTMX works, then add a simple chat UI, then add a streaming capability to our chat. To make things even more attractive, we will use the Google Agent Development Toolkit, so we can leverage agents in our chat!

Simple HTMX demos

Let’s assume we have an API that returns a list of users. We want to click a button to fetch the data and display a list.

The traditional, JS-way:

  



  
  Show
  

  

And this is how you would do with HTMX.

First create your backend:

from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
import requests

app = FastAPI()
templates = Jinja2Templates(directory="templates")

@app.get("/", response_class=HTMLResponse)
async def home(request: Request):
    return templates.TemplateResponse("demo.html", {"request": request})

@app.get("/users")
async def get_users():
    r = requests.get("https://dummyjson.com/users")
    data = r.json()
    html = ""
    for row in data['users']:
        html += f"
{row['firstName']} {row['lastName']}
\n"
    return HTMLResponse(html)

And then the HTML:

  
  




  
   Show
  

And you get exactly the same result! What happened just here? Look at the element. We see 3 attributes starting with hx-. What are they here for?

• hx-get: Clicking on this button will trigger a GET request to the /users endpoint
• hx-target: It tells the browser to replace the content of the element which has the usersList id with the HTML data received from the server
• hx-swap: It tells the browser to insert the HTML inside the target element

With that, you already know how to use HTMX. The beautiful thing about this way of doing is that if you decide changing your HTML, it won’t break anything on your page.

There are, of courses, advantages and drawbacks in using HTMX. But as a Python developer, it feels very nice to play around with my FastAPI backend and not worry a lot about rendering HTML. Just add Jinja templates, a dose of Tailwind CSS, and you’re good to go!

Our first chat with HTMX and FastAPI

So now is the moment when things are getting serious. What we will do, as a first step, is build a dumb chatbot that will take the users query, and spit it backwards. For that we will build a page with:

• a list of messages
• a textarea for the user’s input

And guess what, HTMX will take care of sending/receiving the messages! This is what the result will look like:

Overview

The flow is the following:

1. User inputs a query in a textarea
2. This textarea is wrapped in a form, which will send a POST request to the server with the query parameter.
3. The backend receives the request, does something with the query (in real life, we can use a LLM to answer the query). In our case, for demo purposes, we will just reply by reverting the query letter by letter.
4. The backend wraps the response in an HTMLResponse (not JSON!)
5. In our form, HTMX tells the browser where to insert the response, as shown in the hx-target, and how to swap it with the current DOM

And this is all. So let’s begin!

Backend

We will define a /send route that expect a query string from the frontend, inverts it, and sends it back in a

tag.

from fastapi import FastAPI, Request, Form
from fastapi.templating import Jinja2Templates
from fastapi.responses import HTMLResponse
import asyncio
import time

app = FastAPI()
templates = Jinja2Templates("templates")

@app.get("/")
async def root(request: Request):
    return templates.TemplateResponse(request, "simple_chat_sync.html")


@app.post("/send")
async def send_message(request: Request, query: str=Form(...)):
    message = "".join(list(query)[::-1])
    html = f"
"
    return HTMLResponse(html)

Frontend

On the frontend side, we define a simple HTML page using Tailwind CSS and HTMX:

  
  
  
  
  
  
  [email protected]&display=swap" rel="stylesheet">

  



  

    

      // ZeChat
    
    

    
  

Let’s have a closer look the tag. This tag has several attributes, so let’s take a minute to review them:

• hx-post="/send": It will make a POST request to the /send endpoint.
• hx-trigger="click from:#submitButton": This means the request will be triggered when the submitButtonis clicked
• hx-target="#chat": This tells the browser where to put the HTML response. In that case, we want the response to be appended to the list.
• hx-swap="beforeend": The hx-target tells where to put the content, the hx-swap tells HOW. In that case, we want the content to be added before the end (so after the last child)

The hx-on::before-request is a little bit more complex, but can be explained easily. It basically happens between the click and the moment the request is sent. It will add the user input the bottom of the list, and clear the user input. This way, we get a snappy user experience!

A Better chat (streaming + LLM)

What we built is a very simple yet functional chat, however if we want to plug a LLM, we might have some times when the response from the server takes a long time. The way our current chat is built is synchronous, meaning nothing will happen until the LLM is finished writing. Not a great user experience.

What we need now is streaming, and a real LLM to have a conversation with. And this is Part 2.