DEV Community: TikTool

Make money on TikTok LIVE in 2026: Show your top gifter's image on screen

TikTool — Sat, 28 Mar 2026 02:02:43 +0000

Make money on TikTok LIVE in 2026 by tapping into the easiest psychological trick in streaming: Gamification.

When viewers see that the "Top Gifter" gets their actual profile picture displayed dynamically on the screen, they will spend massive amounts of coins to claim that spot. Giving your biggest fans public recognition is exactly how the top creators make thousands a day.

Here is a super easy Python script for absolute beginners. It connects to the stream via WebSocket and constantly grabs the profile picture URL of whoever sends the biggest gift.

Step 1: Install Python (Crucial Step for Beginners)

Windows (PC): Go to python.org and download the installer. CRITICAL STEP: On the very first screen of the installer, look at the bottom and check the box that says "Add python.exe to PATH" before clicking Install. If you forget this, your computer won't know how to run the code. Once installed, open your Start Menu, type cmd, right-click Command Prompt, and click Run as Administrator.
Mac: Macs come with Python, but it's best to get the latest one. Download the macOS installer from python.org and click through it. Open your Terminal (Cmd + Space -> Terminal). On Mac, you will type python3 instead of python in your terminal.

Step 2: Install WebSockets

In your terminal, you need to install the WebSocket library to talk to the real-time server. Type this and hit Enter:
pip install websockets asyncio
(Mac users: if that throws an error, type pip3 install websockets asyncio)

Step 3: The Code

Create a file on your Desktop called overlay.py and paste this inside:

Python
import asyncio
import websockets
import json

# Change to whoever is live right now
USERNAME = "tiktok" 

async def track_top_gifter():
    # The backbone WebSocket connection for real-time events
    url = f"wss://api.tik.tools/events?uniqueId={USERNAME}&apiKey=TEST_KEY"

    top_gifter = {"username": None, "coins": 0}

    print(f"📡 Connecting to @{USERNAME}...")

    try:
        async with websockets.connect(url) as ws:
            while True:
                message = await ws.recv()
                event = json.loads(message)

                if event.get('type') == 'gift':
                    sender = event['user']['uniqueId']
                    coins = event['diamondCount']
                    avatar = event['user']['profilePictureUrl']

                    if coins > top_gifter["coins"]:
                        top_gifter["coins"] = coins
                        top_gifter["username"] = sender
                        print(f"👑 NEW TOP GIFTER: {sender} ({coins} coins)")
                        print(f"🖼️ IMAGE URL FOR OBS: {avatar}\n")

    except Exception as e:
        print("\n❌ Connection closed. Read the server logs to see what access you are missing:")
        print(e)

if __name__ == "__main__":
    asyncio.run(track_top_gifter())

To run it:

Type cd Desktop in your terminal, then type python overlay.py (or python3 overlay.py on Mac). You can tie these outputted image URLs directly into an OBS browser source.

Watch the gift battles begin!

Build a TikTok LIVE Stream Overlay for OBS with Node.js

TikTool — Mon, 16 Mar 2026 00:03:31 +0000

Custom stream overlays that react to real-time TikTok events - gifts, chat, viewer counts. Here's how to build one with Node.js and a transparent HTML page as an OBS Browser Source.

Architecture

TikTok LIVE → tiktok-live-api (WebSocket) → Node.js Server → Local WebSocket → OBS Browser Source

Step 1: Set Up

mkdir tiktok-overlay && cd tiktok-overlay
npm init -y
npm install tiktok-live-api ws express
mkdir public

Step 2: Server

Create server.mjs:

// server.mjs
import { TikTokLive } from 'tiktok-live-api';
import { WebSocketServer } from 'ws';
import express from 'express';
import { fileURLToPath } from 'url';
import { dirname, join } from 'path';

const __dirname = dirname(fileURLToPath(import.meta.url));
const app = express();
app.use(express.static(join(__dirname, 'public')));
app.listen(3000, () => console.log('Overlay at http://localhost:3000'));

