Embed: Generate custom previews with AI

The payload your assistant will work with

microlink https://stripe.com

curl -G "https://api.microlink.io" \
  -d "url=https://stripe.com"

import mql from '@microlink/mql'

const { data } = await mql('https://stripe.com')

import requests

url = "https://api.microlink.io/"

querystring = {
    "url": "https://stripe.com"
}

response = requests.get(url, params=querystring)

print(response.json())

require 'uri'
require 'net/http'

base_url = "https://api.microlink.io/"

params = {
  url: "https://stripe.com"
}

uri = URI(base_url)
uri.query = URI.encode_www_form(params)

http = Net::HTTP.new(uri.host, uri.port)
http.use_ssl = true

request = Net::HTTP::Get.new(uri)
response = http.request(request)

puts response.body

<?php

$baseUrl = "https://api.microlink.io/";

$params = [
    "url" => "https://stripe.com"
];

$query = http_build_query($params);
$url = $baseUrl . '?' . $query;

$curl = curl_init();

curl_setopt_array($curl, [
    CURLOPT_URL => $url,
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_ENCODING => "",
    CURLOPT_MAXREDIRS => 10,
    CURLOPT_TIMEOUT => 30,
    CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
    CURLOPT_CUSTOMREQUEST => "GET"
]);

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
    echo "cURL Error #: " . $err;
} else {
    echo $response;
}

package main

import (
    "fmt"
    "net/http"
    "net/url"
    "io"
)

func main() {
    baseURL := "https://api.microlink.io"

    u, err := url.Parse(baseURL)
    if err != nil {
        panic(err)
    }
    q := u.Query()
    q.Set("url", "https://stripe.com")
    u.RawQuery = q.Encode()

    req, err := http.NewRequest("GET", u.String(), nil)
    if err != nil {
        panic(err)
    }

    client := &http.Client{}
    resp, err := client.Do(req)
    if err != nil {
        panic(err)
    }
    defer resp.Body.Close()

    body, err := io.ReadAll(resp.Body)
    if err != nil {
        panic(err)
    }

    fmt.Println(string(body))
}

import mql from '@microlink/mql'

const { data } = await mql('https://stripe.com')

Why prompt your assistant instead of using the SDK

• No bundle cost. No SDK install, no peer dependencies (react, react-dom, styled-components).
• Matches your design system exactly. Your assistant already knows your tokens, components, and conventions — let it use them.
• Server-renderable. The result is plain HTML/JSX, so it works in SSR, RSC, static sites, emails, and Markdown.
• Easy to evolve. When the design system changes, regenerate the card with the same prompt — no SDK upgrade dance.

The base prompt

I want to add link previews to this project without installing the
Microlink SDK. Instead, fetch the metadata directly from the API:

  GET https://api.microlink.io?url=<TARGET_URL>

The response is JSON with `data` containing at least:
  - data.title         (string)
  - data.description   (string)
  - data.publisher     (string)
  - data.url           (string, canonical)
  - data.image.url     (string, og:image)
  - data.logo.url      (string, favicon / brand mark)
  - data.author        (string | null)

Generate a preview component that:

  1. Reads those fields from `data`.
  2. Uses *this project's* design system — same components, tokens,
     spacing, typography, and theming primitives I already use here.
     Do not invent new design tokens. Do not use inline styles when
     the project already has CSS modules / Tailwind / styled-components.
  3. Handles the case where image, logo, description, or publisher
     are missing — render a graceful fallback, never a broken `<img>`.
  4. Stays accessible: anchor wraps the whole card with `rel="noopener
     noreferrer"`, decorative images use empty alt, the title is a
     real heading.

When I ask for a specific style (hero card, one-line, chat bubble,
tweet-style, notification, telegram-style), apply that layout while
keeping the rules above.

Pick a style and ask for it

Hero card

Prompt to send: "Generate a hero-style preview using the contract above. Image fills the top with a 16:9 ratio, then publisher (with logo), title, and a 3-line clamped description below. Match the card chrome and elevation we already use for other content cards in this project."

Stripe

