AI Chats with cool UIs are possible

Tl;DR

Ive been following theo in YT for some time now, t3 chat is amazing.

How hard is to do something similar on the surface?

Intro

The multichat or the Aissistant were… cool:

MultiChat UI

How the final multichat UI looks like

Multichat

Source Code for Streamlit Multichat

But streamlit does not allow for the kind of modern (and pixel tweak) chat interface we want.

One that…could be a future brand signature.

This is where I want to try Astro on SSR mode

A T3 Chat like interface

Why not applying these to a theme: which kind of reminds me of t3.chat: https://t3.chat

• https://www.astrothemes.dev/theme/anse-app-chatgpt-demo/
• https://github.com/anse-app/chatgpt-demo

MIT | Minimal web UI for ChatGPT.

• https://github.com/Marve10s/Astro-Vercel-SDK-AI-Chatbot which is also MIT and https://template-astro-vercel-sdk-ai-chatbo.vercel.app/

Create a makefile with the commands to run this astro site locally

#rm -rf .git

#git init && git add . && git commit -m "Initial commit: Starting astro hybrid OpenAI Chatbot" && gh repo create Astro-Vercel-SDK-AI-Chatbot --private --source=. --remote=origin --push

make install && make dev #requires .env.local

#git clone https://github.com/Marve10s/Astro-Vercel-SDK-AI-Chatbot
git clone https://github.com/JAlcocerT/Astro-Vercel-SDK-AI-Chatbot

make help

make docker-build
make docker-up
#docker stop $(docker ps -a -q) #stop all
#docker system df
#docker system prune -a --volumes -f

In this case, the vibe coding journey starts from this repository, so no need for the initial prompt.

And on the recent Audio with AI Post, I was supposed to create a Speech rater with FastAPI that superseeds the previous streamlit version.

But I got an improvement of my yt audio workflow instead.

The prep work was done anyways: SSG + FastAPI + Audio recording/storing/processing worked.

How about the rating part now?

Meaning: to somehow plug the AI/LLMs/Agents to do/check stuff

This required some back-and-forth with antigravity.

But I got to make it work:

• Make async API calls to /api/chat
• Stream responses token-by-token
• Update the UI in real-time as tokens arrive
• Enabled Astro SSR mode with output: ‘server’
• Added Node.js adapter for API route support

sequenceDiagram
    participant User
    participant Frontend as Chatbot.tsx
    participant API as /api/chat
    participant SDK as Vercel AI SDK
    participant OpenAI as OpenAI API

    User->>Frontend: Sends Message
    Frontend->>API: POST /api/chat (messages)
    API->>SDK: streamText()
    SDK->>OpenAI: Request Completion
    OpenAI-->>SDK: Stream Chunks
    SDK-->>API: Stream Text
    API-->>Frontend: ReadableStream
    
    loop For each chunk
        Frontend->>Frontend: TextDecoder.decode()
        Frontend->>User: Update UI (Token by Token)
    end

About Cool Chat UIs

In theory, we can plug shadcn to streamlit…

Some might say that its all about CSS.

• https://ui.shadcn.com/themes
  • https://github.com/ObservedObserver/streamlit-shadcn-ui

But if you are vibe coding, from my experience, specifying TailwindCSS is a good enough approach:

Custom Bots for Landing Pages

Using FastAPI + OpenAI x Astro to get a bot to work!

Custom Bots for RE

Using Streamlit to recommend properties as per md

Conclusions

Connecting cool static chat UIs to AI API keys is possible.

Isnt it the beauty behind Hybrid Mode?

Creating a Landing with Antigravity

Proper BiP BRD + Astro + FastAPI chatbot

[!NOTE] Architecture Update: This is now a Hybrid/SSR application. While the UI is React (client-side), the /api/chat route requires a Node.js server runtime to securely handle API keys and streaming. It is no longer a purely static site (Jamstack) in the strict sense, but retains the performance benefits of Astro.

Why we moved to Hybrid: We needed to hide the OPENAI_API_KEY. In a pure Jamstack app, your React code runs in the user’s browser, so any API key used there would be visible to them. By adding a generic Node.js API route (/api/chat), we create a secure “middleman” that holds the key and talks to OpenAI, while the frontend remains fast and static.

About AI API Endpoints

If you need very fast inference, consider groq: https://console.groq.com/keys

FAQ

SelfHostable Links

1. Lynx. But not the Lynx HUGO Theme.

• https://github.com/paoloronco/Lynx

MIT | Lynx is an open-source, self-hosted link manager that helps you gather all your digital touchpoints in a single page, with secure authentication and a fully customizable design.

