> ## Documentation Index
> Fetch the complete documentation index at: https://na-36-changelog-go-livepeer-2026-05-18.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# About Daydream

> Open-source toolkit for world models and real-time AI video on the Livepeer network.

export const daydreamSocials = [{
  icon: 'globe',
  href: 'https://daydream.live/',
  label: 'Daydream Website'
}, {
  icon: 'github',
  href: 'https://github.com/daydreamlive/scope',
  label: 'Daydream GitHub'
}, {
  icon: 'file-code',
  href: 'https://docs.daydream.live/',
  label: 'Daydream Docs'
}, {
  icon: 'youtube',
  href: 'https://www.youtube.com/channel/UCviyh_-8H2vkYq9ROHMBffQ',
  label: 'Daydream YouTube'
}, {
  icon: 'x-twitter',
  href: 'https://x.com/daydreamlive',
  label: 'Daydream X'
}, {
  icon: 'discord',
  href: 'https://discord.gg/pF2Akym5bV',
  label: 'Daydream Discord'
}, {
  icon: 'instagram',
  href: 'https://www.instagram.com/daydreamlive_/',
  label: 'Daydream Instagram'
}, {
  icon: 'linkedin',
  href: 'https://www.linkedin.com/company/daydreamlive',
  label: 'Daydream LinkedIn'
}];

export const daydreamInfra = [{
  icon: 'torii-gate',
  label: 'gateway'
}, {
  icon: 'server',
  label: 'self-hosted'
}, {
  icon: 'toolbox',
  label: 'sdk'
}];

export const daydreamBadges = [{
  color: 'blue',
  label: 'Video'
}, {
  color: 'purple',
  label: 'AI'
}, {
  color: 'green',
  label: 'Realtime AI'
}];

export const StyledStep = ({title, icon, titleSize = 'h3', iconColor = null, titleColor = null, children, className = '', style = {}, ...rest}) => {
  const styledTitle = titleColor ? <span style={{
    color: titleColor
  }}>{title}</span> : title;
  return <Step title={styledTitle} icon={icon} iconColor={iconColor || undefined} titleSize={titleSize} className={className} style={style} {...rest}>
      {children}
    </Step>;
};

export const StyledSteps = ({children, iconColor, titleColor, lineColor, iconSize = '24px', className = '', style = {}, ...rest}) => {
  const resolvedIconColor = iconColor || 'var(--accent-dark, #18794E)';
  const resolvedTitleColor = titleColor || 'var(--lp-color-accent)';
  const resolvedLineColor = lineColor || 'var(--lp-color-accent)';
  return <div className={['docs-styled-steps', className].filter(Boolean).join(' ')} style={style} {...rest}>
      <style>{`
        .docs-styled-steps .steps > div > div.absolute > div {
          background-color: ${resolvedIconColor};
        }
        .docs-styled-steps .steps > div > div.w-full > p {
          color: ${resolvedTitleColor};
        }
        .docs-styled-steps .steps > div > div.absolute.w-px {
          background-color: ${resolvedLineColor};
        }
        .docs-styled-steps .steps > div:last-child > div.absolute.w-px::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 6px;
          height: 6px;
          background-color: ${resolvedLineColor};
          transform: translateX(-50%) rotate(45deg);
        }
      `}</style>
      <div>
        <Steps>{children}</Steps>
      </div>
    </div>;
};

export const IconBadgeWrapper = ({items = [], iconColor, size = 14, gap = "var(--lp-spacing-3)", style = {}, className = '', ...rest}) => {
  const wrapperStyle = {
    display: 'flex',
    flexWrap: 'wrap',
    alignItems: 'center',
    gap,
    margin: '0.25rem 0 0.5rem'
  };
  const tagStyle = {
    display: 'inline-flex',
    alignItems: 'center',
    gap: "var(--lp-spacing-1)",
    fontSize: `${size}px`,
    color: 'var(--lp-color-text-primary)'
  };
  return <div className={className} style={{
    ...wrapperStyle,
    ...style
  }} {...rest}>
      {items.map((item, i) => <span key={i} style={tagStyle}>
          <Icon icon={item.icon} size={size} color={iconColor || 'currentColor'} />
          {item.label}
        </span>)}
    </div>;
};

