Willkommen bei PupCid's Little TikTok Helper

Diese Dokumentation hilft dir, das Tool optimal zu nutzen und alle Features kennenzulernen.

Was ist ltth.app?

PupCid's Little TikTok Helper ist ein professionelles Open-Source-Tool für TikTok LIVE-Streaming mit umfangreichen Features für Content-Creator. Das Tool bietet eine vollständige Integration von TikTok LIVE-Events in OBS Studio mit Overlays, Alerts, Text-to-Speech, Soundboard und Event-Automatisierung.

Hauptfunktionen

• Echtzeit-TikTok LIVE Integration: Empfange Gifts, Comments, Follows, Shares und Likes in Echtzeit
• Text-to-Speech: 75+ TikTok-Stimmen & 30+ Google Cloud-Stimmen
• Alert-System: Anpassbare Alerts für alle Event-Typen
• Soundboard: 100.000+ Sounds via MyInstants-Integration
• Event-Automation (Flows): Wenn-Dann-Automatisierungen ohne Code
• OBS-Integration: Transparentes Full-HD-Overlay für Streams
• Plugin-System: 7+ vorinstallierte Plugins, erweiterbar
• 100% Lokal & Open Source: Keine Cloud, keine Login-Daten erforderlich

Für wen ist das Tool?

• TikTok LIVE Streamer - Professionelle Overlays und Alerts
• Content Creator - Event-Automatisierung und Interaktivität
• VRChat Streamer - OSC-Integration für Avatar-Steuerung
• Multi-Guest Streamer - VDO.Ninja Integration für Interviews
• Entwickler - Modulares Plugin-System zum Erweitern

Installation & Setup

Die Installation von PupCid's Little TikTok Helper ist einfach und schnell.

Systemanforderungen

• Betriebssystem: Windows 10/11 (64-bit)
• Node.js: 18.0.0 - 23.x (wird automatisch installiert)
• RAM: Mindestens 4 GB empfohlen
• Festplatte: 500 MB freier Speicherplatz

Installation

1. Download: Lade setup.exe von ltth.app/setup.exe herunter
2. Installation ausführen: Doppelklick auf setup.exe und folge dem Installations-Assistenten
3. Node.js: Wird automatisch mitinstalliert falls nicht vorhanden
4. Server starten: Das Tool startet automatisch nach der Installation
5. Dashboard öffnen: Browser öffnet sich automatisch auf http://localhost:3000

Manuelle Installation (für Entwickler)

# Repository klonen
git clone https://github.com/Loggableim/ltth.app.git
cd ltth.app

# Dependencies installieren
npm install

# Server starten
node launch.js

# Oder mit Launcher-Skript:
# Windows: start.bat
# Linux/macOS: ./start.sh

Quick Start

In 3 Schritten zum professionellen TikTok LIVE Stream!

Schritt 1: Mit TikTok LIVE verbinden

1. Öffne das Dashboard auf http://localhost:3000
2. Gib deinen TikTok-Username ein (ohne @)
3. Klicke auf "Connect to TikTok LIVE"
4. Warte auf grünen Status "Connected"

Wichtig: Du musst bereits LIVE sein auf TikTok, damit die Verbindung funktioniert.

Schritt 2: OBS einrichten

1. Öffne OBS Studio
2. Füge eine neue Browser-Source hinzu
3. URL: http://localhost:3000/overlay
4. Breite: 1920, Höhe: 1080
5. Aktiviere "Shutdown source when not visible" für Performance

Schritt 3: Features konfigurieren

• TTS: Dashboard → TTS → Stimme auswählen → "Auto-TTS für Chat" aktivieren
• Alerts: Dashboard → Alerts → Event-Typ auswählen → Sound und Text konfigurieren
• Goals: Dashboard → Goals → Ziel setzen → Style anpassen
• Flows: Dashboard → Flows → "New Flow" → Trigger und Actions definieren

Fertig! 🎉 Dein Stream ist jetzt professionell aufgesetzt.

Konfiguration

Passe ltth.app an deine Bedürfnisse an mit umfangreichen Konfigurationsoptionen.

Dashboard-Zugriff

Nach dem Start öffnet sich das Dashboard automatisch unter:

http://localhost:3000

Grundeinstellungen

