DEV Community: David Veselý

Generate Images and Videos From Claude Code for Free

David Veselý — Mon, 04 May 2026 14:09:24 +0000

One API key, hundreds of models, $5 a month free, enough for plenty of images.

Hero images for landing pages, screenshots for app docs, short clips for social. There's always something to generate. None of it is heavy work, but every job used to mean tabbing out of Claude Code. I'd rather not.

Vercel's AI Gateway already solves the model side. One API key gets you a long catalog of models with no token markup. The missing piece was a CLI for terminal-driven workflows. Vercel shipped that recently as ai-cli, with a Claude Code skill alongside it.

What it does

ai is a thin CLI around the Vercel AI Gateway endpoints. Three commands cover most of it:

ai text "explain quicksort in three bullets"
ai image "a minimalist mountain logo" -o cover.png
ai video "a wave crashing on rocks at sunset" --duration 5

Text streams to stdout. Images and videos save to disk; videos take a few minutes per job.

The companion Claude Code skill is the part that matters more day-to-day:

npx skills add https://github.com/vercel-labs/ai-cli --skill ai-cli

Once that's installed, Claude reaches for the CLI automatically when I ask for an image or a clip in plain English. I don't have to remember the command syntax or the model id. Claude picks the model and tells me where the file landed.

Setup, end to end

Five minutes from zero to a working ai command.

1. Create a Vercel account

If you don't have one already, sign up at vercel.com/signup. The free Hobby plan is enough. AI Gateway works on every tier and the $5 monthly credit applies to free accounts too.

2. Get an AI Gateway API key

Open the AI Gateway API Keys page in your Vercel dashboard. Click Create Key, give it a name (e.g. ai-cli), and copy the value that starts with vck_. You only see the full key once, so paste it somewhere safe before closing the modal.

3. Install the CLI

npm install -g ai-cli

pnpm add -g ai-cli and bun add -g ai-cli work too. Source: github.com/vercel-labs/ai-cli.

4. Export your key

export AI_GATEWAY_API_KEY=vck_your_key_here

Add it to ~/.zshrc or ~/.bashrc so it survives a new shell. The CLI is env-var-only by design, no config file and no login flow.

If you're already inside a Vercel-linked project, you can skip the static key entirely — npx vercel link followed by vc env pull fetches a short-lived OIDC token into .env.local, and the CLI picks it up automatically.

5. Add the Claude Code skill

npx skills add https://github.com/vercel-labs/ai-cli --skill ai-cli

This is the piece that lets Claude Code reach for ai automatically when you ask for an image or video in plain English. Without it the CLI still works. You just have to call it directly instead of describing what you want.

That's it. Open Claude Code and try one of the prompts below.

Real prompts I run

Drop these straight into Claude Code. The skill routes them to ai under the hood.

1. Hero image for a landing page

Use /ai-cli to generate a wide hero image for a developer-tools landing page — an abstract topographic map of overlapping data layers, deep navy with thin teal contour lines, photorealistic editorial style. Save as public/hero.png.

GPT-Image-2 is the default and handles this in seconds. Drop it into public/, reference it from your hero section, ship.

2. Logo or poster with text inside the image

Use /ai-cli with openai/gpt-image-2 to generate a minimalist logo for "Envelope.so" — serif wordmark on parchment, terracotta accent dot. Save as logo.png.

GPT-Image-2 is the one I reach for when the image has to render text correctly. Imagen and Flux still mangle longer words.

3. Four OG card backgrounds for a blog post

Use /ai-cli to generate four open-graph background variations (1200x630) for a blog post titled "We migrated 100M rows in an afternoon" — bold editorial composition, dark background, terracotta accent shapes, leave the top-left clear for a title overlay. Save them in og/.

The CLI auto-suffixes the filenames so you get og-1.png through og-4.png. I overlay the post title in code at build time, so the model only has to generate a clean background. Cheap iteration loop when nothing in the first batch is right.

4. Sharpest quality, specific model

Use /ai-cli with bfl/flux-2-pro to generate a cover image for a Medium article on AI tooling — a stylized 3D rendering of stacked translucent terminal panes floating in space, soft volumetric light, editorial composition. Save as output/cover.png.

When the image is going on Medium and I want it to actually look professional, Flux-2-Pro is worth the extra cents.

5. Same prompt, three models in one command

