Integrations
Everything you need to embed your screenshots, capture from the CLI binary, or automate with the REST API.
How integration endpoints work
Each endpoint gives you a single URL for a captured asset — screenshot or clip. Use query parameters to select the variant you need — language, theme, viewport — and optionally resize or convert the output. The URL always serves the latest version, so your site stays up to date without code changes. Screenshots are served as WebP, clips as GIF (or MP4).
Endpoint
GET /api/v1/assets/{endpointId}Query parameters
| Parameter | Example | Default | Description |
|---|---|---|---|
| lang | fr | Latest available | Language variant (e.g. en, fr, de) |
| theme | dark | Latest available | Theme variant (light or dark) |
| target | desktop-1440x900 | Latest available | Viewport/device target ID |
| w | 800 | Original size | Resize width in pixels (max 2560, never upscales) |
| quality | 80 | 80 | WebP compression quality 1-100 (ignored for PNG) |
| format | webp | webp | Output format. Screenshots: webp (default) or png. Clips: gif (default) or mp4. |
| info | 1 | — | Set to 1 to return JSON metadata about the asset instead of the asset itself |
Responses
| Status | Description |
|---|---|
| 200 | Returns the asset (WebP for screenshots, GIF or MP4 for clips) |
| 304 | Not modified — the browser already has the latest version |
| 400 | The endpoint ID is invalid |
| 404 | Endpoint not found, or no capture has been run yet |
| 410 | The capture has been deleted (trashed) |
| 500 | Something went wrong on our end |
| 502 | The capture is temporarily unavailable — try again shortly |
Caching
All assets are cached for up to 1 hour in the browser. After expiry, the browser refreshes them in the background so users never see a loading delay. When a new capture is published, server caches are cleared automatically — the new version is available on the next load.
To force an immediate refresh in the browser, use Cmd+Shift+R (Mac) or Ctrl+Shift+R (Windows/Linux). This bypasses the local cache and fetches the latest version from the server.
Integration examples
<script src="https://autokap.app/api/v1/loader.js" data-ak-base="https://yourapp.com/api/autokap/assets" defer></script>
<img data-ak-id="a1b2c3d4e5f6a1b2c3d4e5f6a1b2" data-ak-lang="en" data-ak-theme="light" alt="Screenshot" />Replace the example ID with your actual endpoint ID — you'll find it in the Integrations section of your project.
Auto loader
The AutoKap loader is a lightweight script (~1.5 KB) that automatically picks the optimal size and quality for each visitor. It detects the container width and device pixel ratio, snaps to the closest optimal width (320–2560 px), and adjusts quality based on DPR (60 for Retina, 80 for standard). Images are lazy-loaded as they enter the viewport and re-optimized when the viewport resizes significantly (>20% change). For clips and demo videos, the loader automatically converts the element to a video tag with autoplay, loop, and muted attributes.
Data attributes
| Parameter | Description |
|---|---|
| data-ak-id | Required. The endpoint ID. |
| data-ak-type | Asset type: screenshot (default), clip, or video_demo. |
| data-ak-lang | Language variant (e.g. en, fr). |
| data-ak-theme | Theme variant (light or dark). |
| data-ak-target | Viewport/device target ID. |
| data-ak-format | Override the output format (webp, png, mp4, gif). Clips and demo videos use MP4 by default. |
For single-page apps that add images dynamically, call the refresh function after inserting new elements:
window.AutoKap.refresh();Step by step
- When you create a preset, integration endpoints are automatically generated for each page, element, and clip.
- Click Integrate to get the URL and code snippets with your preferred parameters.
- Run a capture. The endpoint now serves your new screenshot.
- That's it — your site always shows the latest version. Use query params to switch variants dynamically.
Capture proxy (edge cache)
The capture proxy is an optional pair of routes you deploy on your own server that sits between your visitors and AutoKap's asset API. It caches dev-link assets at the edge so visitors load screenshots, clips, and demo videos from your CDN instead of autokap.app, and it receives signed webhook notifications from AutoKap that automatically invalidate cached entries whenever a new capture lands.
When to set this up
Useful for landing pages and marketing sites where first-paint latency on screenshot-heavy sections matters, or when you want all assets served from your own CDN. Skip it for internal dashboards or CI embeds — the default /api/v1/assets/ENDPOINT_ID already has server-side and CDN caching.
How it works
Your proxy fetches the asset from AutoKap once, stores it in your platform's edge cache (Vercel data cache, Cloudflare Workers cache, Redis, etc.) tagged with the endpoint ID, and serves subsequent visitors directly from that cache. When a new capture completes, AutoKap POSTs a signed webhook to your server with the affected endpoint IDs — you call your cache's invalidate-by-tag hook (e.g. revalidateTag) and optionally pre-warm the cache at common widths.
Visitor → Your server (proxy cache) → https://autokap.app/api/v1/assets/<id>
↑
Webhook (capture.completed) invalidates + pre-warmsWhat to deploy
Two routes on your own domain: GET /api/autokap/assets/[id] (asset pass-through, immutable cache) and POST /api/autokap/webhook (HMAC verification, tag-based invalidation). From the Integration page in your project, the "Copy setup prompt" button generates a complete, self-contained implementation prompt you can paste into your AI coding assistant — it includes Next.js route handlers, adaptations for Cloudflare Workers, Express, and Deno Deploy, plus a checklist of common pitfalls.
Updating your embeds
Point your image tags at your proxy base path, or keep the loader script and add data-ak-base so it rewrites asset URLs automatically:
<img src="/api/autokap/assets/a1b2c3d4e5f6a1b2c3d4e5f6a1b2?w=1024&format=webp" alt="Screenshot" />
<!-- Or with the loader script: -->
<script src="https://autokap.app/api/v1/loader.js" data-ak-base="/api/autokap/assets" defer></script>
<img data-ak-id="a1b2c3d4e5f6a1b2c3d4e5f6a1b2" data-ak-lang="en" alt="Screenshot" />Register the proxy
Once the routes are deployed, register the proxy and webhook URLs with AutoKap by calling the autokap_register_proxy MCP tool from your IDE chat. AutoKap stores your proxy URL on the project and auto-generates a signing secret used to sign webhook payloads:
// Call the autokap_register_proxy MCP tool from your IDE chat
autokap_register_proxy({
projectId: "<projectId>",
proxyUrl: "https://your-domain.com/api/autokap/assets",
webhookUrl: "https://your-domain.com/api/autokap/webhook"
})Don't forget the signing secret
The CLI binary prints AUTOKAP_WEBHOOK_SECRET=YOUR_SECRET once after registration. Add it to your deployment's environment variables and redeploy — without it, your webhook handler won't be able to verify incoming events. The /projects/PROJECT_ID/devs page in the dashboard shows a "Verify" button that round-trips both URLs and surfaces exactly what failed if signature verification is off.
Good to know
Auto loader (recommended)
The Auto loader is the recommended integration for most websites. Include the loader.js script (~1.5 KB) and use data-ak-id attributes on your images or videos — the loader handles everything else. It detects each visitor's device pixel ratio, picks the optimal width from 9 predefined breakpoints, adjusts quality for Retina screens, and lazy-loads images as they enter the viewport. For single-page apps, call window.AutoKap.refresh() after dynamically adding new elements. Clips and demo videos are automatically converted to video elements.
WebP by default
Screenshots are served as WebP by default, which is typically 25–35% smaller than PNG at equivalent quality. The quality parameter (default 80) controls WebP compression — lower values save bandwidth, higher values preserve detail. Use format=png when you need compatibility with older systems like email clients (Outlook, Gmail) that may not support WebP. Clips default to GIF format, but you can request MP4 for smaller file sizes.
Responsive images
Use the srcset attribute with multiple widths (w=400, w=800, w=1200) to let the browser download only the size it needs for the current screen. Combined with the sizes attribute, the browser selects the best match — a mobile visitor downloads a 400px image instead of the full 1200px version. Common breakpoints: 400px for mobile, 800px for tablets, 1200px for desktop. See the srcset tab above for a copy-paste example.
OpenGraph previews
The endpoint serves images directly (no redirect), so OpenGraph and Twitter Card crawlers can fetch them reliably. For OG images, use a fixed width like w=1200 since crawlers don't negotiate responsive sizes. Add the og:image:width meta tag (1200) for best results. See the OpenGraph tab above for the complete meta tag set.
Cache busting
Assets are cached for up to 1 hour in the browser and refresh in the background — users never see a loading delay. When a new capture is published, server and CDN caches are cleared immediately, so the latest version is available on the next load. To force an immediate update in the browser, use a hard-refresh (Cmd+Shift+R / Ctrl+Shift+R) or append ?v=timestamp to the URL.