export const BadgeWrapper = ({badges, children, gap = '0.4rem', margin = '0.5rem 0 1.5rem 0', style = {}, className = '', ...rest}) => {
  const defaultStyle = {
    display: 'flex',
    flexWrap: 'wrap',
    alignItems: 'center',
    gap,
    margin
  };
  return <div className={className} style={{
    ...defaultStyle,
    ...style
  }} {...rest}>
      {badges ? badges.map((b, i) => <Badge key={i} color={b.color}>
              {b.label}
            </Badge>) : children}
    </div>;
};

export const TitledVideo = ({src, title, subtitle, arrow = false, borderRadius = "var(--lp-spacing-px-12)", style = {}, className = "", ...rest}) => {
  const prefersReducedMotion = typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  return <div className={className} style={{
    position: "relative",
    display: "block",
    borderRadius,
    overflow: "hidden",
    isolation: "isolate",
    ...style
  }} {...rest}>
      <video autoPlay={!prefersReducedMotion} muted loop={!prefersReducedMotion} playsInline src={src} style={{
    display: "block",
    width: "100%",
    height: "auto",
    margin: "0",
    padding: "0"
  }} />
      {title && <div style={{
    position: "absolute",
    top: "0",
    left: "0",
    right: "0",
    bottom: "0",
    display: "flex",
    paddingTop: "var(--lp-spacing-2)",
    alignItems: "flex-start",
    justifyContent: "center",
    zIndex: "10",
    pointerEvents: "none"
  }}>
            <span style={{
    background: "var(--lp-color-bg-overlay)",
    color: "var(--lp-color-on-accent)",
    fontSize: "18px",
    fontWeight: "800",
    padding: "6px 16px",
    borderRadius: "6px",
    border: "1px solid var(--lp-color-border-inverse)"
  }}>
            {title}
            <br />
            {subtitle}
          </span>
        </div>}
      {arrow && <div style={{
    position: "absolute",
    top: "0",
    left: "0",
    right: "0",
    bottom: "0",
    display: "flex",
    paddingTop: "var(--lp-spacing-2)",
    paddingRight: "var(--lp-spacing-2)",
    alignItems: "flex-start",
    justifyContent: "right",
    zIndex: "10",
    pointerEvents: "none"
  }}>
          <span>
            <Icon icon="arrow-up-right" size={14} color="var(--lp-color-on-accent)" />
          </span>
        </div>}
    </div>;
};

export const Video = ({src, title = "", author = "", caption, href = "", controls = true, autoPlay = false, loop = false, muted = false, children, className = "", style = {}, ...rest}) => {
  const buildCaption = () => {
    if (!author && caption) return caption;
    if (!author && !title) return null;
    return <span style={{
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      textAlign: "center",
      lineHeight: 1.2
    }}>
        <span>
          {author && (href ? <span style={{
      display: "flex",
      width: "100%",
      height: "fit-content",
      gap: "var(--lp-spacing-2)"
    }}>
                <a href={href} target="_blank" rel="noopener noreferrer">
                  <Icon icon="microphone" size={16} />
                  <span style={{
      borderBottom: "2px solid var(--lp-color-accent)",
      marginLeft: "0.2rem"
    }}>
                    <strong>{author}</strong>
                  </span>
                  <span style={{
      alignSelf: "flex-end",
      marginLeft: "var(--lp-spacing-px-6)"
    }}>
                    <Icon icon="arrow-up-right" size={12} color="var(--lp-color-accent)" />
                  </span>
                </a>
              </span> : <>
                <Icon icon="microphone" size={16} /> <strong>{author}</strong>
              </>)}
          {author && title ? ` • ${title}` : title}
        </span>
        {caption && <span style={{
      marginTop: "var(--lp-spacing-2)",
      fontStyle: "italic"
    }}>
            {caption}
          </span>}
      </span>;
  };
  const captionContent = buildCaption();
  const [linkHovered, setLinkHovered] = useState(false);
  return <div style={{
    position: "relative",
    display: "block"
  }}>
      {href && <a href={href} target="_blank" rel="noopener noreferrer" aria-label={title || author || "External link"} onMouseEnter={() => setLinkHovered(true)} onMouseLeave={() => setLinkHovered(false)} style={{
    position: "absolute",
    top: "var(--lp-spacing-2)",
    right: "var(--lp-spacing-3)",
    zIndex: "2",
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    padding: "var(--lp-spacing-px-6)",
    background: linkHovered ? "var(--lp-color-border-default)" : "transparent",
    border: `1.5px solid ${linkHovered ? "var(--lp-color-accent)" : "var(--lp-color-text-primary)"}`,
    borderRadius: "6px",
    textDecoration: "none",
    lineHeight: 0,
    cursor: "pointer",
    transition: "all 0.15s ease"
  }}>
          <Icon icon="arrow-up-right" size={14} color={linkHovered ? "var(--lp-color-accent)" : "var(--lp-color-text-primary)"} />
        </a>}
      <Frame className={className} style={style} {...captionContent ? {
    caption: captionContent
  } : {}} {...rest}>
        <video controls={controls} autoPlay={autoPlay} loop={loop} muted={muted} playsInline className="w-full aspect-video rounded-xl" src={src} title={title || author || "Video"} />
        {children}
      </Frame>
    </div>;
};

