Last updated: 2026-04-11
Curated prompts you can copy and paste into any AI coding assistant to get started with ViewCraft image processing.
---
Getting Started
Getting Started: Basic Setup
Prompt: > I want to add image processing to my project using ViewCraft. 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 ViewCraft subdomain is YOUR_SUBDOMAIN.
What this does: Sets up the ViewCraft 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 ViewCraft 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 ViewCraft 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 ViewCraft image processing. My ViewCraft 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 ViewCraft 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 ViewCraft'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 ViewCraft'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 ViewCraft. 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 ViewCraft URL. Use ViewCraft'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 ViewCraft'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 ViewCraft 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 ViewCraft'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 ViewCraft'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 ViewCraft. I need a function that takes an image ID and generates an HTML srcset attribute for responsive loading. ViewCraft'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 ViewCraft 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 ViewCraft transformations applied. Using the ViewCraft 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 ViewCraft rate limits.
Related docs: https://viucraft.com/docs/sdks/javascript
---
Advanced: Progressive Loading with Placeholders
Prompt: > Implement progressive image loading using ViewCraft's LQIP (Low Quality Image Placeholder) feature. Create a React component (or vanilla JS function) that: 1) First loads a tiny blurred placeholder using ViewCraft'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 ViewCraft's built-in LQIP generation.
Related docs: https://viucraft.com/docs/operations/placeholder
---
Integration
Integration: Webhook Setup
Prompt: > Set up a ViewCraft 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 ViewCraft 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 ViewCraft. Help me create a URL translation function that converts Cloudinary transformation URLs to ViewCraft 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. ViewCraft URLs look like https://YOUR_SUBDOMAIN.viucraft.com/resize-800-600/q-85/IMAGE_ID.webp. Map these Cloudinary parameters to ViewCraft: 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 ViewCraft URL.
What this does: Creates a migration utility that translates Cloudinary transformation URLs to ViewCraft 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 ViewCraft image transforms directly in my HTML templates without any SDK or JavaScript. My ViewCraft 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 ViewCraft 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 ViewCraft 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 ViewCraft 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 ViewCraft URL.
What this does: Builds a creative effects library using ViewCraft 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