• TikTok Username: Dein TikTok-Benutzername (ohne @)
• Sprache: Deutsch oder Englisch
• Theme: Hell, Dunkel oder System
• Server Port: Standard 3000 (änderbar)

Profile

Erstelle mehrere Profile für verschiedene Streaming-Setups:

• Verschiedene TikTok-Accounts
• Unterschiedliche Alert-Konfigurationen
• Separate Soundboards
• Individuelle Flow-Automationen

Backup & Restore

Sichere deine Konfiguration regelmäßig:

1. Dashboard → Settings → Backup
2. Klick auf "Create Backup"
3. ZIP-Datei wird heruntergeladen
4. Zum Wiederherstellen: "Restore from Backup"

TikTok LIVE Verbindung

Echtzeit-Verbindung zu deinem TikTok LIVE-Stream ohne Login-Daten.

Verbindung herstellen

1. Öffne Dashboard auf http://localhost:3000
2. Gib deinen TikTok-Username ein (ohne @)
3. Klicke "Connect to TikTok LIVE"
4. Du musst bereits LIVE sein auf TikTok
5. Warte auf grünen Status "Connected"

Empfangene Events

• Gifts: Geschenke mit Coins, Combo-Tracking, Gift-Katalog
• Chat: Nachrichten mit Profilbildern und Badges
• Follows: Neue Follower mit Follow-Role-Tracking
• Shares: Stream-Shares mit Nutzerinformationen
• Likes: Like-Events mit Like-Counts
• Subscriptions: Subscriber mit Tier-Levels

Event-Anzeige

Alle Events werden in Echtzeit angezeigt:

• Event Log: Chronologische Liste aller Events
• Statistics: Live-Statistiken (Total Coins, Followers, etc.)
• Top Gifters: Leaderboard der Top-Spender

Auto-Reconnect

Bei Verbindungsabbruch erfolgt automatischer Reconnect:

• Maximale Reconnect-Versuche: 10
• Wartezeit zwischen Versuchen: 5 Sekunden
• Konfigurierbar in Settings

Troubleshooting

Verbindung schlägt fehl:

• Stelle sicher, dass du bereits LIVE bist
• Username muss korrekt sein (ohne @)
• Prüfe Firewall/Antivirus-Einstellungen
• Versuche es nach 30 Sekunden erneut

Text-to-Speech (TTS)

Professionelles TTS-System mit über 100 Stimmen für Chat-Nachrichten und Alerts.

Verfügbare Stimmen

TikTok Voices (Kostenlos)

75+ TikTok-Stimmen ohne API-Key:

• Englisch: US Female, US Male, UK Female, Australian, etc.
• Deutsch: Männlich und Weiblich
• Character Voices: Ghostface, C-3PO, Stitch, Chewbacca
• Singing Voices: Singing Female, Singing Male

Google Cloud Voices (Premium)

30+ Google Cloud-Stimmen mit höchster Qualität (API-Key erforderlich)

Auto-TTS für Chat

Automatisches Vorlesen von Chat-Nachrichten:

1. Dashboard → TTS → "Auto-TTS für Chat" aktivieren
2. Standard-Stimme auswählen
3. Optional: Blacklist für Wörter/User einrichten
4. Lautstärke und Geschwindigkeit anpassen

User Voice Mapping

Weise bestimmten Usern eigene Stimmen zu:

UserA → Ghostface (Horror-Stimme)
UserB → German Female
UserC → Singing Voice

Einstellungen

• Lautstärke: 0% - 200% (Standard: 100%)
• Geschwindigkeit: 0.5x - 2.0x (Standard: 1.0x)
• Max. Länge: Überspringe Nachrichten über X Zeichen
• Verzögerung: Pause zwischen TTS-Nachrichten

Blacklist

Blockiere Wörter oder User:

• Wort-Blacklist: Nachrichten mit bestimmten Wörtern überspringen
• User-Blacklist: Bestimmte User komplett ignorieren

TTS in Flows

Verwende TTS in Event-Automationen:

Trigger: Gift (Rose)
Action: TTS "Danke {username} für die Rose!"

Alert-System

Visuelle und Audio-Benachrichtigungen für TikTok LIVE-Events in deinem OBS-Overlay.

Alert-Typen

• Gift Alerts: Geschenk-Benachrichtigungen
• Follow Alerts: Neue Follower
• Share Alerts: Stream-Shares
• Subscription Alerts: Neue Subscriber
• Like Alerts: Like-Meilensteine (z.B. jede 100 Likes)

