Slop Machine

Documentation Index ​

Welcome to the Slop Machine documentation. Here you will find guides, API references, component documentation, and examples for integrating AI-generated images, videos, text, and multi-step pipelines into your applications.

🚀 Getting Started ​

  • Getting Started
    Introduction to the Slop Machine SDK, installation instructions for React and Svelte, and core architectural concepts (Buckets vs Pipelines).

⚡ API Reference ​

Direct cloud function endpoints for media rendering, pipeline execution, and file attachments:

  • Render Pipeline API
    Execute multi-step AI pipelines dynamically using secret pipeline keys. Supports prompt chaining (text → video → composite), dynamic variables, and custom metadata persistence.
  • Render Image API
    Generate and retrieve dynamic images using bucket templates, custom variables, aspect ratio constraints, and cache controls.
  • Render Video API
    Generate dynamic AI video clips with motion models, custom variables, durations, and aspect ratios.
  • Render Text API
    Generate AI copywriting, dynamic slogans, and text snippets using templated prompt buckets.
  • Upload Temp Attachment API
    Upload temporary media files (images/attachments) to pass to generation endpoints via the attachments parameter.
  • Rate Result API
    Rate generated results as "good", "bad", or reset ratings with parent bucket/pipeline domain whitelist authorization.

⚛️ React SDK (@slopmachine/react) ​

Components and hooks tailored for React applications with built-in loading states and zero layout shifts:

  • <SlopImage /> Component
    Render generative images with automatic shimmer placeholders, aspect ratio preservation, custom loader slots, and preloading helpers.
  • <SlopVideo /> Component
    Render generative videos with looping, autoplay, shimmer loading states, and poster fallbacks.
  • <SlopText /> Component
    Render dynamic generative copy with custom loading skeletons and fallback support.

🟧 Svelte SDK (@slopmachine/svelte) ​

Idiomatic Svelte components for rendering generative media:

🛠️ Core Package (@slopmachine/core) ​

Shared TypeScript utilities, types, and client-side execution helpers:

  • URL Builders: buildImageUrl, buildVideoUrl, buildTextUrl, buildPipelineUrl
  • Preloading Utilities: preloadImage, preloadVideo, preloadText
  • Pipeline Execution: executePipeline for programmatic, typed server/client pipeline execution
  • File Upload Helpers: uploadTempAttachment for base64 file uploads

🎮 Interactive Demos ​

Explore live interactive sandboxes with real-time parameter tweaking: