How to Generate Images and Videos with Claude Code for a Website

To generate images and videos with Claude Code, connect it to an external generation service through MCP. Have it choose a supported model, quote the exact request, and wait for your approval. Generate the still first, use its completed generation ID as the video's first frame, then download both assets into your website project.

The example is a coffee shop homepage: a warm interior image, a gentle camera move, and readable page text beside it. You can adapt the instructions to a portfolio or product page. Keep the image, video, and page layout linked by explicit filenames and generation IDs.

Can Claude Code generate images and videos?

Claude Code coordinates the task and edits the website code. MCP gives it access to external tools. FlyAIgh sends the image or video request to the selected generation model and returns the job and output. Writing SVG or HTML and understanding an uploaded picture are different capabilities from generating a photograph or a video.

This division matters when choosing a solution. For a simple icon, chart, or CSS animation, code may be enough. For a photographic scene or generated camera movement, use an appropriate media model. Connecting MCP does not make every model support the same inputs, duration, or resolution.

Connect the generation tools

You need a working Claude Code installation and login, plus an active FlyAIgh Basic subscription or above. The Starter Pack alone does not include MCP access. Claude Code account costs and FlyAIgh generation credits are separate. In FlyAIgh, open Tools → MCP, create an API key, and optionally set its daily credit cap.

Use the HTTP connection command below in your own terminal, replacing the placeholder with your key. Treat the saved client configuration as a secret: do not commit it or put the key in website code. The FlyAIgh MCP setup guide below has the current connection instructions. In Claude Code, open /mcp to check the connection; claude mcp list also lists configured servers.

claude mcp add --transport http flyaigh https://www.flyaigh.com/api/mcp \
  --header "Authorization: Bearer YOUR_FLYAIGH_API_KEY"

Before generating, ask Claude Code to call get_balance and list_models. Choose the model ID and parameters from those results, not a guessed model name. For your own photo, call upload_file; if it returns a signed upload URL, upload the file bytes there before using its file_id. A local pathname or an arbitrary image URL is not a substitute for that reference ID.

Create an image for a specific place on the page

Start with the layout, not just a style adjective. Decide where the image sits, its aspect ratio, the subject's position, and whether the page needs empty space. In this example, use a 16:9 image in a media panel and keep the headline as HTML beside it. This keeps text editable and easier to read on a phone.

Ask for the available image models and a quote for the chosen settings. Prices shown by list_models are examples for default settings; quote prices the specific request. Confirm that request before generate_image runs. Changing the model, resolution, quality, or references can change the quote.

When get_job reports completion, inspect the image before animating it. Check composition, unwanted lettering, invented objects, and whether the subject still fits a narrow screen. Save the approved image's ID with its prompt and model. If you have several versions, select the exact one; the newest result is not automatically the approved result.

Turn the approved image into a video

After approving the still, choose a video model that supports i2v. Pass the completed image generation ID as first_frame. This connects the video to the image you actually selected; a text-only request describing a similar scene would create a new scene instead. Quote the chosen duration, resolution, aspect ratio, and audio setting before generating.

Describe motion separately from the picture: a slow camera push, mild steam, a stationary cup. Start with the shortest supported duration that suits the page. Avoid asking for a complete scene change when your goal is a calm homepage visual. A first frame guides generation; it does not lock every object or logo pixel in place.

Use get_job with the returned video job ID to follow progress. When it finishes, watch the whole clip, with sound if included. Inspect the cup's shape, edges, camera movement, and last frame. A completed job can still have visual defects. If you plan to loop it, check the end-to-start jump rather than assuming the result is seamless.

Download the files and put them on your website

Download the approved image and completed video. Private-file download links returned by get_job expire after 1 hour; call get_job again for a fresh link if needed. Do not use a temporary signed URL as your permanent website source. Keep an asset record linking the image ID, video ID, prompt, model, and final local filenames.

For a Next.js project, files in public/media are served at /media. For another framework, use its static-assets directory or your own CDN. The example assumes an actual JPEG poster named hero-poster.jpg and a browser-playable MP4 named hero.mp4. Convert files if necessary; changing a PNG suffix to .jpg does not convert its contents. Keep API keys and generation calls out of the public page.

The HTML example gives the video native controls, an image poster, and user-started playback. preload="none" avoids requesting the video in advance, although browser behavior can vary. The layout stacks on narrow screens and keeps text separate from the media. In React JSX, use className, playsInline, and other JSX attribute spellings.

<section class="hero">
  <div>
    <h1>Your page heading</h1>
    <p>Your introduction</p>
  </div>
  <video controls playsinline preload="none"
    poster="/media/hero-poster.jpg"
    width="1280" height="720">
    <source src="/media/hero.mp4" type="video/mp4">
    <a href="/media/hero.mp4">Download video</a>
  </video>
</section>
<style>
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
  }
  .hero video {
    display: block;
    width: 100%;
    height: auto;
  }
  @media (max-width: 48rem) {
    .hero { grid-template-columns: minmax(0, 1fr); }
  }
</style>

Keep revisions and spending under control

Approve each generation separately and compare the quote with your balance and any key cap. An API key's daily cap helps limit spending; it does not make a sequence of revisions free. If available in the tool call, expected_credits protects against a changed quote, but is not a total project budget.

For an uncertain submission, check the existing job before retrying. Reusing an idempotency_key for the same request within 24 hours avoids creating a duplicate; changing parameters under that key is a conflict. A new creative version is a new request and can cost credits. A successfully generated clip that you dislike is not the same as a failed job.

• No connection: check /mcp, the HTTP endpoint, the API key, and an active eligible subscription.
• Reference rejected: use an image that has completed under your account, or a fully uploaded file_id. For i2v, put it in first_frame.
• Media disappears: refresh an expired download link with get_job and host the downloaded file at a stable path; do not regenerate it.
• Playback or cropping looks wrong: check the file format, network response, mobile dimensions, and CSS. A cover crop can hide part of the subject.

Sources and related guides

The capability distinction follows Anthropic's documentation; tool names and reference handling follow FlyAIgh's current MCP implementation. The page example uses standard HTML video behavior. Check live model options and quotes when you run the workflow.

• Claude: image-generation capabilities
• Claude Code: connecting tools with MCP
• FlyAIgh: MCP setup and tool reference
• MDN: the HTML video element
• Animate an image in FlyAIgh
• Prepare useful reference images
• Make a product video from photos