export const YouTubeVideo = ({embedUrl, url, title = "", author = "", hint = "", caption, className = "", style = {}, ...rest}) => {
  const toEmbedUrl = value => {
    if (!value || typeof value !== "string") return "";
    const source = value.trim();
    if (!source) return "";
    try {
      const parsed = new URL(source);
      const host = parsed.hostname.replace(/^www\./, "");
      if (host === "youtube.com" || host === "youtube-nocookie.com") {
        if (parsed.pathname.startsWith("/embed/")) return source;
        const videoId = parsed.pathname.startsWith("/shorts/") ? parsed.pathname.split("/").filter(Boolean)[1] : parsed.searchParams.get("v");
        if (!videoId) return "";
        const params = new URLSearchParams(parsed.search);
        params.delete("v");
        const query = params.toString();
        return `https://www.youtube.com/embed/${videoId}${query ? `?${query}` : ""}`;
      }
      if (host === "youtu.be") {
        const videoId = parsed.pathname.split("/").filter(Boolean)[0];
        if (!videoId) return "";
        const query = parsed.searchParams.toString();
        return `https://www.youtube.com/embed/${videoId}${query ? `?${query}` : ""}`;
      }
    } catch (_err) {
      return "";
    }
    return "";
  };
  const resolvedEmbedUrl = toEmbedUrl(embedUrl || url);
  if (!resolvedEmbedUrl) {
    return null;
  }
  const isValidYouTubeUrl = resolvedEmbedUrl.includes("youtube.com/embed/");
  if (!isValidYouTubeUrl) {
    console.warn("Invalid YouTube embed URL:", embedUrl || url);
    return null;
  }
  const buildCaption = () => {
    if (caption) return caption;
    if (!author && !title) return null;
    return <span style={{
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      textAlign: "center",
      lineHeight: 1.2
    }}>
        <span>
          {author && <>
              <Icon icon="microphone" size={16} /> <strong>{author}</strong>
            </>}
          {author && title ? `${" "} • ${title}` : title}
        </span>
      </span>;
  };
  const captionContent = buildCaption();
  return <Frame className={className} style={style} {...hint ? {
    hint
  } : {}} {...captionContent ? {
    caption: captionContent
  } : {}} {...rest}>
      <iframe className="w-full aspect-video rounded-xl" src={resolvedEmbedUrl} title={title || author || "YouTube Video"} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
    </Frame>;
};

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 BorderedBox = ({children, variant = "default", padding = "var(--lp-spacing-4)", borderRadius = "var(--lp-spacing-px-8)", accentBar = "", style = {}, className = "", ...rest}) => {
  const variants = {
    default: {
      border: "1px solid var(--lp-color-border-default)",
      backgroundColor: "var(--lp-color-bg-card)"
    },
    accent: {
      border: "1px solid var(--lp-color-accent)",
      backgroundColor: "var(--lp-color-bg-card)"
    },
    muted: {
      border: "1px solid var(--lp-color-border-default)",
      backgroundColor: "transparent"
    }
  };
  const accentBarColors = {
    accent: "var(--lp-color-accent)",
    positive: "var(--green-9)"
  };
  return <div data-docs-bordered-box="" data-accent-bar={accentBarColors[accentBar] ? "" : undefined} className={className} style={{
    ...variants[variant],
    padding: padding,
    borderRadius: borderRadius,
    ...accentBarColors[accentBar] ? {
      position: "relative",
      '--accent-bar-color': accentBarColors[accentBar]
    } : {},
    ...style
  }} {...rest}>
      {children}
    </div>;
};

