---
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/generate-image/use-cases/generate-landing-page-assets/copilot
---
# How to Generate Landing Page Assets with Copilot

Copilot generates landing page assets within your IDE, keeping visual asset creation tightly integrated with front-end development. Generate hero images, section backgrounds, and feature illustrations alongside your HTML and CSS, saving directly to your public assets directory.

## Setup

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

## Steps

1. Add ToolRouter to Copilot MCP config
2. While building your page: "Generate a hero image for this landing page about developer tools"
3. Copilot creates the image and you can reference it in your HTML/JSX
4. Request section visuals: "Create illustrations for each feature card"
5. Save all assets to your project's public images directory
6. Ask Copilot to write the img tags with proper alt text

## Example Prompt

```
Generate landing page assets for my Next.js site: a hero image about API integration, and 3 feature section illustrations. Save them to public/images/landing/
```

## Tips

- Perfect for full-stack developers building and designing in the same workflow
- Copilot can generate the assets and the code to display them simultaneously
- Use consistent naming conventions for easy asset management