const wss = new WebSocketServer({ port: 8080 });
const client = new TikTokLive('USERNAME_HERE', {
  apiKey: 'YOUR_API_KEY'
});

// Forward all TikTok events to overlay via local WebSocket
client.on('event', (event) => {
  const data = JSON.stringify(event);
  for (const ws of wss.clients) {
    ws.send(data);
  }
});

client.on('connected', () => console.log('✅ Connected to TikTok'));

client.on('chat', (e) => {
  console.log(`💬 ${e.user.uniqueId}: ${e.comment}`);
});

client.on('gift', (e) => {
  console.log(`🎁 ${e.user.uniqueId} sent ${e.giftName} (${e.diamondCount} 💎)`);
});

client.connect();

Step 3: Overlay HTML

Create public/index.html:

<!DOCTYPE html>
<html>
<head>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      background: transparent;
      font-family: 'Segoe UI', sans-serif;
      color: white;
      overflow: hidden;
    }
    #alerts {
      position: fixed; top: 20px; right: 20px;
      width: 350px;
    }
    .alert {
      background: rgba(0,0,0,0.8);
      border-left: 4px solid #ff0050;
      padding: 12px 16px;
      margin-bottom: 8px;
      border-radius: 8px;
      animation: slideIn 0.3s ease-out, fadeOut 0.5s ease-in 4.5s;
      animation-fill-mode: forwards;
    }
    .alert.gift { border-color: #ffd700; }
    .alert .user { color: #ff0050; font-weight: bold; }
    .alert .diamonds { color: #ffd700; }
    #viewers {
      position: fixed; bottom: 20px; right: 20px;
      background: rgba(0,0,0,0.8);
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 18px;
    }
    @keyframes slideIn {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    @keyframes fadeOut {
      to { opacity: 0; transform: translateY(-20px); }
    }
  </style>
</head>
<body>
  <div id="alerts"></div>
  <div id="viewers">👀 0</div>
  <script>
    const ws = new WebSocket('ws://localhost:8080');
    const alerts = document.getElementById('alerts');

    ws.onmessage = (e) => {
      const msg = JSON.parse(e.data);
      const d = msg.data || {};
      const user = d.user?.uniqueId || '';

      switch (msg.event) {
        case 'chat':
          addAlert(
            `<span class="user">@${user}</span>: ${d.comment}`
          );
          break;
        case 'gift':
          addAlert(
            `<span class="user">@${user}</span> sent ${d.giftName} ` +
            `<span class="diamonds">(${d.diamondCount} 💎)</span>`,
            'gift'
          );
          break;
        case 'follow':
          addAlert(
            `<span class="user">@${user}</span> followed! ➕`
          );
          break;
        case 'roomUserSeq':
          document.getElementById('viewers').textContent =
            `👀 ${d.viewerCount}`;
          break;
      }
    };

    function addAlert(html, type = '') {
      const div = document.createElement('div');
      div.className = `alert ${type}`;
      div.innerHTML = html;
      alerts.prepend(div);
      setTimeout(() => div.remove(), 5000);
      while (alerts.children.length > 5)
        alerts.lastChild.remove();
    }
  </script>
</body>
</html>

Step 4: Run It

node server.mjs

Open http://localhost:3000 in your browser - you'll see the overlay with alerts sliding in from the right.

Step 5: Add to OBS

In OBS, add a Browser Source
Set URL to http://localhost:3000
Set size to 1920×1080 (or match your canvas)
Check "Shutdown source when not visible"
The background is transparent - alerts overlay on top of your stream

Chat shows as red-bordered alerts
Gifts show as gold-bordered alerts with diamond values
Viewer count stays in the bottom-right corner

How It Works

The tiktok-live-api package connects to TikTok via a managed WebSocket API. Your server receives typed JSON events and forwards them to the browser overlay via a local WebSocket. The overlay renders alerts with CSS animations.

This was tested live on gbnews - chat messages, gifts, and viewer counts all flow through in real-time.

Links

Free tier: 50 requests/day, 1 WebSocket connection - enough to build and test your overlay.

Track TikTok LIVE Gifts in Real-Time with Python

TikTool — Mon, 16 Mar 2026 00:02:16 +0000

TikTok LIVE gifts are a massive economy - creators earn real money from virtual gifts. Here's how to track every gift on any live stream with Python, building a real-time diamond leaderboard.

I tested this on a live stream just now. Real output included below.

Install

pip install tiktok-live-api

Get your free API key at tik.tools (no credit card required).

The Code

# gift-tracker.py - run with: python gift-tracker.py
from tiktok_live_api import TikTokLive

client = TikTokLive("USERNAME_HERE", api_key="YOUR_API_KEY")
gifts = {}
total_diamonds = 0

@client.on("connected")
def on_connected(event):
    print(f"✅ Connected to @{event['uniqueId']}")

@client.on("gift")
def on_gift(event):
    global total_diamonds
    user = event["user"]["uniqueId"]
    name = event["giftName"]
    diamonds = event.get("diamondCount", 0)
    count = event.get("repeatCount", 1)

    total_value = diamonds * count
    total_diamonds += total_value
    gifts[user] = gifts.get(user, 0) + total_value

    print(f"🎁 {user} sent {count}x {name} ({total_value} 💎)")
    print(f"   Stream total: {total_diamonds} 💎")

    # Show leaderboard
    top5 = sorted(gifts.items(), key=lambda x: -x[1])[:5]
    print("\n🏆 Leaderboard:")
    for i, (name, d) in enumerate(top5):
        print(f"  {i+1}. @{name} - {d} 💎")
    print()

@client.on("chat")
def on_chat(event):
    print(f"💬 {event['user']['uniqueId']}: {event['comment']}")

@client.on("roomUserSeq")
def on_viewers(event):
    print(f"👀 {event['viewerCount']} viewers watching")

client.run()

Replace USERNAME_HERE with any TikTok username that's currently live, and YOUR_API_KEY with your free key.

Real Output

I ran this on a live stream. Actual terminal output:

✅ Connected to @gbnews
💬 damasiotis: Tha to skefto
💬 lydosfp: MPAOU MPAOU MONEY GUNS GALAXIES UNI KOLLHTA
💬 andrianniwww: Ετσι απλά το έστειλα μην χάσουμε το χ2
👀 18 viewers watching
🎁 andrianniwww sent 1x Hand Heart (100 💎)
   Stream total: 100 💎

🏆 Leaderboard:
  1. @andrianniwww - 100 💎

Every gift shows instantly with diamond values, and the leaderboard updates live.

Available Events

Event	Key Fields
`chat`	`event['user']['uniqueId']`, `event['comment']`
`gift`	`event['user']['uniqueId']`, `event['giftName']`, `event['diamondCount']`
`like`	`event['user']['uniqueId']`, `event['likeCount']`
`follow`	`event['user']['uniqueId']`
`member`	`event['user']['uniqueId']` (viewer joined)
`roomUserSeq`	`event['viewerCount']`

Async Usage

For FastAPI, Django Channels, or any async framework:

import asyncio
from tiktok_live_api import TikTokLive

async def main():
    client = TikTokLive("streamer_username", api_key="YOUR_API_KEY")

    @client.on("gift")
    async def on_gift(event):
        print(f"🎁 {event['user']['uniqueId']} sent {event['giftName']}")

    await client.connect()

asyncio.run(main())

What Can You Build?

Discord webhooks - alert your server about big gifts
OBS overlays - display leaderboard on stream
Database logging - store gift history for analytics
AI live captions - real-time speech-to-text with translation (unique to this SDK)

Also Available

Node.js/TypeScript: npm install tiktok-live-api (npm)
Any language: Raw WebSocket: wss://api.tik.tools?uniqueId=USERNAME&apiKey=KEY
Full docs: tik.tools/docs

Free tier: 50 requests/day - enough to build and test.

Connect to Any TikTok LIVE Stream in 5 Minutes - Real-time Events with Node.js

TikTool — Sun, 15 Mar 2026 23:57:59 +0000

Want to build something on top of TikTok LIVE? Track gifts, monitor chat, count viewers, trigger alerts? Here's how to connect to any live stream and receive every event in real-time - in 5 minutes, zero reverse engineering.

I just tested this on a live stream 10 minutes ago. It works.

Install

npm install tiktok-live-api

Get a Free API Key

Go to tik.tools, sign up (no credit card), copy your API key.

Connect to a Live Stream

// demo.mjs - run with: node demo.mjs
import { TikTokLive } from 'tiktok-live-api';

const client = new TikTokLive('gbnews', {
  apiKey: 'YOUR_API_KEY'
});

client.on('chat', (e) => {
  console.log(`💬 ${e.user.uniqueId}: ${e.comment}`);
});

client.on('gift', (e) => {
  console.log(`🎁 ${e.user.uniqueId} sent ${e.giftName} (${e.diamondCount} 💎)`);
});

client.on('like', (e) => {
  console.log(`❤️ ${e.user.uniqueId} liked × ${e.likeCount}`);
});

client.on('member', (e) => {
  console.log(`👋 ${e.user.uniqueId} joined`);
});

client.on('roomUserSeq', (e) => {
  console.log(`👀 ${e.viewerCount} viewers watching`);
});

client.on('connected', () => console.log('✅ Connected!'));

client.connect();

Replace gbnews with any TikTok username that's currently live. That's it - you'll see every event in your terminal.

What This Actually Outputs

I just ran this on a live Greek stream. Real output:

✅ Connected!
💬 andrianniwww: Έχω όρεξη να τα χαλάω
💬 _tzotzo._: Analogws, min fame kaneno 10-20k
💬 damasiotis: Telione nistazo
👀 16 viewers watching

Every chat message, gift, like, follow, viewer join - all in real-time via WebSocket.

Build a Gift Tracker

Now let's make it useful. This tracks every gift, maintains a running diamond total, and shows a live leaderboard:

// gift-tracker.mjs
import { TikTokLive } from 'tiktok-live-api';

const client = new TikTokLive('USERNAME_HERE', {
  apiKey: 'YOUR_API_KEY'
});

const leaderboard = new Map();
let totalDiamonds = 0;

client.on('gift', (e) => {
  const user = e.user.uniqueId;
  const diamonds = e.diamondCount || 0;

  totalDiamonds += diamonds;
  leaderboard.set(user, (leaderboard.get(user) || 0) + diamonds);

  console.log(`🎁 ${user} sent ${e.giftName} (${diamonds} 💎)`);
  console.log(`   Stream total: ${totalDiamonds} 💎`);

  // Show top 5
  const top = [...leaderboard.entries()]
    .sort(([,a], [,b]) => b - a)
    .slice(0, 5);
  console.log('\n🏆 Leaderboard:');
  top.forEach(([name, d], i) => {
    console.log(`  ${i + 1}. @${name} - ${d} 💎`);
  });
  console.log();
});

client.on('connected', () => console.log('✅ Tracking gifts...'));
client.connect();

Available Events

Event	What you get
`chat`	`e.user.uniqueId`, `e.comment`
`gift`	`e.user.uniqueId`, `e.giftName`, `e.diamondCount`
`like`	`e.user.uniqueId`, `e.likeCount`
`follow`	`e.user.uniqueId`
`member`	`e.user.uniqueId` (viewer joined)
`roomUserSeq`	`e.viewerCount`
`battle`	Battle scores and teams
`connected`	Connection confirmed

All events are fully typed in TypeScript - your IDE autocompletes every field.

What Can You Build With This?

OBS stream overlays - forward events to a browser source via local WebSocket
Discord webhooks - alert your server about big gifts or milestones
Analytics dashboards - track engagement trends across streams
AI live captions - real-time speech-to-text with translation (unique to this SDK)
Automated moderation - flag certain chat patterns

Also Available

Python: pip install tiktok-live-api (PyPI)
Any language: Raw WebSocket: wss://api.tik.tools?uniqueId=USERNAME&apiKey=KEY
Docs: tik.tools/docs

Free Sandbox tier: 50 requests/day, 1 WebSocket connection - enough to build and test.