Get Started with MEDKit

Introduction to MEDKit and the Muxy SDK

MEDKit is a JavaScript library for building viewer-facing extensions on Twitch. It is part of an SDK designed to make building and interacting with a Twitch extension easy. The complete SDK also includes APIs that let a Twitch developer interact directly with the Muxy server to integrate their game or other broadcast content with viewer data. You can communicate directly over HTTP using the REST API, which MEDKit methods use, or using the GameLink Libraries, available for C# and Unity or C++ and Unreal.

  • MEDKit comes with an extension starter project that includes the installed and configured library. The easiest and fastest way to get started is to download the starter project. The MEDKit starter project is a fully self-contained starter project for building and running a Twitch Extension powered by Muxy's Extension Backend Services.

  • This is the same starter project Muxy uses to develop many of our client projects, now open sourced to help the community. It uses Vue.js to enable quick development and provide a powerful reactive environment without too much overhead. You can modify the starter project to create basic extensions.

  • If you prefer a more customized working environment, you can install and configure MEDKit directly with npm, node.js, and webpack. Even if you choose this approach, you might want to familiarize yourself with the structure of a MEDKit extension project by examining the starter project.

  • If you are using the Unreal Engine for development, you can install the Muxy plugin and learn how to use it to integrate Muxy functionality into your game.

  • If you are using the Unity development environment, you can install the C# MEDKit SDK to integrate Muxy functionality into your game.

Getting oriented

The first thing to do is download and examine the MEDKit starter project from git: https://github.com/muxy/medkit-starter-vue

This repo contains two versions of a fully functioning extension in both JavaScript and TypeScript, in the js/ and ts/ directories.

Inside the language-specific directory, extension code for a MEDKit project is in the src/ directory, which contains source files for each of the individual pages that make up your extension. In the starter extension, all of the files and folders are provided and built. You only need to edit the ones you actually intend to ship. For example, when building a panel extension (such as the ones in our example) you can safely ignore the overlay/ and component/ directories as these are used to build Overlay and Component extensions.

📘

See more information about the basic types and structure of Twitch Extensions.

The following are important top-level files and folders you will be working with.

Folder/File

Purpose

.env

A configurationfile containing information about your extension and testing environment.

public/index.html

The template HTML file. Your individual extension pages will use this file as a base when compiling their own pages.

src/

Source files for the extension, with subfolders for each of the individual pages that make up your project.

src/{component, overlay, panel}/App.vue

The entry point for creating an extension of the given type.

src/{config, live}/App.vue

The entry point for creating the broadcaster-only pages for an extension.

Running a project

Before you can run the example project, you must have a valid Extension Client ID.
If you don't have one, create one on Twitch’s developer portal, choosing the Extension type. Click Manage to show the Client ID at top of the page.

  1. Copy the directory for the language you plan to use (js for JavaScript, ts for TypeScript) and rename it to match your extension name.

  2. Create a file within that folder named .env (don't forget the beginning period on the filename), with the following content:

VUE_APP_CLIENT_ID=<Twitch Client ID>
  1. To compile the extension and run a local server, open a command shell and enter the following commands:
npm install
npm run serve 

This makes the following component pages available. (The script will print out the port number and may differ from below.)