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

# Storyboard

> Storyboard is an agent-powered creative platform built on Livepeer. Chat with AI to generate, edit, animate, and live-stream media on an infinite canvas using 40+ AI models.

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 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>Storyboard is the reference application for the @livepeer/agent and @livepeer/creative-kit packages. Its architecture is the canonical pattern for building creative AI apps on Livepeer.</Tip>
</CenteredContainer>

***

Storyboard is a web application at `storyboard-rust.vercel.app` that lets users generate, edit, animate, and live-stream media through a conversational interface on an infinite canvas. It is built on two packages: `@livepeer/agent` (provider-agnostic agent runtime) and `@livepeer/creative-kit` (reusable framework for creative AI apps).

Both packages are available for developers building their own creative applications on the same infrastructure.

<CustomDivider />

## Capabilities

Storyboard exposes 40+ AI capabilities through a single conversation interface. Type a prompt and the agent plans, selects models, runs inference in parallel, and places results as draggable cards on the canvas:

```
"Create a 6-scene story about a brave knight, animate the best scene,
 and start a live stream with cyberpunk style"
```

**Generation:**

<StyledTable variant="bordered">
  <thead>
    <TableRow header>
      <TableCell header>Category</TableCell>
      <TableCell header>Models</TableCell>
    </TableRow>
  </thead>

  <tbody>
    <TableRow>
      <TableCell>Image</TableCell>
      <TableCell>flux-dev, flux-schnell, recraft-v4, gemini-image, seedream-5-lite</TableCell>
    </TableRow>

    <TableRow>
      <TableCell>Video (text-to-video)</TableCell>
      <TableCell>veo-t2v, ltx-t2v, pixverse-t2v</TableCell>
    </TableRow>

    <TableRow>
      <TableCell>Video (image-to-video)</TableCell>
      <TableCell>seedance-i2v, seedance-i2v-fast, veo-i2v, ltx-i2v, kling-i2v</TableCell>
    </TableRow>

    <TableRow>
      <TableCell>Text-to-speech</TableCell>
      <TableCell>chatterbox-tts, gemini-tts, inworld-tts, grok-tts</TableCell>
    </TableRow>

    <TableRow>
      <TableCell>3D</TableCell>
      <TableCell>tripo-t3d, tripo-i3d, tripo-mv3d</TableCell>
    </TableRow>

    <TableRow>
      <TableCell>Editing</TableCell>
      <TableCell>kontext-edit, flux-fill, bg-remove, topaz-upscale, talking-head</TableCell>
    </TableRow>
  </tbody>
</StyledTable>

All models have automatic fallback chains: if a model rejects a request (content policy, size limit), the next sibling model tries automatically.

**Slash commands (25+):** `/story` (6-scene illustrated story), `/film` (4-shot mini-film with camera directions), `/stream` (real-time LV2V with Scope pipeline), `/talk` (talking video with voice clone), `/analyze` (Gemini Vision style/character extraction), `/project` (manage and replay sessions), and more. Type `/help` in the app for the full list.

<CustomDivider />

## Three-Layer Architecture

```
Your Application
  @livepeer/creative-kit        ArtifactStore · ChatPanel · InfiniteBoard
  @livepeer/agent               AgentRunner · ToolRegistry · WorkingMemory

Livepeer Infrastructure
  SDK Service (sdk.daydream.monster)
  BYOC Orchestrator (go-livepeer, 40 capabilities)
  Scope Orchestrators (LV2V, real-time video)
```

**`@livepeer/agent` (Layer 0):** Provider-agnostic agent runtime. `AgentRunner` manages the LLM-to-tool loop. Swap LLM providers (Gemini, Claude, OpenAI, Livepeer) without changing application code. Includes working memory (800-token budget) and queryable session memory.

**`@livepeer/creative-kit` (Layer 1):** Reusable framework for creative AI apps. `ArtifactStore` manages canvas state, `ProjectPipeline` handles batch generation, `CommandRouter` handles slash commands, `CapabilityResolver` manages model selection and fallback chains. Includes `InfiniteBoard`, `ChatPanel`, and `ArtifactCard` UI components.

**Applications (Layer 2):** Storyboard itself, plus Creative Lab (an educational app for children aged 8-16 in `apps/creative-lab/`).

<CustomDivider />

## LLM Provider Configuration

`@livepeer/agent` supports four LLM backends:

<StyledTable variant="bordered">
  <thead>
    <TableRow header>
      <TableCell header>Provider</TableCell>
      <TableCell header>API key required</TableCell>
      <TableCell header>Routes through</TableCell>
    </TableRow>
  </thead>

  <tbody>
    <TableRow>
      <TableCell>Gemini (default)</TableCell>
      <TableCell>`GEMINI_API_KEY`</TableCell>
      <TableCell>Google API directly</TableCell>
    </TableRow>

    <TableRow>
      <TableCell>Claude</TableCell>
      <TableCell>`ANTHROPIC_API_KEY`</TableCell>
      <TableCell>Anthropic API directly</TableCell>
    </TableRow>

    <TableRow>
      <TableCell>OpenAI</TableCell>
      <TableCell>`OPENAI_API_KEY`</TableCell>
      <TableCell>OpenAI API directly</TableCell>
    </TableRow>

    <TableRow>
      <TableCell>Livepeer</TableCell>
      <TableCell>`DAYDREAM_API_KEY` only</TableCell>
      <TableCell>SDK Service; routes to Gemini/Claude/OpenAI via Livepeer infrastructure</TableCell>
    </TableRow>
  </tbody>
</StyledTable>

The Livepeer provider routes all LLM calls through Livepeer infrastructure with a single Daydream API key. Get one at `daydream.live`.

<CustomDivider />

## Building with the SDK

The `@livepeer/agent` CLI is the fastest way to use Storyboard capabilities programmatically:

```bash theme={"theme":{"light":"github-light","dark":"dark-plus"}}
curl -fsSL https://storyboard.daydream.monster/install.sh | bash
livepeer setup --api-key sk_live_xxx
livepeer run flux-schnell --prompt "a mountain at dawn"
```

For library usage and MCP server mode, see <LinkArrow href="/v2/developers/build/ai-and-agents/agents/agent-sdk" label="Agent SDK" newline={false} />.

<CustomDivider />

## Related Pages

<CardGroup cols={2}>
  <Card title="Agent SDK" icon="code" href="/v2/developers/build/ai-and-agents/agents/agent-sdk" arrow horizontal>
    @livepeer/agent library API: AgentRunner, providers, ToolRegistry, and MCP server mode.
  </Card>

  <Card title="Agents Overview" icon="robot" href="/v2/developers/build/ai-and-agents/agents/overview" arrow horizontal>
    Eliza integration, BYOC agent patterns, and Agent SPE context.
  </Card>

  <Card title="AI Pipelines" icon="cpu" href="/v2/developers/build/ai-and-agents/ai-pipelines" arrow horizontal>
    The underlying inference endpoints Storyboard routes through.
  </Card>

  <Card title="Real-Time AI" icon="video" href="/v2/developers/build/ai-and-agents/realtime-ai/overview" arrow horizontal>
    The Cascade/LV2V pipeline powering Storyboard's /stream command.
  </Card>
</CardGroup>