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

# Create assets

> Create images, video, vector graphics, animation, and audio assets, then follow the authoritative guides for each workflow.

export const CreateAssetsCover = () => <div className="chat-mkt" role="img" aria-label="A creative canvas with image, video, vector, and audio elements" style={{
  margin: "28px 0 42px",
  borderTop: 0,
  paddingTop: 0
}}>
    <div className="chat-use-case-visual" style={{
  aspectRatio: "auto",
  minHeight: "clamp(220px, 34vw, 320px)",
  overflow: "hidden",
  background: "radial-gradient(circle at 50% -16%, rgba(255,255,255,.82), transparent 43%), radial-gradient(circle at 4% 96%, rgba(255,184,146,.48), transparent 38%), linear-gradient(140deg, #ff764d, #ff3c00 60%, #c92d00)"
}}>
      <div aria-hidden="true" style={{
  position: "absolute",
  inset: 0,
  background: "linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 49%, rgba(111,24,0,.2))"
}} />
      <div aria-hidden="true" style={{
  position: "relative",
  zIndex: 1,
  display: "grid",
  width: "100%",
  minHeight: "inherit",
  placeItems: "center",
  padding: "clamp(14px, 3vw, 28px)",
  boxSizing: "border-box"
}}>
        <div style={{
  position: "absolute",
  left: "clamp(14px, 9%, 88px)",
  top: "22%",
  width: "clamp(44px, 9vw, 72px)",
  height: "clamp(38px, 8vw, 62px)",
  padding: 7,
  border: "1px solid rgba(255,255,255,.56)",
  borderRadius: 14,
  background: "rgba(255,255,255,.16)",
  boxShadow: "0 12px 24px rgba(55,27,18,.15)",
  backdropFilter: "blur(5px)",
  boxSizing: "border-box"
}}>
          <span style={{
  position: "absolute",
  top: "24%",
  right: "21%",
  width: 5,
  height: 5,
  borderRadius: 999,
  background: "rgba(255,255,255,.86)"
}} />
          <span style={{
  position: "absolute",
  left: "-5%",
  right: "-5%",
  bottom: "-16%",
  height: "68%",
  transform: "rotate(27deg)",
  borderTop: "1px solid rgba(255,255,255,.68)",
  background: "rgba(255,255,255,.18)"
}} />
        </div>
        <div style={{
  position: "absolute",
  right: "clamp(14px, 9%, 88px)",
  top: "22%",
  display: "grid",
  width: "clamp(44px, 9vw, 72px)",
  height: "clamp(38px, 8vw, 62px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.56)",
  borderRadius: 14,
  background: "rgba(255,255,255,.16)",
  boxShadow: "0 12px 24px rgba(55,27,18,.15)",
  backdropFilter: "blur(5px)"
}}>
          <span style={{
  width: 0,
  height: 0,
  marginLeft: 4,
  borderTop: "10px solid transparent",
  borderBottom: "10px solid transparent",
  borderLeft: "15px solid rgba(255,255,255,.86)"
}} />
        </div>
        <div style={{
  position: "absolute",
  left: "clamp(22px, 14%, 128px)",
  bottom: "clamp(18px, 10%, 46px)",
  display: "grid",
  width: "clamp(38px, 7vw, 58px)",
  height: "clamp(38px, 7vw, 58px)",
  placeItems: "center",
  border: "1px solid rgba(255,255,255,.52)",
  borderRadius: 15,
  background: "rgba(255,255,255,.15)",
  boxShadow: "0 12px 24px rgba(55,27,18,.13)",
  backdropFilter: "blur(5px)"
}}>
          <svg viewBox="0 0 24 24" width="56%" fill="none" stroke="rgba(255,255,255,.86)" strokeWidth="1.6">
            <path d="M5 19 12 4l7 15H5Z" />
            <circle cx="12" cy="12" r="2.2" fill="rgba(255,255,255,.26)" />
          </svg>
        </div>
        <div style={{
  position: "absolute",
  right: "clamp(22px, 14%, 128px)",
  bottom: "clamp(18px, 10%, 46px)",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  gap: 3,
  width: "clamp(40px, 8vw, 62px)",
  height: "clamp(38px, 7vw, 58px)",
  border: "1px solid rgba(255,255,255,.52)",
  borderRadius: 15,
  background: "rgba(255,255,255,.15)",
  boxShadow: "0 12px 24px rgba(55,27,18,.13)",
  backdropFilter: "blur(5px)"
}}>
          {[10, 20, 14, 25, 12].map((height, index) => <span key={index} style={{
  width: 3,
  height,
  borderRadius: 999,
  background: index === 3 ? "rgba(255,255,255,.88)" : "rgba(255,255,255,.52)"
}} />)}
        </div>
        <div style={{
  position: "relative",
  display: "grid",
  width: "clamp(174px, 34vw, 280px)",
  minWidth: "min(54%, 250px)",
  minHeight: "clamp(154px, 26vw, 212px)",
  padding: "clamp(12px, 2vw, 18px)",
  border: "1px solid rgba(255,255,255,.66)",
  borderRadius: 22,
  background: "linear-gradient(145deg, rgba(255,255,255,.42), rgba(255,255,255,.12))",
  boxShadow: "0 22px 42px rgba(65,21,7,.24)",
  backdropFilter: "blur(8px)",
  boxSizing: "border-box"
}}>
          <div style={{
  display: "flex",
  alignItems: "center",
  gap: 6
}}>
            {[0, 1, 2].map(dot => <span key={dot} style={{
  width: 7,
  height: 7,
  borderRadius: 999,
  background: dot === 0 ? "rgba(255,255,255,.9)" : "rgba(255,255,255,.36)"
}} />)}
          </div>
          <div style={{
  display: "grid",
  gridTemplateColumns: "1.16fr .84fr",
  gap: 8,
  minHeight: "clamp(105px, 18vw, 150px)",
  marginTop: "clamp(13px, 2.3vw, 19px)"
}}>
            <div style={{
  position: "relative",
  overflow: "hidden",
  border: "1px solid rgba(255,255,255,.48)",
  borderRadius: 10,
  background: "linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.08))"
}}>
              <span style={{
  position: "absolute",
  left: "12%",
  bottom: "12%",
  width: "76%",
  height: "54%",
  transform: "skewY(-27deg)",
  borderTop: "1px solid rgba(255,255,255,.68)",
  background: "rgba(255,255,255,.16)"
}} />
            </div>
            <div style={{
  display: "grid",
  gap: 8
}}>
              <span style={{
  border: "1px solid rgba(255,255,255,.42)",
  borderRadius: 9,
  background: "rgba(255,255,255,.16)"
}} />
              <span style={{
  border: "1px solid rgba(255,255,255,.32)",
  borderRadius: 9,
  background: "rgba(255,255,255,.08)"
}} />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>;

