> ## 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.

# SDKs

> All official Livepeer SDKs: video API SDKs in JavaScript, Python, Go and Java, AI inference SDKs in JavaScript and Python, and the @livepeer/react UI Kit.

export const TableCell = ({children, align = "left", header = false, style = {}, className = "", ...rest}) => {
  const Component = header ? "th" : "td";
  return <Component className={className} style={{
    padding: "0.75rem 1rem",
    textAlign: align,
    border: header ? "none" : "1px solid var(--lp-color-border-default)",
    ...style
  }} {...rest}>
      {children}
    </Component>;
};

export const TableRow = ({children, header = false, hover = false, style = {}, className = "", ...rest}) => {
  const rowId = `table-row-${Math.random().toString(36).substr(2, 9)}`;
  return <>
      {hover && <style>{`
          #${rowId}:hover {
            background-color: var(--lp-color-bg-card);
          }
        `}</style>}
      <tr id={rowId} className={className} style={{
    ...header && ({
      backgroundColor: "var(--lp-color-accent-strong)",
      color: "var(--lp-color-on-accent)",
      fontWeight: "bold"
    }),
    ...style
  }} {...rest}>
        {children}
      </tr>
    </>;
};

export const StyledTable = ({children, variant = "default", style = {}, className = "", ...rest}) => {
  const wrapperVariants = {
    default: {
      border: "1px solid var(--lp-color-border-default)",
      backgroundColor: "var(--lp-color-bg-card)",
      overflow: "hidden"
    },
    bordered: {
      border: "2px solid var(--lp-color-accent)",
      backgroundColor: "var(--lp-color-bg-page)",
      overflow: "hidden"
    },
    minimal: {
      border: "none",
      backgroundColor: "transparent",
      overflow: "visible"
    }
  };
  return <div data-docs-styled-table-shell className={className} style={{
    width: "100%",
    padding: 0,
    margin: 0,
    ...wrapperVariants[variant],
    ...style
  }} {...rest}>
      <table data-docs-styled-table style={{
    width: "100%",
    borderCollapse: "collapse",
    borderSpacing: 0,
    margin: 0,
    backgroundColor: "transparent"
  }}>
        {children}
      </table>
    </div>;
};

export const CenteredContainer = ({children, maxWidth = "800px", padding = "0", preset = "default", width = "", minWidth = "", marginRight = "", marginBottom = "", textAlign = "", style = {}, className = "", ...rest}) => {
  const presets = {
    default: {},
    fitContent: {
      width: "fit-content",
      minWidth: "fit-content"
    },
    readable70: {
      width: "70%",
      minWidth: "fit-content"
    },
    readable80: {
      width: "80%",
      minWidth: "fit-content"
    },
    readable90: {
      width: "90%"
    },
    wide900: {
      maxWidth: "900px"
    }
  };
  const presetStyle = presets[preset] || presets.default;
  return <div className={className} style={{
    maxWidth: presetStyle.maxWidth || maxWidth,
    margin: "0 auto",
    padding: padding,
    ...presetStyle.width ? {
      width: presetStyle.width
    } : {},
    ...presetStyle.minWidth ? {
      minWidth: presetStyle.minWidth
    } : {},
    ...width ? {
      width
    } : {},
    ...minWidth ? {
      minWidth
    } : {},
    ...marginRight ? {
      marginRight
    } : {},
    ...marginBottom ? {
      marginBottom
    } : {},
    ...textAlign ? {
      textAlign
    } : {},
    ...style
  }} {...rest}>
      {children}
    </div>;
};

