Last updated: 2026-04-11
Get ViewCraft integrated in your project in under 5 minutes using your AI coding assistant.
---
Step 1: Create Your Account
Sign up at viucraft.com/signup. No credit card required. The free tier includes 10,000 image transforms per month and 1 GB of storage -- enough to build and test your integration.
Step 2: Get Your API Key
- Log in to your ViewCraft dashboard
- Navigate to Settings then API Keys
- Copy your API key -- it starts with
vc_test_(for development) orvc_live_(for production) - Add it to your environment:
macOS / Linux:
export VIUCRAFT_API_KEY="vc_test_your_key_here"
Windows (PowerShell):
$env:VIUCRAFT_API_KEY = "vc_test_your_key_here"
In a .env file:
VIUCRAFT_API_KEY=vc_test_your_key_here
Never commit API keys to source control. Always use environment variables or a secrets manager.
Step 3: Tell Your AI Agent
Copy and paste one of these prompts into your AI coding assistant to get started. Pick the one that matches how you want to use ViewCraft.
For any AI coding assistant
Use this prompt with ChatGPT, Claude, GitHub Copilot, Cursor, Windsurf, Cline, or any other AI coding tool:
> I want to add image processing to my app using ViewCraft. Install the viucraft npm package and set up a client using my API key from the environment variable VIUCRAFT_API_KEY. My ViewCraft subdomain is MY_SUBDOMAIN. Show me how to upload an image and generate a URL that resizes it to 800px wide, converts to WebP, and sets quality to 85. ViewCraft URLs follow this format: https://MY_SUBDOMAIN.viucraft.com/resize-800/q-85/IMAGE_ID.webp
For MCP-enabled tools (Claude Desktop, Cursor)
If your AI tool supports MCP (Model Context Protocol), you can give it direct access to ViewCraft's image processing tools:
> Install the ViewCraft MCP server by adding it to my Claude Desktop config. The config file is at ~/Library/Application Support/Claude/claude_desktop_config.json. Add a server called "viucraft" with command npx, args "viucraft-mcp"], and env VIUCRAFT_API_KEY set to my key. After configuring, I should be able to ask you to resize, crop, and transform images directly.
Just want URL transforms (no SDK needed)
If you only need to transform images that are already uploaded, you do not need an SDK at all. ViewCraft transforms are encoded directly in the URL:
> Help me use ViewCraft URL-based image transforms in my HTML. My ViewCraft subdomain is MY_SUBDOMAIN. The URL format is https://MY_SUBDOMAIN.viucraft.com/{operations}/{image-id}.{format}. Operations use short format with hyphens, for example: /resize-800-600/ to resize, /q-85/ for quality, /sharp-1.2/ for sharpening, /scrop-500-300-attention/ for smart crop. Show me img tags for: a resized WebP image, a responsive picture element with srcset, and a watermarked product image.
Starting from scratch (full walkthrough)
If you are brand new and want end-to-end guidance:
> I just signed up for ViewCraft (an image processing API) and want to integrate it into my project. Walk me through everything: installing the viucraft SDK from npm, configuring it with my API key from process.env.VIUCRAFT_API_KEY, uploading my first image, and generating optimized URLs. My subdomain is MY_SUBDOMAIN. ViewCraft URLs look like https://MY_SUBDOMAIN.viucraft.com/resize-800/q-85/IMAGE_ID.webp where operations are chained in the URL path.
Step 4: Verify It Works
After your AI assistant generates the integration code, test it with a quick check.
Test your API key:
curl -s -o /dev/null -w "%{http_code}" \
-H "X-API-Key: $VIUCRAFT_API_KEY" \
https://api.viucraft.com/images?limit=1
A 200 response means your API key is valid and working. A 401 means the key is invalid or missing. A 429 means you have hit the rate limit -- wait a moment and try again.
Test a transform URL:
Once you have uploaded an image (either through the dashboard or via the API), try opening a transform URL directly in your browser:
https://YOUR_SUBDOMAIN.viucraft.com/resize-400/q-80/YOUR_IMAGE_ID.webp
You should see a resized WebP version of your image. If you get a 404, check that the image ID is correct. If you get a 400, check the operation syntax.
Step 5: Next Steps
Now that you have a working integration, explore what else ViewCraft can do:
- [Full documentation -- Complete API reference with interactive playground
- AI Prompts -- More copy-paste prompts for responsive images, watermarking, batch processing, and creative effects
- JS SDK reference -- Full SDK documentation with all builder methods
- MCP tools reference -- All 36 tools available for AI agent integration
- Operations reference -- All 35+ image operations with parameters and examples
- Migration guides -- Switching from Cloudinary or Imgix
Pricing quick reference
| Plan | Price | Transforms/mo | Storage | Rate Limit |
|---|---|---|---|---|
| Free | $0 | 10,000 (hard cap) | 1 GB | 10 req/s |
| Pro | $19/mo | 100,000 | 20 GB | 50 req/s |
| Business | $49/mo | 500,000 | 100 GB | 200 req/s |
| Enterprise | Custom | Unlimited | 500 GB | 500 req/s |
Paid plans include usage-based overages so your service is never interrupted. See pricing for full details.