How to Create Integration Showcases with Copilot
Build integration pages from code with Copilot and ToolRouter. Logos and components in one step.
Tool
Copilot fetches brand logos directly into your codebase without breaking your development flow. Request logos for your partner page, integration showcase, or documentation site, then have Copilot save them to your assets directory and generate the corresponding component code -- a logo grid, a carousel, or a categorized gallery. The entire workflow from logo fetch to rendered web component happens inside your editor, making it trivial to keep logo showcases current as your partner ecosystem grows.
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 Get Brand Logo tool:
- In Copilot Chat: "Fetch logos for integrations in integrations.yaml using get-brand-logo"
- Copilot fetches all logos and provides download URLs
- Ask Copilot to generate an IntegrationShowcase component
- Review, customize, and deploy the showcase page
Example Prompt
Try this with Copilot using the Get Brand Logo tool
Fetch logos for all integrations listed in data/integrations.yaml and generate a filterable React grid component for our marketplace page.
Tips
- Copilot can generate filterable, searchable integration galleries
- Use for building integration pages in Next.js, Gatsby, or Astro
- Ask Copilot to add category filters and search functionality to the component