Fairuz.dev

Close

Teman AI: Live Stream Companion

TypeScriptTypeScript
K3sK3s
ContaboContabo VPS
Socket.ioSocket.io
Next.jsNextjs
ReactReact
React QueryReact Query
PrismaPrisma
Midtrans
ArgoArgoCD
Tailwind CSSTailwind

A smart assistant for live streamer, always ready to accompany and interact anytime. It can chat with you, reply to viewers messages in real time, and even appear using your chosen character, making every stream feel more lively.

Background Project

When I was running Kino AI, I often got DMs from viewers asking, “How can I use AI on my live too?” The problem was, hosting Kino AI on a regular VPS wasn’t possible, mainly because of TTS. Kino AI relied on Applio TTS, which required a GPU. That meant I couldn’t just run it on a normal VPS.

I could’ve used third party services like Resemble or TopMediai, but for long streams the cost would quickly pile up. On top of that, I used Zep for memory. Technically, Zep could run for free locally, but self-hosting it in production was way more complicated compared to their hosted service (which again adds cost). To make things worse, the community version wasn’t supported anymore, which made it harder to maintain in the long run.

So, I decided to build Teman AI, a lightweight version of Kino AI. For TTS, instead of relying on GPU heavy models, I used Google Translate’s voice combined with ffmpeg to generate audio on the fly. For memory, I replaced Zep with Flowise’s simple memory, keeping track of just 10 conversations, which I think is good enough.

I also treated this project as a way to learn DevOps from scratch. I wanted to understand how things really work when you build and run everything yourself.

Infrastructure

I use K3s to set up the cluster, and inside it I run ArgoCD. With ArgoCD, I can easily deploy and manage all the services Teman AI needs. Every time I push changes to the DevOps repo, ArgoCD keeps the cluster in sync with the latest configuration, so the deployments stay up to date automatically

I also use ArgoCD Image Updater to automatically track and deploy new container images. By applying a semantic versioning strategy, the updater detects and pulls the latest compatible version based on the tags I define. After pulling, it also updates the DevOps repo manifests to reflect the new image version, ensuring everything stays consistent between the repo and the running cluster.

Secure Access

I use Cloudflare Zero Trust to secure several subdomains that serve the ArgoCD dashboard, Grafana, Flowise, Prometheus, and the staging environment. Any request will be redirected to Cloudflare's identity check before it even touches Traefik, ensuring only authenticated users can reach the services.

Yup, I think that’s all for the infra things. With this setup, I guess I got a proper end to end environment where I can experiment not only with building apps, but also with how they’re deployed, scaled, monitored, and secured in production.


Running Teman AI for Streamer Side

The streamer needs 3 steps to get Teman AI running smoothly:

  1. Open the `live page` in a browser where they can interact with the bot through chat or voice.
  2. Copy the message box URL and paste it into their live studio.
  3. Copy the bot URL and paste it into their live studio.
Flow Streamer
  1. The streamer sends chat or talks through the browser and the input is delivered to the Teman AI WebSocket.
  2. The input is forwarded to the message box, where it gets processed and sent as a request to Flowise.
  3. After the response is received, the UI updates with the result, and the same result is also sent back to the WebSocket (including the emotion the bot should display).
  4. The Teman AI WebSocket forwards the response to the bot and updates the animation based on the detected emotion.
Flow Viewers
  1. Viewers send chat in the livestream, and that chat is captured by the TikTok Live Connector via WebSocket.
  2. The chat is forwarded to the message box, where it gets processed and sent as a request to Flowise.
  3. After the response is received, the UI updates with the result, and the same result is also sent to the WebSocket (including the emotion that the bot should display).
  4. The Teman AI WebSocket forwards the response to the bot and updates the animation based on the detected emotion.
Let's Collaborate!
Fairuz.dev

Is my corner of the web for sharing code, stories, and whatever’s on my mind. I build stuff, break stuff, and sometimes write about it.

Jakarta, Indonesia
© 2025 Fairuz Rahman