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

# Example Applications

> Curated example applications and starter projects across Livepeer's AI, video, and compute surfaces. Working code, tutorials, and reference implementations.

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 width="90%">
  <Tip>Working starter projects across AI, video, and compute. Each one is the shortest path from clone to running app for its category.</Tip>
</CenteredContainer>

<CustomDivider />

This page catalogues working example applications across Livepeer's developer surface: tutorial-shaped projects you can clone, run, and modify into a production app. Each example exists because a category needs a reference implementation; together they cover the AI, video, and compute surfaces that the Developers tab walks through in detail.

For the underlying primitives each example uses, follow the links from the example back to the relevant concept or reference page.

<CustomDivider middleText="AI Applications" />

## AI Application Examples

The AI surface examples cover batch inference, real-time AI, and agent frameworks. Each is a runnable starting point; copy, modify, ship.

| Example                                                                                                                                | What it shows                                                                                  | Primary surface                |
| -------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------ |
| <LinkArrow href="/v2/developers/build/tutorials/ai-image-generation-app">AI Image Generation App</LinkArrow>                           | Next.js 15 app with Server Action calling text-to-image; gallery, model picker, error handling | AI Jobs API                    |
| <LinkArrow href="/v2/developers/build/tutorials/build-a-chatbot-with-livepeer-llm">LLM Chatbot</LinkArrow>                             | Streaming chat via Server-Sent Events on the LLM pipeline                                      | AI Jobs API (LLM)              |
| <LinkArrow href="/v2/developers/build/tutorials/build-a-vtuber-avatar-pipeline">VTuber Avatar Pipeline</LinkArrow>                     | Webcam to anime avatar via ComfyStream + StreamDiffusion + DWPose                              | Real-time AI                   |
| <LinkArrow href="/v2/developers/build/tutorials/eliza-livepeer-plugin">Eliza Livepeer Plugin</LinkArrow>                               | Multi-layer agent: character file, RAG, Slack and Discord clients, SwarmZero multi-agent       | LLM pipeline + agent framework |
| <LinkArrow href="/v2/developers/build/compute/byoc/byoc-quickstart">BYOC Quickstart</LinkArrow>                                        | Custom Python container as a network capability; green-tint frame processor                    | BYOC                           |
| <LinkArrow href="/v2/developers/build/ai-and-agents/realtime-ai/comfystream/comfystream-quickstart">ComfyStream Quickstart</LinkArrow> | First real-time AI effect on a webcam in fifteen minutes                                       | Real-time AI                   |

<CustomDivider middleText="Video Applications" />

## Video Application Examples

The video surface examples cover live streaming, VOD, and decentralised storage integration.

| Example                                                                                                                    | What it shows                                                   | Primary surface             |
| -------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | --------------------------- |
| <LinkArrow href="/v2/developers/build/tutorials/low-latency-live-streaming-app">Low-Latency Live Streaming App</LinkArrow> | Sub-3s glass-to-glass WHIP ingest plus WHEP playback in Next.js | Live streaming              |
| <LinkArrow href="/v2/developers/build/tutorials/vod-upload-and-playback">VOD Upload and Playback</LinkArrow>               | TUS resumable upload, asset lifecycle polling, HLS playback     | VOD                         |
| <LinkArrow href="/v2/developers/build/tutorials/ipfs-video-integration">IPFS Video Integration</LinkArrow>                 | Upload to web3.storage, fetch into Livepeer, play back with HLS | VOD + decentralised storage |
| <LinkArrow href="/v2/developers/build/video/transcoding-direct-quickstart">Transcoding Direct Quickstart</LinkArrow>       | Self-hosted Gateway and Orchestrator transcoding RTMP to HLS    | Self-hosted transcoding     |

<CustomDivider middleText="Platform Applications" />

## Platform and Integration Examples

The platform surface examples cover multi-tenant SaaS patterns, NaaP plugin development, and ecosystem integrations.

