JavaScript fatigue: HTML 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 will do it with HTML.

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("
    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's going on here? Look thing. We see 3 attributes starting with hx-. What is here?

• hx-get: Clicking on this button will start the application /users the conclusion
• hx-target: Tells the browser to replace the content of the element with usersList id with the HTML data received from the server
• hx-swap: Tells the browser to include the HTML inside the target element

With that, you already know how to use HTML. The good thing about this approach is that if you decide to change your HTML, it won't break anything on your page.

There are, of course, advantages and disadvantages to using HTML. But as a Python developer, it feels a lot more fun to play around with my Fastapi Backends and not worry so much about rendering HTML. Just add Jinja templates, tirewind CSS, and you're ready to go!

Our first discussion on HTML and Fastapi

So now is the time when things get ugly. What we're going to do, as a first step, is build a dumb chatbot that will take users' questions, and spit them back. So we will create a page with:

• List of messages
• user input text

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

Processing

The flow of the following:

1. A user who enters a query into a document
2. This document is wrapped in a form, which will send a mail request to the server via query parameter.
3. The backend receives the request, does something with it query (In real life, we can use LLM to answer the question). For us, for demo purposes, we'll just go back and answer the question book by book.
4. The backend wraps the response in HTMLResponse (not JSON!)
5. In our method, HTMX tells the browser where to insert the response, as shown in hx-targetand how to replace it with the current DOM

And all this is. So let's get started!

Kill back

We will explain a /send route that expects a query the thread from the front, it goes in, and you send it back to

tags.

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)

The previous layer

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

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

  



  

    

      // ZeChat
    
    

    
  

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

• hx-post="/send": Will make a postal request to /send the conclusion.
• hx-trigger="click from:#submitButton": This means that the request will be created there submitButtonis clicked
• hx-target="#chat": This tells the browser where to place the HTML response. If so, we want the answer to be evaluated in the array.
• hx-swap="beforeend": HX-Target tells where to put content, HX-Swapp tells how. In that case, we want the content to be inserted before the end (so after the last child)

This page hx-on::before-request it's a bit complicated, but it can be easily explained. It basically happens between the click and the moment the request is sent. It will add the user input to the bottom of the list, then delete the user input. This way, we get a snappy user experience!

Better discussion (broadcasting + LLM)

What we report is a very simple but effective conversation, however if we want to connect LLM, we can have some times when the response from the server takes a long time. The way our current Chat is built is synchronized, meaning nothing will happen until the LLM is finished writing. Not a good user experience.

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