Alert-Konfiguration

Jeder Alert kann individuell angepasst werden:

• Text: Nachricht mit Variablen wie {username}, {giftName}, {coins}
• Sound: MP3/WAV-Datei oder MyInstants-Sound
• Dauer: Anzeigedauer in Sekunden
• Animation: Slide, Fade, Bounce, etc.
• Bild/GIF: Optional Custom Graphics

Template-Variablen

Verwende Platzhalter in Alert-Texten:

{username} - Benutzername
{giftName} - Name des Geschenks
{coins} - Coin-Wert
{count} - Combo-Anzahl
{total} - Gesamt-Coins vom User
{likeCount} - Aktuelle Like-Anzahl

Beispiel-Konfigurationen

Gift Alert:

Text: "Danke {username} für {giftName}!"
Sound: celebration.mp3
Dauer: 5 Sekunden
Animation: Slide from bottom

Follow Alert:

Text: "Willkommen {username}! 🎉"
Sound: welcome.mp3
Dauer: 4 Sekunden
Animation: Fade in

Alert-Queue

Mehrere Alerts werden nacheinander angezeigt:

• Queue-Größe: 50 Alerts (Standard)
• Priorität: Subs > Gifts > Follows > Shares > Likes
• Ältere Alerts werden verworfen bei Overflow

Test-Funktion

Teste Alerts vor dem Stream:

1. Dashboard → Alerts
2. Event-Typ auswählen
3. "Test Alert" klicken
4. Alert erscheint im OBS-Overlay

Soundboard

100.000+ Sounds via MyInstants-Integration plus eigene Upload-Möglichkeit.

MyInstants-Integration

Zugriff auf riesige Sound-Library:

1. Dashboard → Soundboard → MyInstants
2. Suchbegriff eingeben (z.B. "applause", "laugh")
3. Sound-Vorschau mit Play-Button
4. "Add to Soundboard" zum Importieren

Custom Upload

Eigene Sounds hochladen:

• Formate: MP3, WAV, OGG
• Max. Größe: 10 MB pro Datei
• Empfohlen: 1-30 Sekunden Dauer
• Qualität: 128-320 kbps (MP3)

Gift-to-Sound Mapping

Sounds automatisch bei Gifts abspielen:

Rose → romantic-music.mp3
Lion → lion-roar.mp3
Galaxy → space-sound.mp3

Event-Sounds

Sounds für verschiedene Events:

• Follow Sound: Bei neuem Follower
• Subscribe Sound: Bei Subscriber
• Share Sound: Bei Stream-Share
• Like Milestone: Bei Like-Schwellenwert (z.B. jede 100)

Sound-Kategorien

Organisiere Sounds in Kategorien:

• Alerts - Benachrichtigungen
• Reactions - Reaktionen
• Memes - Lustige Sounds
• Music - Musikclips
• Effects - Soundeffekte
• Custom - Eigene Uploads

Favoriten

Markiere häufig genutzte Sounds als Favoriten für schnellen Zugriff.

Lautstärke-Kontrolle

• Master-Volume: 0% - 200% für alle Sounds
• Per-Sound-Volume: Individuelle Lautstärke
• Volume Ducking: Reduziere Sound während TTS

Event-Automation (Flows)

"Wenn-Dann"-Automatisierungen ohne Code erstellen.

Flow-Komponenten

• Trigger: Event das den Flow startet (Gift, Chat, Follow, etc.)
• Conditions: Optionale Bedingungen (z.B. coins >= 100)
• Actions: Was ausgeführt wird (TTS, Alert, OBS, OSC, etc.)

Verfügbare Trigger

• Gift: Geschenk empfangen
• Chat: Chat-Nachricht
• Follow: Neuer Follower
• Share: Stream geteilt
• Subscribe: Neuer Subscriber
• Like: Likes empfangen

Bedingungen (Conditions)

Operatoren für Bedingungen:

== (gleich)
!= (ungleich)
> (größer als)
< (kleiner als)
>= (größer gleich)
<= (kleiner gleich)
contains (enthält)
startsWith (beginnt mit)
endsWith (endet mit)

Verfügbare Actions

