Skip to content
Streaming Setup

Stream with overlays and live captions.

Add a teleprompter overlay for yourself, live AI captions for your viewers, and auto-configure OBS in one click.

1

Overlay Types

VoxiPrompter provides two overlay types for streaming. Each is a separate browser source you add to your OBS scene.

Teleprompter Overlay

Shows your script to you (the streamer) while you speak. Customize it with the Overlay Teleprompter visual profile to match your scene aesthetics.

  • Perfect for live streaming, presentations, and interviews
  • Only visible to you in OBS — not shown to viewers
  • Font size, colors, and transparency fully customizable

Subtitle Overlay

Shows live AI-generated captions to your viewers in real time. Customize it with the Overlay Subtitle visual profile.

  • Displays live captions from VoxiPrompter's AI speech recognition
  • Visible to all viewers on stream
  • Latest speech chunk replaces previous — keeps your scene clean
  • Independent styling from the teleprompter overlay
2

Setting Up in OBS

Follow these steps to add overlay Browser Sources to your OBS scene:

  1. Step 1: Open VoxiPrompter and click the Streaming tab in the sidebar.
  2. Step 2: Copy the overlay URL you want (teleprompter or subtitle).
  3. Step 3: In OBS, go to Sources → click the + button → select Browser Source.
  4. Step 4: Paste the URL into the URL field. Set the width and height to match your canvas size (e.g., 1920×1080).
  5. Step 5: Position the source in your scene using the scene editor.
  6. Step 6: Start listening in VoxiPrompter. The overlay updates automatically as you speak.
3

One-Click OBS Setup

VoxiPrompter can automatically configure OBS for you via WebSocket connection. Instead of manually adding sources, let VoxiPrompter do it:

  1. Step 1: In OBS, go to Tools → WebSocket Server Settings and enable it. Note the host, port, and password.
  2. Step 2: In VoxiPrompter's Streaming tab, enter your OBS WebSocket host, port, and password.
  3. Step 3: Click Test Connection to verify the connection works.
  4. Step 4: Click One-Click Setup. VoxiPrompter will automatically create and position both Browser Sources in your active scene.

Note: One-Click Setup creates sources in your currently active scene. You can move them to other scenes or disable them as needed.

4

OBS Dock

Add VoxiPrompter as a browser dock panel inside OBS for full remote control without leaving your streaming layout. The dock gives you the same controls as the mobile remote — start/stop, navigation, visual profiles, and AI tuning — all embedded directly in OBS.

Setup:

  1. In OBS, go to Docks → Custom Browser Docks
  2. Name: VoxiPrompter
  3. URL: Copy the dock URL from VoxiPrompter's Streaming tab
  4. Click Apply

What's in the dock?

  • Playback controls — Start/stop listening, reset cursor, navigate forward/back 10 words
  • Live monitor — See the current word position, progress bar, and live transcript
  • Visual profile selector — Switch between Desktop, Mobile, Overlay Teleprompter, and Overlay Subtitle profiles with icon-only SVG buttons
  • Audio & AI tuning — Adjust Speaking Pace, Accuracy Threshold, Look Ahead/Behind, and auto-scroll speed
  • Script management — Load scripts and view character count

Tip: The dock is designed for OBS's narrow panel layout with larger touch targets, OBS-dark theme colors, and compact spacing. It shares the same underlying code as the mobile remote, so any improvement to one automatically applies to the other.

5

Visual Profile Customization

Both Overlay Teleprompter and Overlay Subtitle profiles are configured in the Visual Controls tab. Each has independent settings:

  • • Font size — Adjust for readability from your viewing distance
  • • Text color — Choose a color that contrasts well with your background
  • • Background color — Transparent, solid, or semi-transparent background
  • • Transparency — Adjust opacity so your scene shows through

Pro tip: Design the Overlay Teleprompter profile for your own readability (larger font, high contrast). Design the Overlay Subtitle profile for viewer experience (more transparent, smaller font to avoid taking up screen space).

6

Script Markers (OBS Automation)

Embed OBS commands directly in your script. When the teleprompter cursor reaches a marker, VoxiPrompter sends the command to OBS via WebSocket automatically. Requires an active OBS WebSocket connection.

Marker What it does Example
[SCENE: name] Switch to a named OBS scene [SCENE: Interview]
[SHOW: source] Make an OBS source visible [SHOW: Lower Third]
[HIDE: source] Hide an OBS source [HIDE: Lower Third]

Example script with markers:

Welcome to today's video.

[SCENE: Screencast]

Let me show you the interface.

[SHOW: Lower Third]

This is the voice-guided scrolling feature.

[HIDE: Lower Third]

[SCENE: Camera]

Thanks for watching!

Visible in the prompter — markers appear as labels so you know what's coming, but they're stripped from voice matching so they don't interfere with speech recognition.

300ms debounce — prevents duplicate actions when the AI briefly corrects itself.

Scene names must match exactly — the name inside the marker must match the scene or source name in OBS (case-sensitive).

7

Streamlabs & XSplit

The overlay URLs work with any streaming software that supports Browser Sources — OBS Studio, Streamlabs, XSplit, vMix, Twitch Studio, Ecamm Live, and more. Just paste the URL the same way:

Streamlabs Desktop

Sources → Add Source → Browser Source, then paste your VoxiPrompter overlay URL.

XSplit

Add Source → Web Page Source, then paste your VoxiPrompter overlay URL.

vMix / Twitch Studio / Ecamm Live

Add a Browser/Web source and paste the overlay URL. Match the width and height to your canvas size (e.g., 1920x1080).

8

Troubleshooting

Overlay not showing?

  • Make sure VoxiPrompter is running and listening
  • Verify both your computer and the streaming software are on the same network
  • Check that the overlay URL is correct (copy it fresh from the Streaming tab)
  • In OBS, refresh the Browser Source (right-click → Interact)

Captions delayed?

  • Captions are processed locally on your device, so delay should be minimal (under 1 second)
  • Check if your streaming software's Browser Source cache is enabled — disable it for real-time updates
  • In OBS, right-click the Browser Source → Filters → ensure no delay filters are applied

Can't connect to OBS?

  • In OBS, go to Tools → WebSocket Server Settings and verify it's enabled
  • Double-check your WebSocket host (usually localhost or 127.0.0.1), port (default 4455), and password
  • Make sure your firewall isn't blocking the connection
  • Test the connection again after updating settings

Explore more