> ## Documentation Index
> Fetch the complete documentation index at: https://na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603.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-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=7e96f685ecbe24ee8806c06d0d2e27b5" 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-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=280&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=455b71c46d717a83b4f88fe66124edc4 280w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=560&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=1b4e3b6e0f8ac8b4a95131ef15ebe8d9 560w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=840&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=8841db438fbd6b96d2c3ba2baa0ec94b 840w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=1100&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=a88d83aa097ffd014241174035ee948b 1100w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=1650&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=27c584684317ad9a03c1645a0d7c0667 1650w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Get-Started.png?w=2500&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=52fd9104d6f3ee5d4bdcf0246cc1d820 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-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=26feef2a3fcb2b9643cd3d0c36d1869b" 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-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=280&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=638590b187ae2a79350c62ee5afe7e68 280w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=560&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=e630eb8cb717e863229aa0cf97626d56 560w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=840&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=937109fe8b6900b38d07a6db4762c2f5 840w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=1100&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=12f98fcd2177637b7debfed5eb952c7e 1100w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=1650&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=28fdfa53b092664618ae49517d439ef0 1650w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Quickstart.png?w=2500&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=702119033480c5bc69dd00aa5f2c61d5 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-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=b8e9507569e2a6d08c40dba7467f64be" 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-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=280&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=ea7c8b5f94e59de7d7ab277e548c5cf2 280w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=560&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=0048774776cfcdcf68738d414be0ae3a 560w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=840&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=e03334e4446d92e8d96736b5c8a61e3d 840w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=1100&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=9b5c4870b612000a6175cac6940df5d8 1100w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=1650&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=975a09fc8496cbc0b5af50c410146ccc 1650w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Try-App.png?w=2500&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=648a04540791fdc9eafae9909dae7329 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-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=bfcd3774b346e105a0b3af96f11fae94" 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-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=280&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=2857f72e64aa8c1b4b2b7dcc3361ab64 280w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=560&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=6c8d22eee82d15dd4558072985eea67c 560w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=840&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=3da94a7ce067de21307167de10305f37 840w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=1100&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=77b56738714b3fbb7a2636736100c660 1100w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=1650&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=c5b57295bd9446cacb43d42ea8e9e66c 1650w, https://mintcdn.com/na-36-merge-docs-v2-dev-draft-into-docs-v2-20260603/lFD5Mtu3hubBxvOS/snippets/assets/media/heros/solutions/daydream/Daydream_Hero_Workflows.png?w=2500&fit=max&auto=format&n=lFD5Mtu3hubBxvOS&q=85&s=62684dfa171e6b6b91194067add9e453 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>