Get Started with MEDKit¶
MEDKit is the @muxy/extensions-js browser SDK for custom Twitch Extension surfaces. It provides authenticated state, configuration, messaging, polling, purchases, and Twitch helpers. Use it when you want to own the viewer or broadcaster UI; use Gateway when you want game interactions without publishing your own Twitch Extension.
Choose a starting point¶
| Goal | Start here |
|---|---|
| Create a minimal modern project | Install MEDKit manually |
| Build broadcaster and viewer pages | Build a simple extension |
| Understand state and configuration | Developing with MEDKit |
| Call the backend without JavaScript | REST API overview |
The public Vue starter snapshot contains JavaScript and TypeScript examples for config, live, panel, component, and overlay surfaces. It is not a pinned SDK release fixture: its package manifest requests @muxy/extensions-js from the ^2.4.3 range and uses Vue CLI 4. Use it as a structural reference, or update its dependencies before starting a production project.
MEDKit initialization order¶
Every page follows the same lifecycle:
- During local development only, call
Muxy.debug(...)to simulate a Twitch channel and role. - Call
Muxy.setup(...)exactly once with the Twitch Extension Client ID. - Construct
new Muxy.SDK(). - Await
medkit.loaded()before reading authorization, state, or configuration.
import Muxy from "@muxy/extensions-js";
Muxy.setup({ clientID: import.meta.env.VITE_CLIENT_ID });
const medkit = new Muxy.SDK();
await medkit.loaded();
Local simulation is not authorization. Test privileged writes with the appropriate broadcaster/admin role, and remove debug overrides from the production bundle so Twitch-provided context controls the user identity.
Twitch Extension surfaces¶
config: broadcaster configuration.live: broadcaster live dashboard.panel: viewer channel panel.component: viewer video component.overlay: viewer video overlay.
Twitch controls the allowed dimensions, lifecycle, CSP, and review requirements for each surface. See Twitch Extension design guidance before packaging the final bundle.