export const CustomDivider = ({color = "var(--lp-color-border-default)", middleText = "", spacing = "default", style = {}, className = "", ...rest}) => {
  const spacingPresets = {
    default: {
      margin: "24px 0"
    },
    overlap: {
      margin: "-1rem 0 -1rem 0"
    },
    tight: {
      margin: "0 0 -1rem 0"
    },
    section: {
      margin: "0 0 -2rem 0"
    },
    sectionOverlap: {
      margin: "-1rem 0 -2rem 0"
    },
    deepOverlap: {
      margin: "-1rem 0 -1.5rem 0"
    }
  };
  const spacingStyle = spacingPresets[spacing] || spacingPresets.default;
  return <div role="separator" aria-orientation="horizontal" className={className} style={{
    display: "flex",
    alignItems: "center",
    ...spacingStyle,
    fontSize: style?.fontSize || "16px",
    height: "fit-content",
    ...style
  }} {...rest}>
      <span style={{
    marginRight: "var(--lp-spacing-px-8)",
    opacity: 0.2
  }}>
        <Icon icon="/snippets/assets/logos/Livepeer-Logo-Symbol-Theme.svg" />
      </span>
      <div style={{
    flex: 1,
    height: "1px",
    background: "var(--lp-color-border-default)",
    opacity: 0.4
  }}></div>
      {middleText && <>
          <Icon icon="circle" size={2} />
          <span style={{
    margin: "0 8px",
    fontWeight: "bold",
    color: color,
    opacity: 0.7
  }}>
            {middleText}
          </span>
          <Icon icon="circle" size={2} />
        </>}
      <div style={{
    flex: 1,
    height: "1px",
    background: "var(--lp-color-border-default)",
    opacity: 0.4
  }}></div>
      <span style={{
    marginLeft: "var(--lp-spacing-px-8)",
    opacity: 0.2
  }}>
        <span style={{
    display: "inline-block",
    transform: "scaleX(-1)"
  }}>
          <Icon icon="/snippets/assets/logos/Livepeer-Logo-Symbol-Theme.svg" />
        </span>
      </span>
    </div>;
};

export const LinkArrow = ({href, label, description, newline = true, borderColor, className = '', style = {}, ...rest}) => {
  const linkArrowStyle = {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: "var(--lp-spacing-1)",
    width: 'fit-content',
    ...borderColor && ({
      borderColor
    })
  };
  return <span className={className} style={style} {...rest}>
      {newline && <br />}
      <span style={linkArrowStyle}>
        <a href={href} target="_blank" rel="noopener noreferrer">
          {label}
        </a>
        <Icon icon="arrow-up-right" size={14} color="var(--lp-color-accent)" />
      </span>
      {description && description}
      {description && <div style={{
    height: "var(--lp-spacing-3)"
  }} />}
    </span>;
};

<CenteredContainer preset="readable90">
  <Tip>Two SDK families exist: the Video API SDKs wrap the Livepeer REST API for stream and asset management, and the AI SDKs wrap the ai-runner inference endpoints. They are separate packages with separate version lines.</Tip>
</CenteredContainer>

***

Livepeer publishes two families of client SDKs and one UI component library. All are generated from OpenAPI specifications and published to their respective package registries.

<CustomDivider />

## Video API SDKs

The Video API SDKs wrap the Livepeer REST API: streams, assets, webhooks, playback, access control, viewership metrics, and transcode jobs. All four are generated from the same OpenAPI spec.

<StyledTable variant="bordered">
  <thead>
    <TableRow header>
      <TableCell header>Language</TableCell>
      <TableCell header>Package name</TableCell>
      <TableCell header>Install</TableCell>
      <TableCell header>Repository</TableCell>
    </TableRow>
  </thead>

  <tbody>
    <TableRow>
      <TableCell>JavaScript / TypeScript</TableCell>
      <TableCell>`livepeer`</TableCell>
      <TableCell>`npm install livepeer`</TableCell>
      <TableCell>`livepeer/livepeer-js`</TableCell>
    </TableRow>

    <TableRow>
      <TableCell>Python</TableCell>
      <TableCell>`livepeer`</TableCell>
      <TableCell>`pip install livepeer`</TableCell>
      <TableCell>`livepeer/livepeer-python`</TableCell>
    </TableRow>

    <TableRow>
      <TableCell>Go</TableCell>
      <TableCell>`github.com/livepeer/livepeer-go`</TableCell>
      <TableCell>`go get github.com/livepeer/livepeer-go`</TableCell>
      <TableCell>`livepeer/livepeer-go`</TableCell>
    </TableRow>

    <TableRow>
      <TableCell>Java</TableCell>
      <TableCell>`studio.livepeer:livepeer`</TableCell>
      <TableCell>Maven: `studio.livepeer:livepeer:0.5.0`</TableCell>
      <TableCell>`livepeer/livepeer-java`</TableCell>
    </TableRow>
  </tbody>
</StyledTable>

**Initialisation (JavaScript):**

```javascript theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { Livepeer } from 'livepeer';
const client = new Livepeer({ apiKey: process.env.LIVEPEER_API_KEY });
```

**Initialisation (Python):**