• TTS: Text-to-Speech abspielen
• Alert: Alert anzeigen
• Sound: Sound abspielen
• OBS Scene: OBS-Szene wechseln
• OBS Source: Source ein/ausblenden
• VRChat OSC: Avatar-Steuerung
• HTTP Request: Externe API aufrufen
• Delay: Warten (für Action-Ketten)
• Goal Increment: Ziel-Fortschritt erhöhen

Beispiel-Flows

Rose Gift → TTS + Scene Change

Trigger: Gift
Condition: giftName == "Rose"
Actions:
  1. TTS: "Danke {username} für die Rose!"
  2. OBS Scene: "Cam2"
  3. Delay: 5 Sekunden
  4. OBS Scene: "Main"

High Value Gift → Special Alert

Trigger: Gift
Condition: coins >= 1000
Actions:
  1. Alert: "🎉 WOW! {username} → {giftName}!"
  2. Sound: celebration.mp3
  3. VRChat OSC: Celebrate animation

Chat Command → Action

Trigger: Chat
Condition: message == "!dance"
Actions:
  1. VRChat OSC: Dance animation
  2. TTS: "Let's dance!"

New Follower → Welcome

Trigger: Follow
Actions:
  1. TTS: "Willkommen {username}!"
  2. Alert: "Neuer Follower: {username}"
  3. Goal: Followers +1

Flow-Verwaltung

• Enable/Disable: Flows ein/ausschalten
• Test Flow: Flow testen ohne Live zu sein
• Export/Import: Flows als JSON sichern/teilen
• Priorität: Flow-Reihenfolge festlegen

Best Practices

• Teste Flows vor dem Stream
• Verwende beschreibende Namen
• Halte Conditions einfach
• Nutze Delays bei OBS-Szenen-Wechseln
• Verwende Variablen für dynamische Texte

Goals & Overlays

Fortschrittsbalken für Likes, Follower, Subscriptions und Coins mit OBS-Integration.

Goal-Typen

• Likes Goal: Ziel-Likes mit Echtzeit-Tracking
• Followers Goal: Follower-Ziel
• Subscriptions Goal: Subscriber-Ziel
• Coins Goal: Coin-Spenden-Ziel
• Custom Goal: Benutzerdefinierte Ziele (manuell)

Konfiguration

Pro Goal einstellbar:

• Ziel-Wert: Anzahl zu erreichender Punkte
• Aktueller Wert: Auto-Update oder manuell
• Modus: Add, Set, Increment
• Display-Text: Template mit {current}, {target}, {percentage}

Styling

Passe Progress Bars an:

• Farben: Background, Progress, Text
• Gradients: Linear-Gradient-Unterstützung
• Größe: Breite, Höhe, Border-Radius
• Animationen: Fill, Pulse, Shimmer

OBS Browser Source

Zeige Goals in OBS:

URL: http://localhost:3000/overlay/goals
Breite: 1920
Höhe: 200
FPS: 30

Milestone-Benachrichtigungen

Alerts bei bestimmten Fortschritts-Prozenten:

25% → "Viertel geschafft!"
50% → "Halbzeit!"
75% → "Fast da!"
100% → "🎉 Ziel erreicht!"

Goal-Modi

• Add: Wert zum aktuellen Fortschritt addieren
• Set: Fortschritt auf bestimmten Wert setzen
• Increment: Um 1 erhöhen

Auto-Update

Goals automatisch aktualisieren via Flows:

Trigger: Follow
Action: Goal Increment: Followers +1

Reset-Optionen

• Manueller Reset: Jederzeit zurücksetzen
• Daily Reset: Täglich um Mitternacht
• Stream Start: Bei Stream-Beginn
• Stream End: Bei Stream-Ende

OBS Studio Integration

Vollständige OBS-Kontrolle mit WebSocket v5 für Szenen, Sources und Overlays.

Voraussetzungen

• OBS Studio 28.0+ (WebSocket v5 integriert)
• WebSocket aktiviert: Tools → WebSocket Server Settings
• Port: 4455 (Standard)

Verbindung einrichten

1. OBS öffnen: Tools → WebSocket Server Settings
2. Enable WebSocket Server aktivieren
3. Server Port: 4455
4. Passwort setzen (optional aber empfohlen)
5. ltth.app: Dashboard → Settings → OBS Integration
6. WebSocket URL: ws://localhost:4455
7. Passwort eingeben (falls gesetzt)
8. Connect klicken

Browser Source Overlays

