> ## Documentation Index
> Fetch the complete documentation index at: https://docs.livepeer.org/llms.txt
> Use this file to discover all available pages before exploring further.

# 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)", margin = '0.25rem 0 0.5rem', style = {}, className = '', ...rest}) => {
  const wrapperStyle = {
    display: 'flex',
    flexWrap: 'wrap',
    alignItems: 'center',
    gap,
    margin
  };
  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)", margin = "", 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,
    ...margin ? {
      margin
    } : {},
    ...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 margin="-1rem 0 1rem 0" iconColor="var(--accent)" size={16} items={daydreamInfra} />

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

<CenteredContainer maxWidth="fit-content">
  <BorderedBox 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/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=4089e101dfa6593fb427098a3ee187a5" 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/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=280&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=2a58fc0b21c92bd387b738e6c43c6062 280w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=560&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=ad0b457bfea7fefc73648be06d37b3b1 560w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=840&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=7a1f3a36ec0b1e893165c85712c1519b 840w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=1100&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=f8247cc13ca566151cc42e754993214f 1100w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=1650&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=aab0da885fe2448bdd6a8e3f8b256425 1650w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=2500&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=e1ece3dcff37b501a87eb339b0642845 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/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=dfc6a174d1270a2a129df1e048e31110" 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/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=280&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=b5e08545d58f7c76ab4b02c3cc4bc06e 280w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=560&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=7bf0c26e0d70b305f42c34a4a0aa3796 560w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=840&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=92bb106d39879e57265b4443fce83139 840w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=1100&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=44e8201dd242f71bb09d5880250f8799 1100w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=1650&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=be865b256224aa63b42438bd1e932baa 1650w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=2500&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=5d4d3e6ba5502b7addf6806df70c6010 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/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=27dfba4a786bf3d6c09648a79c3abc5e" 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/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=280&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=fbba2560affacf075533797cdb4ea7a0 280w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=560&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=250894a19799b49f62fe94b8df34b3bf 560w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=840&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=494693b382310d4c9dd596b583fd8f09 840w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=1100&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=806b0cec5414b747e676301103a8caf7 1100w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=1650&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=25ea759fa707b660e18a8913aa7a83ee 1650w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=2500&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=561c43f7be4c1bff9a1208944c9ed239 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/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=761f819cc6cd2c8aed166fa1fe439e50" 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/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=280&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=d2960bf4f5b1f2fec0f7a41ff92e8cf7 280w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=560&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=4b1431d419544ac9f98445ecd6620d2b 560w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=840&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=23b07c97db4c5ae41609772eae4aa9a9 840w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=1100&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=9e7d9e2d89b7dd392c5a0aa8356be958 1100w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=1650&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=76886ba5db4dda8f193a93d21ed0f626 1650w, https://mintcdn.com/na-36/O-FYjjV6ev2CVZh-/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=2500&fit=max&auto=format&n=O-FYjjV6ev2CVZh-&q=85&s=62db829ee54616239fc774f11be00200 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 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>