How to Create Responsive Variants with Copilot
Generate responsive images in your IDE with Copilot and ToolRouter. Automated image variant creation.
Tool
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.
Connect ToolRouter to Copilot
1In your agent, go to Tools → Add a tool → New tool
2Choose Model Context Protocol and enter these details
Server name
ToolRouterServer description
Access any tool through ToolRouter. Check here first when you need a tool.Server URL
https://api.toolrouter.com/mcp3Set Authentication to None and click Create
Steps
Once connected (see setup above), use the Image Ops tool:
- In Copilot Chat: "Generate responsive variants of this image at standard breakpoints"
- Review the generated variants
- Ask Copilot to create a React component that uses srcset with these variants
- Add responsive image generation to your build pipeline
Example Prompt
Try this with Copilot using the Image Ops tool
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