Haupt-Overlay (Alle Features):

URL: http://localhost:3000/overlay
Breite: 1920
Höhe: 1080
FPS: 30
☑ Shutdown source when not visible

Einzelne Overlays:

• Alerts: /overlay/alerts (1920x300)
• Goals: /overlay/goals (1920x200)
• Leaderboard: /overlay/leaderboard (400x600)
• Chat: /overlay/chat (400x800)

Szenen-Steuerung

Wechsle OBS-Szenen automatisch:

Trigger: Gift (coins >= 1000)
Actions:
  1. OBS Scene: "Celebration"
  2. Delay: 5 Sekunden
  3. OBS Scene: "Main"

Source-Kontrolle

Zeige/Verstecke Sources:

Trigger: Gift (Rose)
Actions:
  1. OBS Source: Show "Heart Overlay"
  2. Delay: 3 Sekunden
  3. OBS Source: Hide "Heart Overlay"

Performance-Tipps

• FPS: 30 statt 60 für Browser Sources
• "Shutdown when not visible" aktivieren
• "Refresh when scene active" aktivieren
• Hardware-Beschleunigung in OBS aktivieren

VRChat OSC Integration

Steuere deinen VRChat-Avatar mit TikTok LIVE-Events über OSC-Protokoll.

VRChat OSC aktivieren

1. VRChat starten
2. Action Menu öffnen (R-Taste)
3. Options → OSC
4. Enable OSC aktivieren
5. Port notieren (Standard: 9000)

ltth.app Konfiguration

1. Dashboard → Settings → VRChat OSC
2. OSC IP: 127.0.0.1 (localhost)
3. OSC Port: 9000
4. Enable VRChat OSC Integration
5. Connect klicken

Avatar-Parameter

Häufige Avatar-Parameter:

• Wave: Winken-Geste (bool/int)
• Dance: Tanz-Animation (bool/int)
• Celebrate: Freude-Animation (bool)
• Hearts: Herz-Partikel spawnen (bool/trigger)
• Confetti: Konfetti-Effekt (bool/trigger)

Gift-to-Gesture Mapping

Gifts triggern Avatar-Aktionen:

Rose → Hearts-Partikel
Lion → Dance-Animation
Galaxy → Celebrate + Fireworks

Beispiel-Flows

Rose Gift → Hearts

Trigger: Gift
Condition: giftName == "Rose"
Actions:
  1. VRChat OSC: /avatar/parameters/Hearts = true
  2. Delay: 2 Sekunden
  3. VRChat OSC: /avatar/parameters/Hearts = false

Follower → Wave

Trigger: Follow
Actions:
  1. VRChat OSC: /avatar/parameters/Wave = true
  2. TTS: "Willkommen {username}!"
  3. Delay: 2 Sekunden
  4. VRChat OSC: /avatar/parameters/Wave = false

Plugin-API

Erstelle eigene Plugins für ltth.app mit der Plugin-API.

Plugin-Struktur

plugins/my-plugin/
├── plugin.json       # Metadata
└── main.js           # Plugin-Klasse

Beispiel-Plugin

class MyPlugin {
    constructor(api) {
        this.api = api;
    }

    async init() {
        // Express-Route registrieren
        this.api.registerRoute('GET', '/status', (req, res) => {
            res.json({ status: 'ok' });
        });

        // TikTok-Event abonnieren
        this.api.registerTikTokEvent('gift', async (data) => {
            this.api.log(`Gift: ${data.giftName} from ${data.username}`);
        });
    }

    async destroy() {
        this.api.log('Plugin stopped');
    }
}

module.exports = MyPlugin;

Vollständige Plugin-Dokumentation: Plugin-System

Troubleshooting

TikTok-Verbindung schlägt fehl

• Stelle sicher, dass du bereits LIVE bist auf TikTok
• Username muss korrekt sein (ohne @)
• Firewall/Antivirus könnte Verbindung blockieren
• Port 3000 muss verfügbar sein

Overlay wird nicht angezeigt

• Überprüfe die Browser-Source-URL: http://localhost:3000/overlay
• Breite: 1920, Höhe: 1080
• OBS muss auf demselben PC laufen
• Server muss laufen (localhost:3000 erreichbar)

Weitere Hilfe

Besuche das FAQ & Troubleshooting Wiki oder öffne ein GitHub Issue.