Skip to content

Claude Code

Image CDN for Claude Code

Add one file to your repo and Claude Code wires up your whole image pipeline.

Start freeSee the config

$0 forever 20 GB bandwidth 3 GB storage hard stop at quota — never a surprise bill. Compare plans

Add AuraImage to Claude Code

The ${AURA_SECRET_KEY} form reads from your shell or .env.local, which keeps .mcp.json safe to commit.

.mcp.json
{
  "mcpServers": {
    "auraimage": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@auraimage/mcp-server@latest"],
      "env": {
        "AURA_SECRET_KEY": "${AURA_SECRET_KEY}"
      }
    }
  }
}

Or from the terminal

bash
claude mcp add --scope project --transport stdio auraimage -- npx -y @auraimage/mcp-server@latest

Verified against the vendor docs on 2026-08-09.

Optimize images with Claude Code

Each prompt is paired with the MCP tool it fires.

  • Audit every image in the repo for LCP impact, then write the rule you applied into CLAUDE.md.audit_lcp
  • Migrate /public to AuraImage, update every reference, and stage it as one commit.migrate_assets
  • Add the missing alt text across app/ — use the AuraImage skill so I do not have to describe the house style again.generate_alt
  • Replace the <img> in app/page.tsx with a responsive <picture>, and put it in the same commit as .mcp.json so the team gets the tool and the fix together.generate_responsive_tag
  • I just added AURA_SECRET_KEY to .env.local — crop team-photo.jpg to 1:1 and 16:9 and show me both.smart_crop_preview
claude — ~/dev/acme-storefront
Claude Code v2.1.206
Welcome back dev!
Fable 5 · Claude Max
dev@acme.dev's Organization
~/dev/acme-storefront
Tips for getting started
Run /install-auraimage-app to set up AuraImage
What's new
Skills auto-load from .claude/skills
MCP servers can be scoped per project
/release-notes for more
/install-auraimage-app
I'll scan the project first — framework, image surface, secrets, backend, hosting — then show you one plan and one confirm.
Read(package.json)Next.js 15.4 · App Router · TypeScript · pnpm 9
Grep(<img|background-image)14 <img> tags · 6 res.cloudinary.com URLs
Glob(public/**/*.{png,jpg})23 local images · 18.7 MB total
Read(.gitignore).env.local ignored · no AURA_* keys anywhere
Read(vercel.json)hosting: Vercel → env file convention .env.local
Discovery — acme-storefront
  Framework   Next.js 15 (App Router, TypeScript, pnpm)
  Images      14 <img> tags · 23 files in /public · 6 Cloudinary URLs
  Secrets     no AURA_* keys · .env.local gitignored
  Backend     route handlers — can sign upload tokens
  Hosting     Vercel

Plan
  1. Credentials & env     →  auraimage-api-key
  2. Register MCP server   →  .mcp.json
  3. Install SDK           →  pnpm add @auraimage/sdk
  4. Components            →  <AuraImage /> + <AuraUploader />
  5. Token route           →  app/api/aura/sign/route.ts
install-auraimage-app
5 steps · 6 writes · nothing runs before this confirm
Proceed? (or describe changes, e.g. 'skip uploader')
No Secret Key found. Paste one from the dashboard (Settings → Secret Keys) — it stays masked in this session.
sk_live_0198a4f2…9c1b
Fetch(auraimage.ai/v1/sign — validate key)valid · project acme-storefront · key name "prod"
auraimage-api-key
.env.local +AURA_SECRET_KEY=sk_live_0198…9c1b +NEXT_PUBLIC_AURA_PROJECT_NAME=acme-storefront
Write 2 keys to .env.local? A secret is never written to disk without this confirm.
Write(.env.local)+2 keys · values masked in the log
Edit(.mcp.json)merged "auraimage" server · existing servers untouched
Bash(pnpm add @auraimage/sdk)+ @auraimage/sdk 1.4.2(ctrl+o to expand)
Packages: +1 + @auraimage/sdk 1.4.2 Done in 1.8s
Bash(npx shadcn@latest add https://auraimage.ai/registry/image.json)components/aura/image.tsx
Bash(npx shadcn@latest add https://auraimage.ai/registry/uploader.json)components/aura/uploader.tsx
Update(app/api/aura/sign/route.ts)
Created app/api/aura/sign/route.ts — the <AuraUploader /> default endpoint, no extra wiring
1+added: import { AuraImage } from '@auraimage/sdk';
2+added: 
3+added: const aura = new AuraImage({
4+added:   secretKey: process.env.AURA_SECRET_KEY!,
5+added:   projectName: process.env.NEXT_PUBLIC_AURA_PROJECT_NAME!
6+added: });
7+added: 
8+added: export async function POST() {
9+added:   const signature = await aura.signUpload({ maxSize: '5mb', allowedTypes: ['image/*'] });
10+added:   return Response.json({ signature });
11+added: }
AuraImage installed — 6 writes, 0 failures

Wrote
  .env.local           +2 keys (masked)
  .mcp.json            auraimage MCP server
  package.json         @auraimage/sdk 1.4.2
  components/aura/     image.tsx · uploader.tsx
  app/api/aura/sign/   route.ts (+11 lines)

Next
  1. Restart your agent to load the MCP server
  2. audit_lcp — scan for unoptimized images
  3. migrate_assets — 23 local + 6 Cloudinary images detected
  4. auraimage-react — <AuraImage /> patterns

Docs: https://auraimage.ai/docs
xhigh · /effort
auto mode on (shift+tab to cycle) · ← for agents

A Cloudinary alternative your agent can wire up itself

CapabilityCloudinary / ImgixAuraImage with Claude Code
Pricing modelMetered per GB and per transformFlat monthly price
EgressBilled$0
AVIFOpt-in configurationServed by default
BlurHash placeholdersBuild it yourselfBundled
ComponentSDK importLands in your repo, yours to edit
InstallManual wiringOne MCP config, then a prompt

Teach Claude Code your image conventions

Repo-wide conventions go in CLAUDE.md, which loads at the start of every conversation. Reusable behaviours go in .claude/skills/, which load on demand — only when you invoke one or when Claude decides it is relevant.

PathCLAUDE.md

Verified against the vendor docs on 2026-08-09.

Questions, answered

The things developers ask before they ship. If something is missing, just email us.

Install it in your side project. Pay when you ship.

$0 forever 20 GB bandwidth 3 GB storage hard stop at quota — never a surprise bill. Compare plans

Get started free Read the docs