How to Generate Landing Page Assets with Copilot
Generate landing page assets in your IDE with Copilot and ToolRouter. Build pages with custom visuals.
ToolGenerate ImageCopilot 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.
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:
- While building your page: "Generate a hero image for this landing page about developer tools"
- Copilot creates the image and you can reference it in your HTML/JSX
- Request section visuals: "Create illustrations for each feature card"
- Save all assets to your project's public images directory
- Ask Copilot to write the img tags with proper alt text
Example Prompt
Try this with Copilot using the Generate Image tool
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