Call a third-party API

A mini-app calls external HTTPS APIs the normal web way: fetch(). The only platform-specific step is declaring the origin in your manifest so the car host's Content-Security-Policy lets the request through. This recipe is the smallest complete version of that.

What you'll exercise

• Declaring an origin in manifest.network.
• A plain fetch() against it.
• Branching on res.ok and catching network / CSP failures.

1 — Declare the origin

Add the API's origin to network in manifest.json. Each entry is a bare https://host[:port] — no path, query, wildcard, IP literal, or localhost:

{
  "id": "weather-card",
  "name": { "en": "Weather" },
  "icon": "./icon.svg",
  "url": "https://miniapps.i99dash.app/weather-card/",
  "version": "1.0.0",
  "category": "info",
  "network": ["https://api.open-meteo.com"]
}

You may declare up to 10 origins. Omit network (or pass []) and the app reaches no third-party network at all — every cross-origin fetch() is blocked.

2 — Fetch it

const ORIGIN = 'https://api.open-meteo.com';

export async function getTemperature(lat: number, lng: number): Promise<number | null> {
  try {
    const res = await fetch(
      `${ORIGIN}/v1/forecast?latitude=${lat}&longitude=${lng}&current=temperature_2m`,
    );
    if (!res.ok) return null; // 4xx / 5xx
    const body = (await res.json()) as { current?: { temperature_2m?: number } };
    return body.current?.temperature_2m ?? null;
  } catch {
    // Network failure, DNS/TLS error, OR a CSP block because the origin
    // wasn't declared in manifest.network → fetch() rejects with TypeError.
    return null;
  }
}

That's the whole pattern. The SDK is not involved — there is no client.callApi, no success/error envelope, no route key. The origin in your manifest is the entire wiring.

What the host does

On launch the host builds a per-app Content-Security-Policy from your network list and serves it as an HTTP response header. The browser then refuses any request to an origin you didn't declare; your fetch() rejects exactly as a CSP violation does on the open web. The host also intercepts requests as a backstop, and blocks redirects to undeclared origins — so if a declared API redirects elsewhere, declare that origin too.

Things to get right

• Declared egress is unauthenticated. The host attaches no i99dash credentials. If the API needs to know the user, you handle that yourself.
• Never embed a secret. The bundle is public (unzip + strings). If the API requires a key, front it with a thin HTTPS service of your own that holds the secret server-side, and declare that service's origin instead.
• Validate responses. A third-party API can return anything. Parse defensively (?., ??, or a schema) and escape on render.
• Works in a browser, fails on-car? You forgot to add the origin to network. Dev doesn't enforce the CSP; the car does.

Related

• Calling an external API — the full mental model.
• MiniAppManifest — the network field reference.
• Fetch and render a list — the same pattern with loading / empty / error UI.
• Prayer times — offline-first local compute plus optional declared egress.