> ## Documentation Index
> Fetch the complete documentation index at: https://docs.livepeer.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Create an account, get an API key, and add live or on-demand video in under 5 minutes.

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](https://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.

<Warning>
  **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.
</Warning>

<Info>
  Use separate accounts or [projects](/solutions/livepeer-studio/docs/reference/managing-projects) for development and production to keep environments isolated.
</Info>

## 2. Install the SDK

This example uses the JavaScript SDK and the Livepeer React library:

```bash icon="terminal" theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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):

```tsx icon="terminal" theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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**:

```ts icon="terminal" theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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:

```tsx icon="terminal" theme={"theme":{"light":"github-light","dark":"dark-plus"}}
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

* [Create a livestream](/solutions/livepeer-studio/docs/livestream/create-livestream) - Create a stream and get a stream key and playback ID.
* [Upload an asset](/solutions/livepeer-studio/docs/video-on-demand/upload-asset) - Upload video files and play them back.
* [Listen to asset events](/solutions/livepeer-studio/docs/analytics/listen-to-events) - Use webhooks to react when assets are ready or fail.
* [SDKs overview](/solutions/livepeer-studio/docs/reference/sdks) - TypeScript, Go, Python, and React.
* [API overview](/solutions/livepeer-studio/docs/reference/api) - Authentication and API basics.