Use /ai-cli with -m "openai/gpt-image-2,bfl/flux-2-pro,xai/grok-imagine-image" to generate the same section banner: an abstract editorial pattern of overlapping circles in deep navy and terracotta, soft volumetric light, no text. Save them in compare/ and open all three so I can pick.

Comma-separated -m is built in. The CLI runs all three in parallel and the slowest one is the bottleneck. A few cents to A/B three aesthetics is the easiest way to decide which model deserves a longer batch — useful when I'm about to render twenty assets in the same style.

6. Pipeline: image straight into video

Use /ai-cli to generate a still of a stylized 3D dashboard mockup — flat dark UI with brand-colored chart shapes, then pipe it into ai video to add a slow camera drift across the surface, 4 seconds. Save the video as marketing/dashboard-pan.mp4.

ai image "..." | ai video "..." is a native pattern. The image streams as raw binary and the video command picks it up as a reference frame. Cleaner than saving an intermediate file and re-loading it, and exactly the move I reach for when I need a quick marketing clip from a static asset.

7. Short social-media video

Use /ai-cli to generate a 5-second vertical clip (9:16, 720p) for a product launch teaser — minimalist liquid-metal animation morphing into a logo silhouette, dark background, clean editorial style. Save as social/launch-teaser.mp4.

This one needs the $10 top-up. Default Seedance 2.0 handles motion well and can render audio; switch to bytedance/seedance-2.0-fast for the cheaper variant or google/veo-3.1-fast-generate-001 for higher fidelity. See the pricing section below for the catch.

8. Browse what's available

Use /ai-cli to list every image model with its current rate, sorted by price.

The skill knows to call ai models --type image. Useful before a batch job to confirm the catalog hasn't changed.

The model lineup

Defaults are picked for price-to-quality, not for headlines. Text goes to openai/gpt-5.5. Image goes to openai/gpt-image-2. Video goes to bytedance/seedance-2.0.

Override with -m when the job calls for it. I reach for bfl/flux-2-pro when the image needs to be sharper than gpt-image-2 handles, and google/imagen-4.0-fast-generate-001 (Imagen 4 Fast) for cheap iteration. For video, Seedance 2.0 already produces clean motion and supports audio; google/veo-3.1-fast-generate-001 is the premium option when the budget allows.

ai models --type image lists every image model with its current rate. Same for --type video and --type text. Pricing comes straight from Vercel.

What "free" actually means

Per the AI Gateway pricing docs, every Vercel team account, Hobby plans included, gets $5 of AI Gateway credits per month. A gpt-image-2 render costs a few cents. A flux-2-pro run is more. You can do real work inside that $5 envelope before the meter starts ticking.

Video is the catch. Vercel requires a $10 minimum top-up to unlock video generation, and per the pricing docs, once you purchase any credits your account transitions to the paid tier and the monthly $5 free credit no longer applies. So topping up for Veo or Seedance also costs you the free image budget. For an image-only workflow on the free tier the line is simple. Want video, and the math flips.

For me that's fine. Most days I'm in image-only territory and the bill is zero. When I need a clip I pay for it like any other API.

Run ai models --type image (or --type video) for live per-token rates straight from Vercel; pricing changes often enough that I don't quote specific cents in writing.

Why this beats tab-switching

The image lands in the repo, ready to commit. No web-app round trip, no download-and-rename dance.

One billing surface is the other underrated win. Want to try Veo? Normally you'd spin up a Google Cloud project with billing enabled. Want Flux? BFL account, separate card. Want gpt-image-2? OpenAI billing. Vercel sits in front of all of them, so the credit card lives in exactly one place. Monthly spend is in one dashboard, the budget cap is in one dashboard, and revoking the key kills every model at once.

And when a new model ships, Vercel adds it to the catalog and the CLI picks it up.

I also wrote about running any agent skill once without installing it. Same one-shot-tooling instinct, different layer.

How to Use Cursor's Composer 2, Gemini, Grok & More in Claude Code as Another Dev

David Veselý — Tue, 28 Apr 2026 19:19:16 +0000

Why I stopped trusting Claude to review Claude. 8 prompts I run instead.

TL;DR: Install Cursor's CLI, then npx skills@latest add Vesely/skills/cursor-agent. In Claude Code, ask things like "review this branch via cursor-agent with composer, gemini, and gpt-5.5 in parallel". Three models look at the same problem at once. Claude merges what they find. Works with any model in cursor-agent --list-models, not just those three.

