Docs

Image Generation

An agent can generate images, not just code. Image generation is a separate model capability from text, so you give the agent its own imageModel — your coding model stays the brain and hands off only the pixel-making when it needs a picture.

agent.ts

import { NodeAgent } from '@nanocodana/nodejs'
import { anthropic } from '@ai-sdk/anthropic'
import { openai } from '@ai-sdk/openai'

const agent = NodeAgent({
  model: anthropic('claude-sonnet-5'),    // does the coding
  imageModel: openai.image('gpt-image-1'),  // makes the pictures
  workingDirectory: process.cwd(),
})

await agent.stream({
  messages: [{ role: 'user', content: 'Add a hero banner image to the landing page.' }],
})
// → the agent calls GenerateImage({ prompt, path: 'public/hero.png' }),
//   the image is written to disk, and it can Read/reference it from code.

The GenerateImage tool#

Setting imageModel registers a GenerateImage tool the agent calls on demand. It takes a prompt and a path (plus optional size/aspectRatio/n), generates with the AI SDK, and writes the bytes to your filesystem — the same code path in Node, browser, and sandbox. With no imageModel, the tool isn't exposed and you pay nothing.

Any AI SDK image model works: openai.image(...), Google Imagen, Black Forest Labs Flux, xAI Grok Imagine, or anything via the AI Gateway.

The single-model path#

If you instead point the agent's main model at a multimodal image model (e.g. google/gemini-3-pro-image), any images it emits directly are auto-saved to imageOutputDir (default generated/). No second model — but that model is then also your coding brain, so the two-model setup above is usually what you want.

Per-turn control#

await agent.stream({ messages, imageModel: openai.image('gpt-image-1') }) // enable just this turn

In the browser this is how Sharables generates app icons and illustrations — the bytes land in the virtual filesystem and the preview picks them up like any other asset.