Skip to main content
Get started with Livepeer Studio by creating an account, an API key, and then using the SDK to play a video (e.g. an asset you uploaded in the dashboard).

​
1. Create an account and API key

  1. Go to Livepeer Studio and create an account.
  2. Open the Developers area and click Create API Key.
  3. Store the API key securely (e.g. in environment variables). Use it from your backend when calling the Livepeer Studio API.
CORS-enabled API keys are not recommended and will be deprecated. Make requests to the Livepeer Studio API from your backend and never expose your secret API key in the browser.
Use separate accounts or projects for development and production to keep environments isolated.

​
2. Install the SDK

This example uses the JavaScript SDK and the Livepeer React library: 
npm install livepeer @livepeer/react

​
3. Set up the client

Add your API key to environment variables, then create the Livepeer client (e.g. in a backend or server context): 
import Livepeer from "livepeer";

const livepeer = new Livepeer({
  apiKey: process.env.LIVEPEER_API_KEY,
});

​
4. Get playback info

Use the client to fetch playback info for an asset (for example, one you uploaded in the dashboard). You need the asset’s playback ID: 
import { getSrc } from "@livepeer/react/external";

const playbackId = "f5eese9wwl88k4g8"; // replace with your playback ID

export async function getPlaybackSource() {
  const playbackInfo = await livepeer.playback.get(playbackId);
  return getSrc(playbackInfo.playbackInfo);
}

​
5. Play the asset

Use the Livepeer Player to play the video. Fetch the source on the server (e.g. in a React Server Component or API route), then pass it to the Player: 
import { PauseIcon, PlayIcon } from "@livepeer/react/assets";
import { getSrc } from "@livepeer/react/external";
import * as Player from "@livepeer/react/player";

export function DemoPlayer({ src }: { src: Src[] | null }) {
  return (
    <Player.Root src={src}>
      <Player.Container>
        <Player.Video title="Video" />
        <Player.Controls className="flex items-center justify-center">
          <Player.PlayPauseTrigger className="w-10 h-10">
            <Player.PlayingIndicator asChild matcher={false}>
              <PlayIcon />
            </Player.PlayingIndicator>
            <Player.PlayingIndicator asChild>
              <PauseIcon />
            </Player.PlayingIndicator>
          </Player.PlayPauseTrigger>
        </Player.Controls>
      </Player.Container>
    </Player.Root>
  );
}

​
Next steps

Last modified on February 18, 2026