Asking Claude to review the code Claude just wrote is like asking someone to grade their own homework. They will find what they were already looking for. Multi-model review loops are harder to fool because the sycophancy bias does not survive crossing providers.

So I started fanning work out to other models from inside Claude Code. The skill wraps Cursor's headless cursor-agent CLI. Claude Code starts the jobs in parallel, waits for the answers, then merges the useful parts.

Setup

You need Cursor's CLI installed and a Cursor account. Install the CLI:

curl https://cursor.com/install -fsS | bash

Run agent once to log in. Then add the skill in Claude Code:

npx skills@latest add Vesely/skills/cursor-agent

The skill defaults to read-only mode and never writes to your repo. A fetched answer can look but not touch.

8 patterns I actually use

1. Code review before merge

Anything I'm about to push, especially branches Claude wrote most of.

Use /cursor-agent to review the recent changes with composer-2, gemini-3.1-pro, and gpt-5.5 in parallel. Real issues only, file:line references, no nitpicks. Merge the findings: what all three flagged, where they disagreed, what only one saw.

2. "Did Claude actually do what it said?"

When the summary feels too smooth.

Ask /cursor-agent with grok to compare Claude's summary against the recent diff and test output. Flag anything in the summary the diff or tests don't support.

3. Architecture and implementation plan review

Before letting Claude write a single line on something non-trivial.

Ask /cursor-agent with gpt-5.5 in plan mode to critique the plan in this doc. Where am I over-engineering? What risks am I underweighting? Be blunt.

4. Security review across models

Auth, user input, file paths, anything touching shell. Each model spots different attack surfaces.

Use /cursor-agent to security-review the recent changes with composer-2, gpt-5.5, and gemini-3.1-pro in parallel. What's the worst input a user could send? Where am I missing defensive checks? Real risks only, no theater. Merge what each model caught and where they disagreed.

5. Copy and text review

Anything user-facing or public — landing pages, error messages, docs, emails.

Ask /cursor-agent with gpt-5.5 to read the draft in this file. Where does it sound stiff or generic? Which sentences sound polished but say nothing? Suggest sharper variants for the weakest few.

6. "Which variant should I pick?"

Two or three options on the table and I'm fence-sitting.

Ask /cursor-agent with gpt-5.5 to rank the three options in this doc. Which would you pick and why?

7. "Are you really happy with that?"

Claude says it's done and something feels slightly off. A workflow that almost reads right. Code that compiles but smells.

Ask /cursor-agent with composer-2 to look at the recent output cold. I think it's wrong but I can't say why. What would you change?

8. Stuck on an issue, need different ideas

Thirty minutes of debugging and Claude and I are circling the same hypotheses. Kimi gives an off-axis read from outside the usual bubble.

Use /cursor-agent with gemini-3.1-pro and kimi-k2.5 in parallel. Look at the error and what I've already tried in this thread. What are the top three things I might be missing? Don't repeat what I've ruled out.

My go-to second models

A few months in, my defaults have settled. GPT-5.5 became my go-to for both code review and copy, sharp feedback without padding. Composer 2 is the fast one, called whenever I'm impatient. Codex stays out on purpose; for GPT-5.x reviews I run the standalone codex CLI directly.

What's your favorite second opinion? Which model do you reach for on code review, and which on copy? Drop it in the comments. Curious where mine breaks down for someone else.

Fixing YouTube Error 153 in iOS Capacitor Apps: A Simple Proxy Solution

David Veselý — Tue, 11 Nov 2025 09:51:13 +0000

If you're building a mobile app with Capacitor and embedding YouTube videos, you might encounter the dreaded "Error 153: Video player configuration error" when running your app on iOS. This error occurs specifically in iOS WebView environments and can be frustrating because the same code works perfectly fine in web browsers.

The Problem

YouTube videos embedded via <iframe> tags work flawlessly in Safari and other browsers, but fail with Error 153 when loaded inside an iOS WKWebView (which is what Capacitor uses). The root cause? Missing or incorrect HTTP Referer headers.

YouTube's security requirements expect proper referrer information to validate embed requests. iOS WKWebView doesn't automatically send these headers the same way regular browsers do, causing YouTube to reject the video loading request.