export const SocialLinks = ({links, size = 20, gap = "var(--lp-spacing-3)", justify = "center", iconColor, color, className = "", style = {}, ...rest}) => {
  const resolvedIconColor = iconColor || color;
  const linkStyle = {
    border: "none",
    borderBottom: "none",
    textDecoration: "none",
    display: "inline-flex"
  };
  const colors = {
    discord: resolvedIconColor || "var(--lp-color-brand-discord)",
    twitter: resolvedIconColor || "var(--lp-color-text-primary)",
    github: resolvedIconColor || "var(--lp-color-brand-github)",
    forum: resolvedIconColor || "var(--lp-color-brand-forum)",
    website: resolvedIconColor || "var(--lp-color-accent)",
    blog: resolvedIconColor || "var(--lp-color-accent)",
    globe: resolvedIconColor || "var(--lp-color-brand-globe)",
    twitch: resolvedIconColor || "var(--lp-color-brand-twitch)",
    youtube: resolvedIconColor || "var(--lp-color-brand-youtube)",
    instagram: resolvedIconColor || "var(--lp-color-brand-instagram)",
    linkedin: resolvedIconColor || "var(--lp-color-brand-linkedin)"
  };
  const iconColorMap = {
    discord: "discord",
    "x-twitter": "twitter",
    github: "github",
    "comment-pen": "forum",
    "pen-line": "blog",
    "pencil-line": "blog",
    globe: "globe",
    "book-open": "website",
    twitch: "twitch",
    youtube: "youtube",
    instagram: "instagram",
    linkedin: "linkedin"
  };
  const defaultLinks = [{
    icon: "discord",
    href: "https://discord.com/invite/livepeer",
    label: "Livepeer Discord"
  }, {
    icon: "globe",
    href: "https://livepeer.org",
    label: "Livepeer Website"
  }, {
    icon: "github",
    href: "https://github.com/livepeer",
    label: "Livepeer GitHub"
  }, {
    icon: "comment-pen",
    href: "https://forum.livepeer.org",
    label: "Livepeer Forum"
  }, {
    icon: "pen-line",
    href: "https://livepeer.org/blog",
    label: "Livepeer Blog"
  }, {
    icon: "x-twitter",
    href: "https://x.com/livepeer",
    label: "Livepeer X"
  }];
  const items = links || defaultLinks;
  return <div className={className} style={style} {...rest}>
      <style>{`
        .social-links a {
          border: none;
          border-bottom: none;
        }
      `}</style>
      <span className="social-links" style={{
    display: "flex",
    justifyContent: justify,
    gap: gap,
    marginTop: "var(--lp-spacing-2)"
  }}>
        {items.map((item, i) => <a key={i} href={item.href} target="_blank" rel="noopener noreferrer" aria-label={item.label} style={linkStyle}>
            <Tooltip headline={item.label}>
              <Icon icon={item.icon} size={size} color={colors[iconColorMap[item.icon] || "website"] || "var(--lp-color-accent)"} aria-hidden="true" />
            </Tooltip>
          </a>)}
      </span>
    </div>;
};

export const CustomCardTitle = ({icon, title, variant = "card", iconSize, style = {}, className = "", ...rest}) => {
  const variants = {
    card: {
      display: 'flex',
      alignItems: 'center',
      gap: "var(--lp-spacing-2)",
      marginBottom: "var(--lp-spacing-3)",
      color: 'var(--lp-color-text-primary)',
      fontSize: '1rem',
      fontWeight: 600
    },
    accordion: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: "var(--lp-spacing-2)"
    },
    tab: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: '0.4rem',
      fontSize: '0.875rem'
    }
  };
  const sizes = {
    card: 20,
    accordion: 18,
    tab: 14
  };
  const size = iconSize || sizes[variant] || 20;
  const baseStyle = variants[variant] || variants.card;
  return variant === 'card' ? <div className={className} style={{
    ...baseStyle,
    ...style
  }} {...rest}>
      {typeof icon === 'string' ? <Icon icon={icon} size={size} color="var(--lp-color-accent)" /> : icon}
      {title}
    </div> : <span className={className} style={{
    ...baseStyle,
    ...style
  }} {...rest}>
      {typeof icon === 'string' ? <Icon icon={icon} size={size} color="var(--lp-color-accent)" /> : icon}
      {title}
    </span>;
};

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>;
};

