How to Use Discord StreamKit to Add a Discord Overlay to Your Stream

What Discord StreamKit does

Discord StreamKit Overlay is a free Discord tool for people who stream or record with apps such as OBS Studio, Streamlabs or XSplit. It creates a small web-based overlay that shows Discord activity on top of your stream. Most people use it to show who is in their voice channel and who is talking, but it can also show text chat or a server invite card.

The basic method is the same for every widget. You open the StreamKit Overlay page, let it connect to your Discord desktop app, choose a widget and channel, copy the overlay address it generates, and paste that address into your streaming app as a browser source. A browser source is a layer in your streaming software that displays a web page inside your scene.

StreamKit has limits that are easy to miss. It does not capture or send your webcam video. The voice widget shows avatars and names, not camera feeds. It also does not carry any sound. Your viewers will not hear your Discord call unless you capture Discord's audio separately in your streaming app. StreamKit has also been available for a long time with little visible change, so Discord could change or retire it. If the page or the steps below look different, check Discord's current help information.

Before you start

• The Discord desktop app installed, signed in and running on the same computer as your streaming software. StreamKit connects through the local desktop client, so the browser version of Discord is not enough.
• A streaming or recording app that supports browser sources, such as OBS Studio, Streamlabs or XSplit.
• Access to the server and channel you want to show. For the voice widget, you should be able to join that voice channel.

Step 1: Open StreamKit and connect it to Discord

• 1. In a web browser, find the Discord StreamKit Overlay page. Searching for "Discord StreamKit Overlay" will bring it up.
• 2. Select the button for your streaming app, for example the option to install for OBS.
• 3. Switch to the Discord desktop app. It should show a request asking whether to let StreamKit Overlay connect to your account. Read the request, then approve it.
• Success check: the StreamKit page moves on to a setup screen with widget tabs and server and channel menus, instead of asking you to connect again.

If no request appears in Discord, confirm that the desktop app is open and signed in, not just minimized to an account switcher or login screen. Close and reopen Discord, then reload the StreamKit page. The connection only works when both are running on the same computer.

Step 2: Choose a widget and configure it

StreamKit offers three main widgets. Choose the one that matches what you want viewers to see:

• Voice widget: shows the members of a voice channel and highlights whoever is currently speaking. This is the most common choice for streams with co-hosts or friends on a call.
• Chat widget: shows messages from a text channel on screen.
• Status widget: shows a server card with an invite prompt and online member information.

Pick the server and channel from the menus. Then adjust the display options the page offers, such as name visibility, avatar size, text size or whether to show only people who are speaking. The preview on the page updates as you change settings. The generated overlay address is tied to the server and channel you selected. If you later want a different channel, return to StreamKit and create a new address.

Step 3: Add the overlay to your streaming app

• 1. Copy the overlay address shown on the StreamKit page.
• 2. In your streaming app, open the scene you stream from and add a new browser source. In OBS Studio, this is the Browser option in the Sources list.
• 3. Paste the overlay address into the source's address field.
• 4. Set a width and height large enough to fit the widget, then confirm.
• 5. Drag and resize the source in the preview to place it where you want it on screen.
• Success check: the widget appears in your streaming app's preview, not just on the StreamKit page.

Browser sources in OBS also have a custom CSS field, which some streamers use to restyle the overlay. This is optional. If the overlay looks wrong after you edit that field, clear it to return to the default look.

Step 4: Test that the overlay responds

• 1. Join the voice channel you selected in the Discord desktop app.
• 2. Look at your streaming app's preview. Your avatar and name should appear in the voice widget.
• 3. Speak. Your entry should highlight while Discord detects you talking and return to normal when you stop.
• 4. For the chat widget, send a test message in the chosen text channel and confirm that it appears in the preview.

If the widget is blank, check three things. First, make sure you joined the same channel you selected in StreamKit. Second, make sure the Discord desktop app is still running. Third, refresh the browser source from its properties, or delete it and add it again with a freshly copied address.

What this test shows and what it doesn't

A highlighted avatar shows that StreamKit is connected, that it is watching the right channel and that Discord is detecting input from your microphone. It does not show that your voice is clear, that your level is right or that your stream captures any sound. Microphone detection, input activity and intelligible sound are separate things. A very quiet, distorted or noisy microphone can still trigger the speaking highlight.

To check sound quality, use Discord's own voice and video settings, which include a microphone test. Then do a short local recording in your streaming app and play it back. Listen for your own voice and for the other people on the call. Remember that you must add Discord's audio to your stream yourself, for example through desktop audio or an application audio capture source, depending on what your software supports.

The sources used for this guide did not include any recommended input-level targets or technical thresholds. This guide therefore does not give specific decibel or meter targets. Follow the guidance in your streaming app and Discord, and judge by listening to a test recording.

If you also want your camera on stream

StreamKit will not show your webcam. Add your camera to the scene as its own video capture source in your streaming app. Discord's camera settings and any virtual background or blur you turn on in Discord apply to Discord video calls. They do not automatically carry over to a camera source in OBS or similar apps. Any background effect you want on stream has to be set up in the streaming app or through your physical surroundings.