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"
}
}
}
}CLAUDE.md Integration (Recommended)
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:
- Run
audit_lcpto find unoptimized images. - Run
migrate_assetsto upload them to dev storage. - Rewrite your code with
<AuraImage />components. - Show you the estimated LCP improvement.
- Ask you to approve before pushing to production.
No manual S3 config, no Sharp server, no Lambda functions.