2. LinkStack. As seen here and here

SelfHosted WebAnalytics

If the cloudflare web analytics is not enough for you:

Every time I read the selfh.st newsletter I find a new web analytics tool trying to replace Umami.

• https://github.com/seuros/kaunta

Privacy-focused analytics engine written in Go

• https://github.com/electerious/Ackee

But imo, Umami should be one of those HomeLab essentials tools to consider.

Because you can also plug Umami to Flask web apps:

Better web Analytics from 0525

Post views distribution

Litlyx Repo

How Litlyx web analytics looks

Litlyx Post Views Distribution

How could this not relate with Pareto?

Powerful Analytics Solution. Setup in 30 seconds. Display all your data on a Simple, AI-powered dashboard.

Fully self-hostable and GDPR compliant. Alternative to Google Analytics, MixPanel, Plausible, Umami & Matomo.

See also:

1. https://github.com/abegehr/chickadee

Simple, privacy-focused web analytics you can self-host on Cloudflare.

2. https://github.com/benvinegar/counterscale

Scalable web analytics you run yourself on Cloudflare

3. Dashflare - https://github.com/jorgelbg/dashflare

🕵🏼‍♀️ Open Source and privacy-focused analytics solution. 📊 Advanced monitoring for your website behind Cloudflare

Link Analytics

Some selfhosted url shorteners will bring you analytics and QR as well.

See https://github.com/738/awesome-url-shortener?tab=readme-ov-file#self-hosting-opensource

Link analytics solutions, like Kutt: https://kutt.it/

You can always check what is the shortened link pointing with: yea, curl can do that!

curl -sIL https://youtu.be/sGUjmyfof4Q?t=568  | grep location:

Configuring Sink Link shortener to work on cloudflare: https://fossengineer.com/sink-url-shortener-setup/

Many more will be coming, like https://github.com/alexcastrodev/shortener

For the QR part, you know that we have few solutions…

1. https://github.com/JAlcocerT/Streamlit_PoC/blob/main/Utils/QR_Gen.py

2. 

There are several open-source self-hostable link shortener tools you can consider, each with its unique features:

1. Shlink: A PHP-based link shortener that supports generating unique short codes or custom slugs. It collects anonymized visit stats and geolocates visitors. It offers a REST API, CLI tools, and Docker support for easy deployment. It uses modern technologies like Mezzio and Symfony and is MIT licensed.[1][3]

2. Kutt: A modern, free, and open-source URL shortener with features like custom domains, custom URLs, password protection, link expiration, private statistics, and an admin dashboard. It has a RESTful API and can be easily installed using Docker Compose.[5]

3. YOURLS: A well-established PHP-based URL shortener with features such as bookmarklets, developer API, detailed stats including referrers and geo-location, and extensibility through dozens of plugins. It is free, open source, and easy to self-host.[10]

4. Shrink.io (shrtn.io): A lightweight, privacy-focused URL shortener using SQLite by default (so no database server is required) and deployable via Docker. It emphasizes ease of use, privacy, and developer-friendly features.[6]

5. Other notable mentions from a curated list include Polr, Lstu, Blink, and goshorly—all open source with various programming languages and features.[4][8]

For ease and feature richness, Shlink, Kutt, and YOURLS are highly recommended starting points for a self-hosted URL shortener.

Among the popular open-source self-hosted link shorteners mentioned, some do offer QR code capabilities either built-in or through extensions/plugins:

1. Shlink: Provides built-in QR code generation for short URLs. When you create a short URL using Shlink, it can generate a corresponding QR code that you can share or embed. This is part of its feature set, making it convenient for print or mobile scanning use cases.[1][2]

2. Kutt: While Kutt does not include native QR code generation in its core, there are third-party tools or browser extensions available that can generate QR codes for any URL, including Kutt short links. Some community forks or plugins might add this feature. Officially, out-of-the-box QR codes are not a core feature.[3]

3. YOURLS: YOURLS does not include native QR code generation by default, but there are several plugins created by the community that add QR code functionality to YOURLS short URLs. This extensibility allows you to add QR generation if needed.[4]

4. Other lesser-known tools like Blink or Polr may have QR features built-in or via plugins, but the top three mentioned mostly rely on either built-in Shlink support or plugins for YOURLS for QR capabilities.[5][6]

To summarize, Shlink stands out as the self-hosted URL shortener with built-in QR code generation.

For YOURLS, you can enable QR codes through community-developed plugins, while Kutt typically requires external QR code tools.

This makes Shlink a strong candidate if QR code functionality is a priority alongside link shortening.