| Example                                                                                                                              | What it shows                                                  | Primary surface        |
| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------- | ---------------------- |
| <LinkArrow href="/v2/developers/build/tutorials/multi-tenant-billing-with-pymthouse">Multi-Tenant Billing with pymthouse</LinkArrow> | OIDC identity, per-user usage ledger, payment ticket signing   | Multi-tenant SaaS      |
| <LinkArrow href="/v2/developers/build/tutorials/build-a-naap-plugin">NaaP Plugin</LinkArrow>                                         | Scaffold, develop, and publish a NaaP plugin with ShellContext | Operator portal plugin |
| <LinkArrow href="/v2/developers/build/tutorials/streamplace-byoc-integration">Streamplace Integration</LinkArrow>                    | AT Protocol-native video infrastructure routing                | AT Protocol + BYOC     |

<CustomDivider middleText="Legacy" />

## Legacy Example Applications

The earlier round of example applications shipped against the v1 Livepeer Studio surface. They remain useful for patterns even though some integrations have shifted.

| Example                        | What it shows                                                       |
| ------------------------------ | ------------------------------------------------------------------- |
| React Native Example App       | YouTube clone using Livepeer React in React Native                  |
| Justcast.it                    | One-click "start a livestream" pattern integrated against a Gateway |
| EVM Token-Gated Livestream     | Token-gated livestream creation across EVM-compatible chains        |
| Decentralised Storage Playback | Playing video from IPFS or Arweave via the Livepeer Player          |

These examples are linked from `livepeer/awesome-livepeer` for direct repository access.

<CustomDivider middleText="By Category" />

## Picking by Category

Choose an example by what you want to build. The decision points:

| If you're building                              | Start with                                              |
| ----------------------------------------------- | ------------------------------------------------------- |
| An AI image or video generation app             | AI Image Generation App                                 |
| A chat product                                  | LLM Chatbot, then Eliza Livepeer Plugin for agent depth |
| A live streaming platform                       | Low-Latency Live Streaming App                          |
| A VOD platform (Mux-shaped)                     | VOD Upload and Playback                                 |
| A custom inference pipeline                     | BYOC Quickstart                                         |
| A real-time AI effect or avatar                 | ComfyStream Quickstart, then VTuber Avatar Pipeline     |
| A multi-tenant SaaS on Livepeer compute         | Multi-Tenant Billing with pymthouse                     |
| An operator-facing dashboard plugin             | NaaP Plugin                                             |
| A decentralised social or AT Protocol video app | Streamplace Integration                                 |

For category overlap (e.g. an AI chatbot with custom inference), start with the closer single-category example and layer in the second category's pattern once the first is running.

<CustomDivider middleText="Community" />

## Community Examples

The full community-maintained list of examples, tutorials, demos, and integrations lives at <LinkArrow href="https://github.com/livepeer/awesome-livepeer">github.com/Livepeer/awesome-Livepeer</LinkArrow> (browseable at `livepeer.cool`). Categories include:

* SDKs and developer libraries across TypeScript, Python, Go, and React
* Orchestrator and node operator tools (monitoring, alerts, exporters)
* Community dashboards (Dune, Explorer, performance trackers)
* Ecosystem applications (Daydream, Streamplace, Embody, Frameworks, Harmonic)
* No-code integration (Bubble plugin, Studio CLI scaffolds)

The `awesome-livepeer` repository is open to contributions; submit a PR to add an example that's missing.

<CustomDivider middleText="Next Steps" />

## Next Steps

<CardGroup cols={2}>
  <Card title="AI Pipelines" icon="layer-group" href="/v2/developers/build/ai-and-agents/ai-pipelines">
    The full pipeline reference behind the AI examples.
  </Card>

  <Card title="AI SDKs Overview" icon="code" href="/v2/developers/build/ai-and-agents/ai-sdks-overview">
    The TypeScript and Python SDKs the examples use.
  </Card>

  <Card title="Awesome Livepeer" icon="github" href="https://github.com/livepeer/awesome-livepeer">
    Full community-curated directory of tools and integrations.
  </Card>

  <Card title="Production Hardening" icon="shield" href="/v2/developers/guides/production-hardening-checklist">
    From example to production: auth, rate limits, observability.
  </Card>
</CardGroup>