---
title: ToolRouter — Agent Use Case Guide
description: Step-by-step guide for completing a task with a specific AI agent using ToolRouter.
url: https://toolrouter.com/tools/image-ops/use-cases/create-responsive-variants/openclaw
---
# How to Create Responsive Variants with OpenClaw

OpenClaw automates responsive variant generation at scale, processing entire image libraries into multiple size breakpoints in a single batch. Output includes organized directories by breakpoint, format, and resolution with metadata manifests. Feed the structured output directly into your static site generator or CDN configuration.

## Setup

openclaw mcp add toolrouter -- npx -y toolrouter-mcp

## Steps

1. Connect ToolRouter: openclaw mcp add toolrouter -- npx -y toolrouter-mcp
2. Ask OpenClaw: "Create responsive variants of this image at 400, 800, and 1600px"
3. OpenClaw generates the variants at each size
4. Review the outputs and request additional sizes if needed
5. Implement the variants in your responsive design

## Example Prompt

```
Generate responsive image variants for our blog images at mobile, tablet, and desktop breakpoints.
```

## Tips

- Define your standard breakpoints once and apply them to all images
- Combine with format conversion for maximum performance improvement
- Test the variants on real devices to verify visual quality at each size