Financial Infrastructure to Grow Your Revenue

Join the millions of companies of all sizes that use Stripe online and in person to accept payments, send payouts, automate financial processes, and ultimately grow revenue.

One-line

Prompt to send: "Generate a one-line preview using the contract above. Logo, publisher (bold), title (truncated), and the bare hostname on the right, all on a single row. Reuse the row primitives we already have for list items in this project."

StripeFinancial Infrastructure to Grow Your Revenuestripe.com

Tweet-style

Prompt to send: "Generate a tweet-style preview using the contract above. Round avatar from logo at the top with publisher and a fake @handle from the hostname, then the title as the post body, then a rounded media image. Use the radii and avatar utilities we already have."

m

Microlink@microlinkhq · 2h

Embed any URL with rich previews — try it with stripe.com

stripe.com

Financial Infrastructure to Grow Your Revenue

Join the millions of companies of all sizes that use Stripe online and in person to accept payments, send payouts, automate financial processes, and ultimately grow revenue.

24 188 1.2k

Telegram-style

Prompt to send: "Generate a telegram-style preview using the contract above. Add palette: true to the metadata request so I get brand colors. Use a vertical accent bar on the left, colored with data.image.palette[0], and tint the publisher line with the same color. Make sure the contrast pair (background_color + color) is respected for readability."

Stripe

Financial Infrastructure to Grow Your Revenue

Join the millions of companies of all sizes that use Stripe online and in person to accept payments, send payouts, automate financial processes, and ultimately grow revenue.

Notification

Prompt to send: "Generate a notification-style preview using the contract above. A small logo on the left, title and publisher in the middle, and a primary-colored 'Open' link on the right. Reuse the toast / activity-row component we already have."

Stripenow

Financial Infrastructure to Grow Your Revenue

Join the millions of companies of all sizes that use Stripe online and in person to accept payments, send payouts, automate financial processes, and ultimately grow revenue.

Chat bubble

Prompt to send: "Generate a chat-bubble citation using the contract above. A short text line referencing the publisher, then a pill-shaped link with a tiny logo and the title (truncated). Match the chat bubble we already render for AI responses in this project."

Financial Infrastructure to Grow Your Revenue

Join the millions of companies of all sizes that use Stripe online and in person to accept payments, send payouts, automate financial processes, and ultimately grow revenue.

Check this webpage! stripe.com

12:34✓✓

Wire it up

Server / RSC / build-time

import mql from '@microlink/mql'

export async function getPreview (url, options = {}) {
  const { data } = await mql(url, { palette: true, ...options })
  return data
}

// app/components/LinkPreview.tsx (Next.js RSC example)
import { getPreview } from '@/lib/preview'

export async function LinkPreview ({ url }) {
  const data = await getPreview(url)
  return /* the JSX your assistant generated, reading from `data` */
}

Client-side

import { useEffect, useState } from 'react'

export function useLinkPreview (url) {
  const [data, setData] = useState(null)
  useEffect(() => {
    let cancelled = false
    fetch(`https://api.microlink.io?url=${encodeURIComponent(url)}&palette=true`)
      .then(r => r.json())
      .then(json => { if (!cancelled && json.status === 'success') setData(json.data) })
    return () => { cancelled = true }
  }, [url])
  return data
}

Direct from HTML

<img src="https://api.microlink.io?url=https://stripe.com&embed=image.url" alt="Stripe" />

Theming with palette

const { data } = await mql(url, { palette: true })

card.style.setProperty('--brand', data.image.background_color)
card.style.setProperty('--brand-text', data.image.color)
card.style.setProperty('--brand-accent', data.image.palette[0])

When og:image is missing

const { data } = await mql(url, { screenshot: true, palette: true })
const heroImage = data.image?.url ?? data.screenshot.url

Iterate with your assistant

• "Make the hero card horizontal, image on the left, content on the right."
• "Tighten the one-line variant for our sidebar — drop the description and switch to our --text-xs token."
• "Add a hover state matching how our other clickable cards lift on hover."
• "Animate the entry with the same enter transition we use on toasts."

Next step