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

# Frameworks Network

> Frameworks Network is a Livepeer-aligned video infrastructure stack. Hosted ingest and transcoding, self-hostable MistServer stack, and SDKs for player and broadcast.

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>Frameworks ships a hosted video stack and a self-hostable open-source equivalent. Canonical setup lives in the Solutions tab; this page routes developers there with context.</Tip>
</CenteredContainer>

<CustomDivider />

Frameworks Network is a Livepeer-aligned video infrastructure provider operating both a hosted SaaS tier and a self-hostable open-source stack. The hosted tier runs at `app.frameworks.network`. The self-hosted stack is built on MistServer, the open-source streaming toolkit maintained by DDVTech (now operating inside Livepeer Inc).

This page exists to route developers to the canonical Frameworks documentation. The setup, API reference, SDK quickstart, and self-hosting deployment instructions are maintained by the Frameworks team in the <LinkArrow href="/v2/solutions/frameworks/overview">Solutions tab</LinkArrow>.

<CustomDivider middleText="When to Use" />

## Selection Criteria

Frameworks fits three developer scenarios that lower-level Livepeer primitives leave open.

| Scenario                                                             | What Frameworks adds                                                                    |
| -------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
| Need a hosted live-streaming backend without managing infrastructure | `app.frameworks.network` with free tier, RTMP ingest, StreamCrafter browser broadcaster |
| Need a sovereign deployment with full control of the stack           | Self-hostable MistServer-based stack, deployable on any cloud or bare metal             |
| Need a hybrid: self-host the edge, burst to managed GPU              | Hybrid mode pairs self-hosted edge with Frameworks-hosted compute                       |

The lower-level alternative is running `go-livepeer` directly in broadcaster mode and assembling your own stack around it. Frameworks is the higher-level integration when you want the streaming surface (ingest, transcoding, recording, clips, analytics) packaged together.

<CustomDivider middleText="Relationship" />

## Frameworks and Livepeer

Frameworks operates as a Livepeer Special Purpose Entity (SPE), funded through the treasury, with a dual-tier model: hosted SaaS plus open-source self-hostable stack.

| Layer       | Component                                                      |
| ----------- | -------------------------------------------------------------- |
| Application | Your video app                                                 |
| SDKs        | Frameworks Player SDK, StreamCrafter SDK, GraphQL API, MCP     |
| Routing     | Skipper routing layer for ingest and processing nodes          |
| Stack       | MistServer (open-source streaming toolkit)                     |
| Network     | Livepeer-backed compute (shared bandwidth pool, GPU workloads) |

The free tier includes self-hosting capability and access to the shared bandwidth pool with Livepeer-backed compute. Paid tiers add managed scaling, enterprise support, and burst GPU.

<CustomDivider middleText="Canonical Path" />

## Canonical Setup Path

The canonical setup, including dashboard quickstart, StreamCrafter integration, GraphQL API reference, MCP integration, and full self-hosting deployment, lives in the Solutions tab.

<CardGroup cols={1}>
  <Card title="Frameworks Overview" icon="rocket" href="/v2/solutions/frameworks/overview">
    Start here: hosted tier, SDK quickstart, self-hosting guide. Maintained by the Frameworks team.
  </Card>
</CardGroup>

The Solutions overview covers four paths:

1. **Start from the app.** Sign up at `app.frameworks.network`, create a stream in the dashboard, go live via StreamCrafter in the browser or via OBS over RTMP
2. **Use the SDK.** Install `@livepeer-frameworks/player-react` and configure stream and playback URLs
3. **Use the GraphQL API or MCP.** For automation and AI-agent integration
4. **Self-host the stack.** Follow the Frameworks docs for sovereign deployment; optionally use hybrid mode

Time to first stream is under fifteen minutes on the hosted path.

<CustomDivider middleText="External" />

## External Resources

| Resource                 | Link                                                                                |
| ------------------------ | ----------------------------------------------------------------------------------- |
| Frameworks homepage      | <LinkArrow href="https://app.frameworks.network">app.frameworks.network</LinkArrow> |
| Frameworks documentation | Available via the Solutions overview                                                |
| Frameworks repository    | Open-source MistServer-based stack; link in Solutions overview                      |
| MistServer               | <LinkArrow href="https://mistserver.org">mistserver.org</LinkArrow>                 |

For deep technical questions about Frameworks internals, the architecture and deployment documentation maintained by the Frameworks team is the authoritative source.

<CustomDivider middleText="Next Steps" />

## Next Steps

<CardGroup cols={2}>
  <Card title="Frameworks Overview" icon="play" href="/v2/solutions/frameworks/overview">
    Canonical Frameworks documentation: hosted tier, SDK, self-hosting.
  </Card>

  <Card title="Transcoding Quickstart" icon="film" href="/v2/developers/build/video/transcoding-direct-quickstart">
    The lower-level path: run go-livepeer broadcaster directly.
  </Card>

  <Card title="Low-Latency Streaming" icon="bolt" href="/v2/developers/build/tutorials/low-latency-live-streaming-app">
    Sub-3s WHIP/WHEP path with @livepeer/react.
  </Card>

  <Card title="Streamplace Integration" icon="cube" href="/v2/developers/build/tutorials/streamplace-byoc-integration">
    The AT Protocol-native video infrastructure path.
  </Card>
</CardGroup>