How to Search Images with Roo Code

Development work involves visual assets more often than the “coding agent” label suggests. Finding UI reference examples, locating icon sets, checking a competitor’s design, sourcing reference images for documentation. That research loop usually pulls you out of your editor: open a browser, search, scroll, screenshot, describe it back to the agent. Slow.

Roo Code is an open-source AI coding agent that runs as a VS Code extension. It supports MCP tools, which means it can call external services during a session. Connect it to an image search tool and Roo Code can find visual references without you leaving the editor. It returns image URLs and metadata that help move the work forward.

This is about reference gathering, not image viewing. Roo Code finds what you’re looking for and gives you the URLs. You use those references to inform the design work you’re doing together.

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: Finding Design References

You’re building a landing page and want direction on the hero section:

“I want the hero to feel like Linear’s website. Clean, dark, subtle gradients. Find a couple of reference screenshots from sites in that style.”

Roo Code searches Google Images through AgentPatch:

Searching Google Images for "SaaS dark landing page clean gradient hero Linear style"...

Found relevant references:

1. Linear.app: dark background, sharp typography, subtle blue gradient on CTA
   https://linear.app [screenshot]

2. Vercel.com: similar aesthetic, gradient orb background effect
   https://vercel.com [screenshot]

3. Resend.com: minimal dark hero, monospace type, strong contrast
   https://resend.com [screenshot]

These all use a similar pattern: dark background (#0a0a0a range), single accent gradient,
no stock photography. Want me to build a Tailwind component based on this style?

Roo Code gathered visual references, identified the common design pattern, and offered to build from it. All inside VS Code.

Example: Checking a UI Library’s Components

Before committing to a UI library:

“Search for screenshots of Shadcn UI dashboard examples. I want to see what the data table component looks like in real projects.”

Roo Code finds examples and reports back with links and descriptions. You make an informed decision without leaving the editor.

What Roo Code Does Step by Step

  1. Takes your description and formulates a Google Images search query.
  2. Calls the image search tool through AgentPatch.
  3. Receives results with image URLs, source pages, and metadata.
  4. Presents the findings in the VS Code chat panel with enough context to be useful.

This is also handy for sourcing placeholder images during layout work, finding icon style references, or checking what a competitor’s product looks like before a design session.

Wrapping Up

Image search extends what Roo Code can research during a session. The same AgentPatch connection also gives access to web search, Bing Search, and everything else on the marketplace. See agentpatch.ai for the full tool list.

← Back to blog