AuraImage

AI Integration

First-class MCP server for Claude Code and Cursor — audit, migrate, and manage images without writing upload code.

AuraImage is a first-class citizen in Claude Code and Cursor. Add the MCP server once and your AI agent can audit, migrate, generate, and manage images without you writing a single line of upload code.

MCP Server Setup

Claude Code / Claude Desktop

Add this to your claude_desktop_config.json:

{
  "mcpServers": {
    "auraimage": {
      "command": "npx",
      "args": ["-y", "@auraimage/mcp-server"],
      "env": {
        "AURA_SECRET_KEY": "sk_live_...",
        "AURA_SLUG": "narek"
      }
    }
  }
}

Cursor

Add to .cursor/mcp.json in your project root:

{
  "mcpServers": {
    "auraimage": {
      "command": "npx",
      "args": ["-y", "@auraimage/mcp-server"],
      "env": {
        "AURA_SECRET_KEY": "sk_live_...",
        "AURA_SLUG": "narek"
      }
    }
  }
}

Add AuraImage to your project's CLAUDE.md so every agent session has context:

## Image Handling
This project uses AuraImage for all image uploads and optimization.
- MCP server: @auraimage/mcp-server (configured in claude_desktop_config.json)
- Slug: narek
- Component: <AuraImage /> from @/components/aura/image
- Uploader: <AuraUploader /> from @/components/aura/uploader
- Use the migrate_assets tool to move any local /public images to AuraImage.

Available MCP Tools

audit_lcp

Scans your project for unoptimized <img> tags and local image assets. Returns a report with estimated LCP improvements.

Example prompt:

"Claude, audit my project for unoptimized images."

Sample output:

AuraImage Audit — narek
───────────────────────
Found 14 unoptimized images (38.4 MB total).
Estimated LCP improvement: 1.4s on mobile.

Files to migrate:
  public/hero.png          → 8.2 MB   (use <AuraImage src="narek/hero" />)
  public/gallery/photo1.jpg → 4.1 MB
  ...
Run migrate_assets to fix all of these automatically.

migrate_assets

Uploads local image assets to AuraImage, then rewrites your JSX/TSX code to use <AuraImage />.

Example prompt:

"Claude, migrate all images in my /public folder to AuraImage."

Options:

migrate_assets({
  directory: './public/gallery',  // default: "./public"
  dryRun: true,                   // preview changes without writing files
})

generate_alt

Uses vision AI to generate accessible alt text for an uploaded image.

Example prompt:

"Claude, generate alt text for all images missing it in this component."


generate_responsive_tag

Generates a complete <picture> element with JXL, AVIF, and BlurHash fallbacks for a given image.

Example prompt:

"Generate a responsive image tag for narek/hero-photo with widths 400, 800, 1200."

Sample output:

<picture>
  <source
    type="image/jxl"
    srcSet="
      https://auraimage.ai/narek/hero-photo.jpg?w=400&fmt=jxl 400w,
      https://auraimage.ai/narek/hero-photo.jpg?w=800&fmt=jxl 800w,
      https://auraimage.ai/narek/hero-photo.jpg?w=1200&fmt=jxl 1200w
    "
  />
  <source
    type="image/avif"
    srcSet="
      https://auraimage.ai/narek/hero-photo.jpg?w=400&fmt=avif 400w,
      https://auraimage.ai/narek/hero-photo.jpg?w=800&fmt=avif 800w,
      https://auraimage.ai/narek/hero-photo.jpg?w=1200&fmt=avif 1200w
    "
  />
  <img
    src="https://auraimage.ai/narek/hero-photo.jpg?w=800"
    alt="..."
    width={1200}
    height={800}
    loading="lazy"
  />
</picture>

smart_crop_preview

Returns several URL variations of an image, each cropped to a different salient region (face, subject, center). Preview the options before committing.

Example prompt:

"Show me crop variants for narek/team-photo at 400x400."


The "One Command" Workflow

Add AuraImage to your CLAUDE.md and then:

"Optimize my landing page images."

The agent will:

  1. Run audit_lcp to find unoptimized images.
  2. Run migrate_assets to upload them to dev storage.
  3. Rewrite your code with <AuraImage /> components.
  4. Show you the estimated LCP improvement.
  5. Ask you to approve before pushing to production.

No manual S3 config, no Sharp server, no Lambda functions.