How to Add Image Search to Claude Code

Claude Code is primarily a coding agent, but plenty of development work involves visual assets — finding UI reference examples, locating icon sets, checking what a competitor’s design looks like, or sourcing reference images for documentation. Adding Google Image Search through AgentPatch lets Claude Code handle these tasks directly.

Why This Matters

Design and UI work often involves reference gathering, and that research loop usually pulls you out of your terminal. You need to find a specific kind of button design, a color palette example, a screenshot of a particular UI pattern. Doing that yourself and describing it back to Claude Code is slower than having Claude Code search for it.

With image search as an MCP tool, Claude Code can pull visual references during a task — without context switching on your end. It’s not about Claude Code viewing images (though multimodal capability is a separate question); it’s about the agent finding and returning relevant image URLs and metadata that help move the work forward.

Setup

Install the AgentPatch CLI (zero dependencies, Python 3.10+):

pip install agentpatch

Set your API key:

export AGENTPATCH_API_KEY=your_api_key

Then use it:

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

Get your API key from the AgentPatch dashboard.

Run this command to add AgentPatch as an MCP server:

claude mcp add -s user --transport http agentpatch https://agentpatch.ai/mcp \
  --header "Authorization: Bearer YOUR_API_KEY"

Replace YOUR_API_KEY with your actual key from the AgentPatch dashboard. Claude Code discovers all AgentPatch tools automatically.

Example

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

“I want the hero to feel like Linear’s website — clean, dark, with subtle gradients. Can you find a couple of reference screenshots from sites in that style?”

Claude Code searches Google Images:

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 sketch out a Tailwind component based on this style?

Claude Code gathered visual reference, identified the common design pattern, and offered to build from it — all without you leaving the session.

This is also useful for finding icon set examples, checking what a library’s UI components look like before deciding to use it, or sourcing placeholder images for a layout you’re building.

Wrapping Up

Image search extends what Claude 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