```python theme={"theme":{"light":"github-light","dark":"dark-plus"}}
from livepeer import Livepeer
client = Livepeer(api_key=os.environ['LIVEPEER_API_KEY'])
```

The JavaScript SDK supports Node.js, Bun, Deno, and browser runtimes. The SDK throws typed errors: `SDKError` for API-level errors, `SDKValidationError` for response schema mismatches.

<CustomDivider />

## AI Inference SDKs

The AI SDKs wrap the ai-runner gateway inference endpoints: all nine batch pipeline types. They are generated from the ai-runner OpenAPI specification and versioned independently from the Video API SDKs.

<StyledTable variant="bordered">
  <thead>
    <TableRow header>
      <TableCell header>Language</TableCell>
      <TableCell header>Package name</TableCell>
      <TableCell header>Install</TableCell>
      <TableCell header>Repository</TableCell>
    </TableRow>
  </thead>

  <tbody>
    <TableRow>
      <TableCell>JavaScript / TypeScript</TableCell>
      <TableCell>`@livepeer/ai`</TableCell>
      <TableCell>`npm install @livepeer/ai zod`</TableCell>
      <TableCell>`livepeer/livepeer-ai-js`</TableCell>
    </TableRow>

    <TableRow>
      <TableCell>Python</TableCell>
      <TableCell>`livepeer-ai`</TableCell>
      <TableCell>`pip install livepeer-ai`</TableCell>
      <TableCell>`livepeer/livepeer-ai-python`</TableCell>
    </TableRow>
  </tbody>
</StyledTable>

Both AI SDKs are in alpha. Pin to a specific version to avoid breaking changes between releases.

**Initialisation (JavaScript):**

```typescript theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import { Livepeer } from '@livepeer/ai';
const livepeer = new Livepeer({ httpBearer: '' }); // empty = community gateway
```

**Initialisation (Python):**

```python theme={"theme":{"light":"github-light","dark":"dark-plus"}}
from livepeer_ai import Livepeer
client = Livepeer(http_bearer='')
```

See <LinkArrow href="/v2/developers/build/ai-and-agents/ai-sdks-overview" label="AI SDKs" newline={false} /> for method coverage and the `generate` namespace reference.

<Note>
  The `livepeer/livepeer-ai-sdks` repository is deprecated and no longer maintained. Use `@livepeer/ai` (npm) and `livepeer-ai` (PyPI) instead.
</Note>

<CustomDivider />

## @livepeer/react (UI Kit)

`@livepeer/react` is the React component library for video playback and browser-based broadcasting. It is not a wrapper for the Video API; it is a UI component layer.

```bash theme={"theme":{"light":"github-light","dark":"dark-plus"}}
npm install @livepeer/react
```

Current version: 4.3.6. Supports React 17 and React 18.

Key exports:

| Export                                            | Purpose                                                    |
| ------------------------------------------------- | ---------------------------------------------------------- |
| `Player`                                          | ABR HLS + WebRTC playback with WAI-ARIA keyboard shortcuts |
| `Broadcast`                                       | WebRTC (WHIP) browser-based publishing                     |
| `Player.Root`, `Player.Video`, `Player.Container` | Composable primitives for custom player UI                 |

Repository: `livepeer/ui-kit`

See <LinkArrow href="/v2/developers/build/applications/frontend-react-player" label="Player" newline={false} /> for component usage and prop reference.

<CustomDivider />

## Deprecated SDKs

`@livepeer/react-native` (version 0.0.1) is no longer maintained. For React Native video playback, use `react-native-video` for HLS or `react-native-webrtc` for low-latency WebRTC.

<CustomDivider />

## Related Pages

<CardGroup cols={2}>
  <Card title="AI SDKs" icon="code" href="/v2/developers/build/ai-and-agents/ai-sdks-overview" arrow horizontal>
    AI SDK method coverage, generate namespace, and gateway configuration.
  </Card>

  <Card title="Player" icon="play" href="/v2/developers/build/applications/frontend-react-player" arrow horizontal>
    @livepeer/react Player props, ICE servers, and Broadcast component.
  </Card>

  <Card title="Video Overview" icon="film" href="/v2/developers/build/video/overview" arrow horizontal>
    Video API SDK usage for streams, assets, and webhooks.
  </Card>

  <Card title="APIs" icon="book" href="/v2/developers/resources/reference/apis" arrow horizontal>
    OpenAPI reference for the endpoints the SDKs wrap.
  </Card>
</CardGroup>