---
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/copilot
---
# How to Create Responsive Variants with Copilot

Copilot generates responsive variants from within your IDE and immediately helps write the implementation code. Create image variants and get the corresponding React components, Next.js Image configurations, or picture element markup in the same workflow. Copilot understands your framework and generates framework-specific responsive code.

## Setup

{"mcpServers":{"toolrouter":{"command":"npx","args":["-y","toolrouter-mcp"]}}}

## Steps

1. Add ToolRouter to your Copilot MCP configuration
2. In Copilot Chat: "Generate responsive variants of this image at standard breakpoints"
3. Review the generated variants
4. Ask Copilot to create a React component that uses srcset with these variants
5. Add responsive image generation to your build pipeline

## Example Prompt

```
Generate responsive variants for all hero images and create a Next.js Image component config for them.
```

## Tips

- Copilot can generate Next.js Image, picture element, or srcset implementations
- Automate variant generation in your build process for new images
- Great for creating responsive image components in your design system
