> ## Documentation Index
> Fetch the complete documentation index at: https://na-36-handover-docs-v2-into-docs-v2-dev-20260518.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-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=360f5cbc79674a55358411568da5d29b" 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-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=280&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=dab4b51edacef066a3550edd835f11f4 280w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=560&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=d2b01ae849c946c2461c482df3033359 560w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=840&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=545b093b0c445bae835330d5f27c36b5 840w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=1100&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=c7a63cdcf4fea699ffd4313007b702e7 1100w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=1650&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=fef1fe900072a5992724d03883363e60 1650w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=2500&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=d7987bcfe4a2e2aa5bf903a03d2f77b0 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-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=7e6b2eece9e76d263653b67b23a11fc7" 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-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=280&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=bc3483c1ab1b87c14dfb1018d15c95ba 280w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=560&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=a5178d6b693a4e1fb76d4ef7e26b5170 560w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=840&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=13a3900ecf87bb264d96bd21084c0b35 840w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=1100&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=7a72e0d05a5107a35f046d13fef907b5 1100w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=1650&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=d641ab97b21c684f5e8152b45d582b8c 1650w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=2500&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=d933a66c60d53dc07d3671bb22fdd6c1 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-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=620af7e825d531dd87436185b2690c71" 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-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=280&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=f9662f0e5a5177db027066f5984398e1 280w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=560&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=9d995f3917f3005201c985b79e7edfa1 560w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=840&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=71b6ef1d93ce6070615d2599046fc10e 840w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=1100&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=9efdd87c10e4d608d7b847da70a0122b 1100w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=1650&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=f413c0472dce04cc8b006ea6f6f6f3e8 1650w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=2500&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=ca14bcb631afa5375a72fdcf76df9051 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-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=3ed5915370a71589c529fc9dfbf43f51" 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-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=280&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=7bf3759f1bc96fd1af5656918bbfb7da 280w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=560&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=da03d577c7073887f3062559848f90ad 560w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=840&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=1cffc89c77331e5d654ca0b33a54c7a5 840w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=1100&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=1bfe4a0b3263255522153759eb0ca86d 1100w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=1650&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=4b3cc78cc9756de8a1afd2cc3249e760 1650w, https://mintcdn.com/na-36-handover-docs-v2-into-docs-v2-dev-20260518/nfSHQXDkhky-ggWe/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=2500&fit=max&auto=format&n=nfSHQXDkhky-ggWe&q=85&s=fbae612014579d9f30e367704fd4ca1e 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>