Last updated: 2026-04-11
Curated prompts you can copy and paste into any AI coding assistant to get started with VIUCraft image processing.
Getting Started
Getting Started: Basic Setup
Prompt: > I want to add image processing to my project using VIUCraft. Install the viucraft npm package, set up a client using the API key from the environment variable VIUCRAFT_API_KEY, and create a helper function that takes an image ID and returns a URL that resizes the image to a given width while preserving aspect ratio, converts it to WebP format, and sets quality to 85. My VIUCraft subdomain is YOUR_SUBDOMAIN.
What this does: Sets up the VIUCraft JS SDK with proper environment variable configuration and creates a reusable image resizing utility function.
Related docs: https://viucraft.com/docs/sdks/javascript
Getting Started: MCP Server Setup
Prompt: > Set up the VIUCraft MCP server so I can use image processing tools directly in this AI assistant. Add the viucraft MCP server to my Claude Desktop configuration at ~/Library/Application Support/Claude/claude_desktop_config.json using npx. The command is npx viucraft-mcp and it needs the environment variable VIUCRAFT_API_KEY set to vc_live_YOUR_KEY. Show me the full JSON config block to add.
What this does: Configures the VIUCraft MCP server for Claude Desktop, giving AI assistants direct access to 36 image processing tools.
Related docs: https://viucraft.com/docs/mcp
Getting Started: Quick Integration
Prompt: > I have an existing web application and I want to add VIUCraft image processing. My VIUCraft subdomain is YOUR_SUBDOMAIN. Show me how to: 1) Install the viucraft npm package, 2) Initialize the client with my API key from process.env.VIUCRAFT_API_KEY, 3) Upload an image file, 4) Generate a processed URL that resizes to 1200px wide, sharpens slightly, and outputs as WebP. Include error handling for upload failures and rate limits.
What this does: Provides a complete integration walkthrough covering SDK installation, initialization, image upload, and URL generation with proper error handling.
Related docs: https://viucraft.com/docs/quickstart
Image Transforms
Image Transforms: Resize and Optimize
Prompt: > Using VIUCraft URL-based transforms, create a function that takes an image ID and generates an optimized web-ready image URL. The URL format is https://YOUR_SUBDOMAIN.viucraft.com/{operations}/{image-id}.{format}. The function should resize to a maximum width of 1200px (preserving aspect ratio), apply light sharpening, and convert to WebP at quality 85. Use VIUCraft's short format syntax where operations are like /resize-1200/sharp-1.2/q-85/. Return the complete URL.
What this does: Creates a URL builder function for web-optimized images using VIUCraft's short URL format, combining resize, sharpen, and WebP conversion in a single pipeline.
Related docs: https://viucraft.com/docs/operations/resize
Image Transforms: Smart Crop for Social Media
Prompt: > I need to generate social media crops from product photos using VIUCraft. Using the URL format https://YOUR_SUBDOMAIN.viucraft.com/{operations}/{image-id}.{format}, create a function that takes an image ID and a platform name, and returns the correct VIUCraft URL. Use VIUCraft's smart crop operation (scrop in short format) with the attention strategy to automatically find the best crop region. The platforms and their sizes are: Instagram Square (1080x1080), Instagram Story (1080x1920), Facebook Post (1200x630), Twitter/X Header (1500x500), LinkedIn Post (1200x627). Each URL should also apply quality 90 and output as WebP. Example short format: /scrop-1080-1080-attention/q-90/image-id.webp.
What this does: Generates content-aware social media crops for five platforms using VIUCraft's AI-powered smart crop, which automatically identifies the most visually important region of each image.
Related docs: https://viucraft.com/docs/operations/smartcrop
Image Transforms: Watermarking
Prompt: > Add a text watermark to images using VIUCraft URL transforms. Using the URL format https://YOUR_SUBDOMAIN.viucraft.com/{operations}/{image-id}.{format}, create a function that takes an image ID and watermark text, and returns a URL that: 1) Resizes the image to 1200px wide, 2) Adds a semi-transparent white text watermark in the bottom-right corner at size 24px. Use VIUCraft's short format where watermark is wmt with parameters: text-opacity-position-size-color (e.g., /wmt-YourText-0.5-br-24-FFFFFF/). Positions include: tl (top-left), tc (top-center), tr (top-right), cl (center-left), c (center), cr (center-right), bl (bottom-left), bc (bottom-center), br (bottom-right). Use + for spaces in watermark text.
What this does: Builds watermarked image URLs using VIUCraft's text watermark operation with configurable position, opacity, and styling.
Related docs: https://viucraft.com/docs/operations/watermark
Advanced
Advanced: Responsive Images
Prompt: > Set up responsive images using VIUCraft. I need a function that takes an image ID and generates an HTML srcset attribute for responsive loading. VIUCraft's responsive operation generates variants at multiple widths using the short format /resp-320,640,960,1280-webp/. The base URL format is https://YOUR_SUBDOMAIN.viucraft.com/{operations}/{image-id}.webp. For each breakpoint width (320, 640, 960, 1280), generate a separate URL using /resize-{width}/q-85/ and build the srcset string. Also include a fallback src pointing to the 640px version. Add sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" as a default.
What this does: Creates a responsive image component that serves optimally-sized images at different viewport widths using VIUCraft URL transforms, reducing bandwidth for mobile users.
Related docs: https://viucraft.com/docs/operations/responsive
Advanced: Batch Processing
Prompt: > I have a list of image IDs that all need the same VIUCraft transformations applied. Using the VIUCraft JS SDK (viucraft npm package), write a batch processing function that: 1) Takes an array of image IDs and a transformation config (width, height, quality, format), 2) Generates the processed URL for each image using the SDK's chainable builder (e.g., client.image(id).resize(width, height).quality(q).setFormat(format).toURL()), 3) Returns an array of objects with the original ID and the processed URL. My subdomain is YOUR_SUBDOMAIN and my API key is in process.env.VIUCRAFT_API_KEY. Process in batches of 10 to respect rate limits. Include a small delay between batches.
What this does: Creates a batch URL generator that processes multiple images with the same transformations while respecting VIUCraft rate limits.
Related docs: https://viucraft.com/docs/sdks/javascript
Advanced: Progressive Loading with Placeholders
Prompt: > Implement progressive image loading using VIUCraft's LQIP (Low Quality Image Placeholder) feature. Create a React component (or vanilla JS function) that: 1) First loads a tiny blurred placeholder using VIUCraft's placeholder operation (short format: /lqip-32/ which generates a 32px blurred version), 2) Then lazy-loads the full-resolution image using /resize-1200/q-85/ in WebP format, 3) Applies a CSS blur-to-sharp transition when the full image loads. The URL format is https://YOUR_SUBDOMAIN.viucraft.com/{operations}/{image-id}.{format}. The placeholder URL would be https://YOUR_SUBDOMAIN.viucraft.com/lqip-32/{image-id}.jpg and the full URL would be https://YOUR_SUBDOMAIN.viucraft.com/resize-1200/q-85/{image-id}.webp.
What this does: Builds a progressive loading pattern where a tiny blurred placeholder appears instantly while the full-resolution image loads in the background, using VIUCraft's built-in LQIP generation.
Related docs: https://viucraft.com/docs/operations/placeholder
Integration
Integration: Webhook Setup
Prompt: > Set up a VIUCraft webhook endpoint in my application to receive notifications when image processing completes. I need: 1) An Express.js (or Next.js API route) endpoint at /api/webhooks/viucraft that receives POST requests, 2) Validates the webhook payload, 3) Handles the processing.complete event type by logging the image ID, processing time, and output URL, 4) Handles the processing.failed event type by logging the error, 5) Returns a 200 response to acknowledge receipt. The webhook payload includes fields: event, image_id, timestamp, data (which contains output_url, processing_time_ms for complete events, and error_message for failed events).
What this does: Creates a webhook receiver that listens for VIUCraft processing events, enabling your application to react when images finish processing or encounter errors.
Related docs: https://viucraft.com/docs/webhooks
Integration: Migration from Cloudinary
Prompt: > I'm migrating from Cloudinary to VIUCraft. Help me create a URL translation function that converts Cloudinary transformation URLs to VIUCraft format. Cloudinary URLs look like https://res.cloudinary.com/CLOUD_NAME/image/upload/w_800,h_600,c_fill,q_85,f_webp/IMAGE_ID. VIUCraft URLs look like https://YOUR_SUBDOMAIN.viucraft.com/resize-800-600/q-85/IMAGE_ID.webp. Map these Cloudinary parameters to VIUCraft: w_ to resize width, h_ to resize height, c_fill to resize with force, c_thumb to thumbnail, q_ to quality, f_webp to .webp extension, e_sharpen to /sharp-1/, e_grayscale to /gray/, e_blur: to /blur-/. The function should parse a Cloudinary URL and return the equivalent VIUCraft URL.
What this does: Creates a migration utility that translates Cloudinary transformation URLs to VIUCraft format, helping you switch platforms without manually rewriting every image reference.
Related docs: https://viucraft.com/docs/migrations/cloudinary
Integration: URL-Based Transforms in HTML
Prompt: > I want to use VIUCraft image transforms directly in my HTML templates without any SDK or JavaScript. My VIUCraft subdomain is YOUR_SUBDOMAIN and my images have been uploaded with known IDs. Show me how to: 1) Display a resized image: 
What this does: Provides pure HTML patterns for using VIUCraft transforms without any build tools or JavaScript, using direct URL construction in standard HTML image elements.
Related docs: https://viucraft.com/docs/url-api
Bonus
Bonus: Auto-Enhance Product Photos
Prompt: > I run an e-commerce site and need to automatically enhance product photos uploaded by sellers. Using VIUCraft URL transforms, create a processing pipeline URL that: 1) Smart crops to 1000x1000 square using the attention strategy (/scrop-1000-1000-attention/), 2) Auto-enhances brightness and contrast (/auto-0.7/), 3) Applies light sharpening (/sharp-1.2/), 4) Sets quality to 90 (/q-90/), 5) Outputs as WebP. The full URL pattern is https://YOUR_SUBDOMAIN.viucraft.com/scrop-1000-1000-attention/auto-0.7/sharp-1.2/q-90/IMAGE_ID.webp. Also create a thumbnail version at 300x300 using /thumb-300-300-attention/q-85/IMAGE_ID.webp. Build a function that returns both URLs for any given image ID.
What this does: Creates an automated product photo enhancement pipeline that crops, enhances, sharpens, and optimizes seller-uploaded images for consistent catalog presentation.
Related docs: https://viucraft.com/docs/operations/autoenhance
Bonus: Duotone and Creative Effects
Prompt: > I want to create stylized hero images for my marketing site using VIUCraft effects. Using the URL format https://YOUR_SUBDOMAIN.viucraft.com/{operations}/{image-id}.{format}, show me how to build URLs for these creative effects: 1) Duotone (gold highlights, dark shadows): /gray/tint-FFD700-1A1A2E/q-90/IMAGE_ID.webp, 2) Vignette portrait: /scrop-1200-800-attention/vig-0.3-0.7-000000/q-90/IMAGE_ID.webp, 3) Sepia vintage: /sepia/vig-0.2-0.5-000000/q-85/IMAGE_ID.webp, 4) High-contrast B&W: /gray/con-1.5/sharp-1.5/q-90/IMAGE_ID.webp. Create a function that takes an image ID and an effect name, and returns the correct VIUCraft URL.
What this does: Builds a creative effects library using VIUCraft URL transforms for marketing and editorial imagery, with four preset styles that can be applied to any image.
Related docs: https://viucraft.com/docs/operations/effects