<IconBadgeWrapper style={{ margin: "-1rem 0 1rem 0" }} iconColor="var(--accent)" size={16} items={daydreamInfra} />

<BadgeWrapper style={{margin: "0 0 1rem 0"}} badges={daydreamBadges} />

<CenteredContainer maxWidth="fit-content">
  <BorderedBox style={{margin: 0, padding: "0.5rem 1rem 1rem 1rem"}} variant="accent">
    <SocialLinks iconColor="var(--text)" links={daydreamSocials} />
  </BorderedBox>
</CenteredContainer>

<Info>
  This page is maintained by the Daydream Team. Help & support available via the [Daydream Discord]('https://discord.gg/pF2Akym5bV').
</Info>

<Video src="/snippets/assets/media/videos/daydream-hero-demo.mp4" alt="Daydream Hero Video" href="https://daydream.live" />

{/* explains the product */}

Daydream is an **open-source toolkit** for [world models](https://www.nvidia.com/en-us/glossary/world-models/) and **real-time AI video**. It provides the tools to build with open world models and real-time AI, and the community where creatives, builders, and researchers advance the field together.

Daydream runs on Livepeer’s decentralised GPU network. It uses the [Daydream gateway](../../developers/) to route real-time AI inference jobs (e.g. Style transfer, image-to-video) to the network.

<CustomDivider style={{margin: "-0.5rem 0 -2.5rem 0"}} />

## Key Features

* **Real-time AI video** - Transform livestreams and video with text prompts and style transfer (e.g. Turn a face into animated art in real time).
* **World models** - Build and experiment with open world models for generative and interactive video.
* **Creative workflows** - Use StreamDiffusion-style pipelines and low-latency inference for live remixing and effects.
* **Hosted app** - Use [daydream.live](https://daydream.live) to try the experience; integrate via the Daydream gateway and APIs for your own apps.

<YouTubeVideo embedUrl="https://www.youtube.com/embed/uLXtpFVrtP4" title="Jeff Liang - StreamV2V & Recent Advancements (Realtime Video AI Summit 2025 by Daydream)" caption="**Realtime Video AI Summit 2025** (Daydream, San Francisco)" />

<CustomDivider style={{margin: "0 0 -2.5rem 0"}} />

## Try Daydream

<CardGroup cols={2}>
  <Card title={<CustomCardTitle icon="book-open" title="Get Started Guide" />} href="https://blog.livepeer.org/getting-started-with-daydream-transform-your-videos-with-ai-magic/" img="https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=694d7f60d694e00d4fa4163554159ed7" data-og-width="800" width="800" data-og-height="450" height="450" data-path="snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=280&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=b3cc26d4b18f9fe2e4ac40d63349e18d 280w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=560&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=e98454921d46030189bfab5a0996072b 560w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=840&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=7827db25d99669eebb6dd654f3bb96a3 840w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=1100&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=49ba323160b66c1e1e794a0c25cec9b8 1100w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=1650&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=de9172b7b3cd8bb0bdca2fce54fc210a 1650w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=2500&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=a8d8d8934e3b1e9ccdf6f59c0aae9b26 2500w">
    Transform videos with AI: prompts and practical tips.
  </Card>

  <Card title={<CustomCardTitle icon="bolt-lightning" title="Quickstart" />} href="https://docs.daydream.live/" img="https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=6a380a17544a2d010708f86200baf6dc" data-og-width="800" width="800" data-og-height="450" height="450" data-path="snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=280&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=472590dd0a405e4d9ce4ab0447c6b2af 280w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=560&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=c01173a920b8c04f755dfd23ea51a06a 560w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=840&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=94a4c60148816b06374e127d7769a56e 840w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=1100&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=b7146213cff7f3ab0505bd8b2b1d4004 1100w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=1650&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=4badd14221eccd52ef8230c1df64646f 1650w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=2500&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=7ef460f84bc0b55e4604b4af23717abe 2500w">
    Get the Daydream API running in minutes.
  </Card>

  <Card title={<CustomCardTitle icon="wand-magic-sparkles" title="Try the App" />} href="https://app.daydream.live/" img="https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=621be383a637859d4a372c6f0e7992b6" data-og-width="800" width="800" data-og-height="450" height="450" data-path="snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=280&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=2479d3bc0747534e24989a6e024842af 280w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=560&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=abd38f5667a38baafa1cecca9ed6af00 560w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=840&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=cae546f8abd916d78cd7890023a6994e 840w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=1100&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=7b2e48affaa2797b1ec2550772ef7f27 1100w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=1650&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=5716138f33b466415c704f38fcb6d966 1650w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=2500&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=79f95f78e80bf93104f09a30f626ac57 2500w">
    Open the Daydream app and try real-time AI video transformation.
  </Card>

  <Card title={<CustomCardTitle icon="diagram-project" title="Explore Workflows" />} href="https://app.daydream.live/explore?tab=workflows" img="https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=cf72e36268ebd78b081b320237b580a8" data-og-width="800" width="800" data-og-height="450" height="450" data-path="snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=280&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=e20c09a196bd2df54fd903966289c5eb 280w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=560&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=3f309ab5597b30d6ff98165a26658443 560w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=840&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=9ece5f642101ee5d1c19170a836e6ade 840w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=1100&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=cd56a1674ef2044ae3800f848cb5fab3 1100w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=1650&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=2ff9367988c7893a3cc17a03670e7df3 1650w, https://mintcdn.com/na-36-changelog-go-livepeer-2026-05-18/Wp7NVxMLScubv9qC/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=2500&fit=max&auto=format&n=Wp7NVxMLScubv9qC&q=85&s=c4bfc8dcae6355a206b4f1f282bbf8a5 2500w">
    Browse community-built composable AI workflows.
  </Card>
</CardGroup>

<CustomDivider style={{margin: "-0.5rem 0 -2.5rem 0"}} />

## Get Started

<StyledSteps>
  <StyledStep title="Try the app" icon="wand-magic-sparkles">
    1. Go to [daydream.live](https://daydream.live).
    2. Allow camera access when prompted.
    3. Enter a text prompt to transform your video in real time (e.g. Style or character descriptions).
    4. Use the controls to adjust strength and see the result stream.

    This uses Livepeer’s network via the Daydream gateway for real-time AI inference.
  </StyledStep>

  <StyledStep title="Build with the Daydream API" icon="code">
    1. Read the [Daydream docs](https://docs.daydream.live/) for setup and authentication.
    2. Get the required API keys or gateway credentials from the Daydream dashboard or docs.
    3. Use the Daydream API or SDK (as documented at [docs.daydream.live](https://docs.daydream.live/)) to send video frames and receive AI-processed output.

    <Info>
      Exact endpoints, SDK usage, and pipeline options are documented in the [Daydream documentation](https://docs.daydream.live/). Use that as the source for API reference and code samples.
    </Info>
  </StyledStep>

  <StyledStep title="Run or connect a gateway" icon="server">
    If you are operating infrastructure that serves Daydream-style jobs (e.g. Running a gateway that routes to the Livepeer network), see [Using the Daydream Gateway](/v2/gateways/portal) for gateway provider details.
  </StyledStep>
</StyledSteps>

<CustomDivider style={{margin: "-0.5rem 0 -2.5rem 0"}} />

## Daydream Resources

<CenteredContainer maxWidth="fit-content">
  <BorderedBox style={{margin: "0 0 1rem 0", padding: "0.5rem 1rem 1rem 1rem"}} variant="accent">
    <SocialLinks iconColor="var(--text)" links={daydreamSocials} />
  </BorderedBox>
</CenteredContainer>

<CardGroup cols={2}>
  <Card title={<CustomCardTitle title="Daydream docs" icon="newspaper"/>} href="https://docs.daydream.live/" arrow>
    Full documentation: setup, API reference, and pipeline guides.
  </Card>

  <Card title={<CustomCardTitle title="GitHub" icon="github"/>} href="https://github.com/daydreamlive/" arrow>
    Scope: open-source real-time AI video tooling from Daydream.
  </Card>

  <Card title={<CustomCardTitle title="Discord" icon="discord"/>} href="https://discord.gg/pF2Akym5bV" arrow>
    Community and support for builders, creatives, and researchers.
  </Card>

  <Card title={<CustomCardTitle title="Daydream blog" icon="pencil-line"/>} href="https://blog.daydream.live/" arrow>
    Tutorials, creator stories, and research.
  </Card>
</CardGroup>