Common "Solutions" That Don't Work

Before finding the right solution, you might try:

Adding referrerpolicy attribute - Helps in browsers, but not sufficient for iOS WebView
Adding meta referrer tags - Partially effective, but unreliable
Using origin parameter - Helps in some cases, but not consistent
Modifying WKWebView configuration - Requires native code changes and still unreliable

The Reliable Solution: HTML Proxy

The most robust solution is to create a simple HTML proxy file that properly handles the referrer headers and embeds the YouTube video correctly. This approach works consistently across all iOS versions.

Step 1: Create the Proxy HTML File

Create a file named youtube.html in your public/static folder:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <meta name="referrer" content="strict-origin-when-cross-origin">
  <title>YouTube Video</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #000;
    }

    #player {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
  </style>
</head>
<body>
  <iframe
    id="player"
    allowfullscreen
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
  ></iframe>

  <script>
    (function() {
      // Parse URL parameters
      const urlParams = new URLSearchParams(window.location.search);

      // Get video ID (required)
      const videoId = urlParams.get('v');
      if (!videoId) {
        document.body.innerHTML = '<div style="color: white; padding: 20px; text-align: center;">Error: Missing video ID parameter (?v=VIDEO_ID)</div>';
        return;
      }

      // Get optional parameters with defaults
      const autoplay = urlParams.get('autoplay') || '0';
      const loop = urlParams.get('loop') || '0';
      const mute = urlParams.get('mute') || '0';
      const playlist = urlParams.get('playlist') || videoId;
      const controls = urlParams.get('controls') || '1';
      const rel = urlParams.get('rel') || '0';
      const modestbranding = urlParams.get('modestbranding') || '1';
      const playsinline = urlParams.get('playsinline') || '1';

      // Build YouTube embed URL parameters
      const embedParams = new URLSearchParams({
        autoplay: autoplay,
        controls: controls,
        rel: rel,
        modestbranding: modestbranding,
        playsinline: playsinline,
        enablejsapi: '1',
        origin: window.location.origin
      });

      // Add loop and playlist if loop is enabled
      if (loop === '1') {
        embedParams.append('loop', '1');
        embedParams.append('playlist', playlist);
      }

      // Add mute if enabled
      if (mute === '1') {
        embedParams.append('mute', '1');
      }

      // Construct final URL
      const embedUrl = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(videoId)}?${embedParams.toString()}`;

      // Set iframe src
      document.getElementById('player').src = embedUrl;
    })();
  </script>
</body>
</html>

Step 2: Update Your Embed URLs

Change your YouTube embed URLs from direct YouTube links to your proxy:

Before:

<iframe
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID?autoplay=1&loop=1&mute=1"
  allowfullscreen
></iframe>

After:

<iframe
  src="https://yourdomain.com/youtube.html?v=VIDEO_ID&autoplay=1&loop=1&mute=1"
  allowfullscreen
></iframe>

In Vue/React components:

// Before
const videoUrl = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1`;

// After
const videoUrl = `https://yourdomain.com/youtube.html?v=${videoId}&autoplay=1`;

Step 3: Deploy and Test

Deploy the proxy file to your production server
Test in a browser to ensure videos load correctly
Rebuild your Capacitor app and test on iOS device
Verify that Error 153 is resolved

Why This Works

The proxy solution works because:

Proper Domain Context: The HTML file is served from your domain, establishing a valid origin
Correct Referrer Policy: The meta tag and iframe attribute set the right referrer policy
YouTube-Compatible Headers: The proxy constructs the embed URL with all necessary parameters including the origin parameter
WKWebView Compatibility: The setup works within iOS WebView's security constraints

Additional Benefits

Beyond fixing Error 153, this approach offers:

Privacy: Uses youtube-nocookie.com domain
Consistency: Same behavior across all platforms
Flexibility: Easy to add custom parameters or modify behavior
Maintainability: Single file to update for all YouTube embeds

Conclusion

While there are various workarounds for YouTube Error 153 in iOS apps, the HTML proxy solution is the most reliable and maintainable. It requires minimal setup, works consistently across iOS versions, and doesn't require native code modifications.

If you're building a Capacitor app with YouTube embeds, save yourself the debugging time and implement this solution from the start.

Have you encountered YouTube Error 153 in your iOS app? What solution worked for you? Share your experience in the comments below!