> ## Documentation Index
> Fetch the complete documentation index at: https://na-36-mintlify-aebde2c5.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-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=a1968fe4261c855a6a7f444eed984143" 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-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=280&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=7edae4c61f142b5055a334c5044649e4 280w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=560&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=2cb21e35eb06e4d73b97e8816746e84e 560w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=840&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=50fbb6c85fc102dabbc1101bc5e9f489 840w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=1100&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=1ce96bd71bb0ae21014c8caa29284fcb 1100w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=1650&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=447c400fe97ead838109cd7db451f057 1650w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=2500&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=d224d4e034bf1927fb6f1dfa8b60b1fb 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-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=2018d592ea269dd9c728ea696652e4bf" 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-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=280&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=241d0dcbb01fbe0ee0a8a5fd69c37cd5 280w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=560&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=8ad50a98421f05e879beef71e0e2eeac 560w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=840&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=ee2cf3d3d85fc1531d1df4e29ca6beab 840w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=1100&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=d4dc634fef5520f307b54eed688cf9ca 1100w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=1650&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=1430d62d2c816c320cd4238503cf4234 1650w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=2500&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=02398caf36148f09bad9b49312b34c37 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-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=9b0be1f455d7bfd0bd34b076b7dae646" 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-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=280&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=e136f8cd57e6a218e3091a683eaac55d 280w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=560&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=116c4552865bff27938f2a96b98bb991 560w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=840&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=3539bbf7f54d8b5da55318e7b7d0c57b 840w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=1100&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=2d49b264e4d40f03d46a1ca6856284f1 1100w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=1650&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=b290e3865ac79f5882eef40a927ca8f8 1650w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=2500&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=2c45fab97c9cc820e6156ccafb5bf80b 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-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=7e931411535053a056979eee4520e19d" 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-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=280&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=23ac21b5dc0d6cdcf72f87267f6efc4a 280w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=560&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=35a33220eb2d9a3d33507a378b78c9c1 560w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=840&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=8914a5e5335ee3475c914c3103101189 840w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=1100&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=5ea5489dfb986763d1064da031d06ca3 1100w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=1650&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=1f20fb51118ff35198393968ff2f4930 1650w, https://mintcdn.com/na-36-mintlify-aebde2c5/wYbI2LPhUmcAkCXV/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=2500&fit=max&auto=format&n=wYbI2LPhUmcAkCXV&q=85&s=934289e1a6cf11ecc232aaba0f1fdef0 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>