How to Generate Images with Roo Code Using AgentPatch

Visual assets come up during development more often than you’d expect. Placeholder images for a landing page, illustration concepts for documentation, social preview cards, app store screenshots with mocked content. The usual workflow is to open a separate image generation tool, prompt it, download the result, and drag it back into your project. That loop is slow and breaks your focus.

Roo Code is an open-source AI coding agent that runs as a VS Code extension. It supports MCP (Model Context Protocol), which means it can use external tools during a session. If you connect it to an image generation tool, Roo Code can produce images as part of whatever task it’s working on, without you leaving the editor.

The tool that makes this work is Recraft, a strong image generation API that supports realistic photos, digital illustrations, and vector-style graphics. It covers a broad range of use cases: product mockups, hero images, diagrams, icons.

Setup

The AgentPatch CLI is designed for AI agents to use via shell access. Install it, and your agent can discover and invoke any tool on the marketplace.

Install (zero dependencies, Python 3.10+):

pip install agentpatch

Set your API key:

export AGENTPATCH_API_KEY=your_api_key

Example commands your agent will use:

ap search "web search"
ap run google-search --input '{"query": "test"}'

Get your API key from the AgentPatch dashboard.

Example: Hero Image for a Landing Page

You’re building a marketing site in Roo Code and need a hero image. You type:

“Generate a hero image for the landing page. Abstract illustration of connected nodes in a network, dark blue and white color scheme, wide aspect ratio.”

Roo Code calls the Recraft image generation tool through AgentPatch. The image comes back. You can ask Roo Code to save it to your project’s public/images directory and reference it in the HTML, all in the same conversation.

If the first result isn’t what you wanted, iterate:

“Make the nodes larger and add a subtle gradient from dark blue to black in the background.”

Roo Code calls the tool again with the adjusted prompt.

Example: Documentation Diagrams

Another common case is documentation. You’re writing a README and want a simple architecture diagram:

“Create a clean diagram showing the request flow: Client, API Gateway, Worker, Database. Black and white, minimal style.”

Roo Code generates the diagram and drops it into your docs folder. No Figma, no draw.io, no context switch.

What Roo Code Does Step by Step

When you ask for an image, Roo Code:

  1. Takes your description and formats it as a prompt for the Recraft tool.
  2. Calls AgentPatch’s image generation endpoint with the prompt and any style parameters.
  3. Receives the generated image URL.
  4. Saves the file to your project if you asked it to, or presents the URL for review.

The whole interaction happens inside your VS Code session. Roo Code treats image generation like any other tool call: it picks the right tool, passes the right parameters, and handles the result.

Wrapping Up

Image generation is one tool on the AgentPatch marketplace. The same MCP connection gives Roo Code access to web search, Google Maps, email, YouTube transcripts, and more. One API key, no separate accounts to manage. Visit agentpatch.ai to get started.

← Back to blog