<CreateAssetsCover />

Ask Replit to create the media your work needs, then refine the result in the Conversation or the product surface that owns that workflow. Choose the asset path that matches the intended outcome.

## Choose an asset type

<section className="chat-mkt chat-workflow-grid has-visuals catalog-three-up">
  <a className="chat-example has-visual" href="/features/agent/image-generation">
    <div className="chat-use-case-visual palette-blush">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="image" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="image" size={19} />
    </span>

    <div className="chat-card-title">Generate images</div>

    <p>
      Create custom images, illustrations, backgrounds, icons, and other visual
      content for a Project.
    </p>

    <div className="chat-card-link">Open Image Generation →</div>
  </a>

  <a className="chat-example has-visual" href="/design/toolbar#generate">
    <div className="chat-use-case-visual palette-stone">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="photo-film" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="photo-film" size={19} />
    </span>

    <div className="chat-card-title">Generate video clips</div>

    <p>
      Create short motion clips and animations with Replit Design's Generate
      media tools.
    </p>

    <div className="chat-card-link">Open the Design guide →</div>
  </a>

  <a className="chat-example has-visual" href="/design/toolbar#generate">
    <div className="chat-use-case-visual palette-orange">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="bezier-curve" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="bezier-curve" size={19} />
    </span>

    <div className="chat-card-title">Generate vector graphics</div>

    <p>
      Create SVG icons, logos, diagrams, and stylized illustrations in Replit
      Design.
    </p>

    <div className="chat-card-link">Open the Design guide →</div>
  </a>

  <a className="chat-example has-visual" href="/features/artifact-types/animated-videos">
    <div className="chat-use-case-visual palette-ink">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="film" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="film" size={19} />
    </span>

    <div className="chat-card-title">Create an animated video</div>

    <p>
      Build programmatic motion graphics through a Conversation and export the
      result as a video.
    </p>

    <div className="chat-card-link">Open Animated Videos →</div>
  </a>

  <a className="chat-example has-visual" href="/features/agent/audio-generation">
    <div className="chat-use-case-visual palette-blush">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="waveform" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="waveform" size={19} />
    </span>

    <div className="chat-card-title">Generate audio</div>
    <p>Create music, sound effects, or spoken narration for an app.</p>
    <div className="chat-card-link">Open Audio Generation →</div>
  </a>
</section>

Asset creation produces a result now. For work that should repeat on a schedule, continue to [Run routine tasks](/chat/routines).

Generated video clips and Animated Videos use different workflows. Animated Videos are programmatic motion graphics that you can export as MP4. For a visual-assets example, see [Design your first screen](/design/design-your-first-screen).

## Bring in current information

Web Search does not create an asset. Use it when an image, audio clip, video, or graphic should be informed by current information, then ask Replit to create the appropriate asset from that direction.

<section className="chat-mkt chat-workflow-grid has-visuals">
  <a className="chat-example has-visual" href="/features/agent/web-search">
    <div className="chat-use-case-visual palette-stone">
      <div className="chat-use-case-window">
        <i />

        <i />

        <i />

        <b />

        <b />

        <b />
      </div>

      <em>
        <Icon icon="globe" size={24} color="#ffffff" />
      </em>
    </div>

    <span>
      <Icon icon="globe" size={19} />
    </span>

    <div className="chat-card-title">Search the web</div>

    <p>
      Gather current information and cited sources before creating an asset.
    </p>

    <div className="chat-card-link">Open Web Search →</div>
  </a>
</section>