How to Generate Product Mockups with Copilot
Create product mockups in your IDE with Copilot and ToolRouter. Visual assets without leaving your editor.
ToolGenerate ImageCopilot generates product mockups directly in your development environment, making it seamless to create device screenshots, app store listings, and README visuals alongside your code. Reference your project's actual UI descriptions for more accurate mockups and save generated assets straight to your repository's image directory.
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 Generate Image tool:
- In Copilot Chat: "Generate a product mockup for our app shown on an iPhone screen"
- Copilot generates the mockup image via ToolRouter
- Ask for specific variations: "Show the same app in dark mode on a MacBook"
- Save the mockups directly to your project assets
Example Prompt
Try this with Copilot using the Generate Image tool
Generate a product mockup showing our CLI tool running in a terminal on a MacBook Pro. Clean desk, minimal setup, professional lighting.
Tips
- Ideal for generating screenshots and mockups for README files and docs
- Copilot can reference your app's actual UI description for more accurate mockups
- Generate device mockups for App Store and Play Store listings