Add a Site Preview to ToolKit Tool Card

Make your site more useful by adding a site preview using HTML iFrames and OpenGraph.io

Path: prompts/user-interface/Add-a-Site-Preview-to-ToolKit-Tool-Card.md
Authors: Michael Staton
Augmented with: Windsurf Cascade on Claude 3.5 Sonnet
Tags: User-Interface · Open-Graph · API-Integrations

Example request:

const url =
  "https://opengraph.io/api/1.1/oembed/:site?app_id=xxxxxx";

const fetchData = async () => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
};

fetchData();

Example response:

{
    "height": "Height",
    "width": "Width",
    "version": "1.0",
    "provider_name": "name of site you are requesting",
    "type": "type of embed",
    "html": "HTML for iframe."
}