How to Populate Link Cards with Copilot
Build link card features with Copilot and ToolRouter. Fetch URL metadata and generate the integration code.
Tool
Copilot builds link card functionality into your application — fetch metadata for a URL, generate the TypeScript types for the response, and write the React or UI component that renders the link card, all in one editor session.
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 Link Preview tool:
- In Copilot Chat: "Fetch link card data for this URL: [url]"
- Copilot returns the metadata
- Ask: "Write a React component that renders a link card from this data structure"
- Integrate the component and the API call into your application
Example Prompt
Try this with Copilot using the Link Preview tool
Fetch link preview metadata for https://github.com/vercel/next.js and write a TypeScript type, API call function, and React LinkCard component that renders it.
Tips
- Ask Copilot to write the full stack: API route, TypeScript type, and React component in one pass
- Add a loading skeleton component alongside the link card for a polished user experience
- Implement client-side caching so the same URL is not fetched twice in one session