Built for the Claude Code era

The AI-Native Image
Infrastructure
for Dev Teams

Upload. Resize. Optimise. No S3 config. No Sharp server. No Lambda. One Worker — JXL, BlurHash, smart crop, LCP analytics.

Try it now

Available for these agents

Claude Code

Cursor

GitHub Copilot

Gemini CLI

Codex

Cline

Claude Code

Cursor

GitHub Copilot

Gemini CLI

Codex

Cline

Claude Code

Cursor

GitHub Copilot

Gemini CLI

Codex

Cline

Get started free View URL API

Install the component

npx shadcn@latest add \
  https://auraimage.ai/registry/image.json

Use it in your app

<AuraImage
  src="https://cdn.auraimage.ai/photo.jpg"
  width={800}
  height={600}
  blurhash="LGF5?xYk^6#M@-5c,1J5"
  alt="Optimised hero image"
/>

image optimisationLive demo

Before

photo.jpg

2.4 MBJPEG

After

photo.jxl

87 KBJXL-96%

Auto-served by Accept header

JXL→AVIF→WebP→JPEG

99msp95 latencyEdge-served, globally

3xformat stackJXL → AVIF → WebP → JPEG

0¢egress costR2 zero-egress pricing

1WorkerNo Lambda. No Sharp server.

Everything image infrastructure needs

Six layers. One Worker. No ops overhead.

Edge Proxy Upload

HMAC-signed upload tokens, magic-byte validation, and direct-to-R2 streaming. No egress fees. No server to maintain. Uploads are verified at the edge before touching your storage.

HMACR2Zero egress

Upload flow

Your App

→ Cloudflare Worker (HMAC verify)

→ Cloudflare R2 (zero egress)

✓ Magic-byte validated. No server required.

URL Transformations

Resize, crop, quality, and format negotiation via URL parameters. Smart face-aware cropping with ?fit=face. Transformations are computed on-the-fly and cached at the edge.

ResizeSmart cropFormat

URL transforms

cdn.auraimage.ai/photo.jpg?w=800&fit=face&fmt=auto&q=80

?w=Width

&fit=Crop mode

&fmt=Format

&q=Quality

Next-Gen Formats

Auto-serves JXL → AVIF → WebP → JPEG based on the browser Accept header. Vary: Accept caching ensures every browser gets the smallest format it can handle.

JXLAVIFWebPVary: Accept

Same image, 4 formats (2400×1600px)

JXL

87 KB

AVIF

142 KB

WebP

210 KB

JPEG

2.4 MB

Triple-Stage Loading

BlurHash placeholder decoded client-side → LQIP → full image. Eliminates layout shift, dramatically improves perceived performance, and solves LCP out of the box.

BlurHashLQIPLCP

Triple-stage loading

1. BlurHash

~0ms

2. LQIP

~80ms

3. Full

~400ms

Shadcn Component

One npx command. You own the source. The AuraImage component bundles triple-stage loading, LCP telemetry, and URL building into a drop-in replacement for next/image.

shadcn/uiRSCYou own the code

terminal

npx shadcn@latest add \
  https://auraimage.ai/registry/image.json

component.tsx

<AuraImage
  src="https://cdn.auraimage.ai/img.jpg"
  blurhash="LGF5?xYk^6#M@-5c,1J5"
  alt="Product photo"
/>

MCP / AI Integration

First-class Claude Code and Cursor tools. audit_lcp scans your project, migrate_assets uploads and rewrites img tags, generate_alt writes alt text. AI-native from day one.

Claude CodeCursorMCP

Claude Code

> audit_lcp
✓ Found 3 unoptimised images
✓ LCP candidate: hero.jpg (2.4 MB)

> migrate_assets --project=acme
↑ Uploading 3 assets to R2...
✓ Rewrote JSX img → AuraImage

> generate_alt
✓ Alt text generated for 3 images

Ship in minutes, not days

Two commands. You own the component. No vendor lock-in.

terminal

# 1. Add via shadcn CLI
npx shadcn@latest add https://auraimage.ai/registry/image.json

# 2. Or install the SDK directly
pnpm add @auraimage/sdk

your-component.tsx

import { AuraImage } from '@/components/ui/aura-image';

export function ProductCard() {
  return (
    <AuraImage
      src="https://cdn.auraimage.ai/product.jpg"
      width={800}
      height={600}
      blurhash="LGF5?xYk^6#M@-5c,1J5@[or[Q6."
      alt="Product photo"
      priority
    />
  );
}