Skip to main content

Partnerships

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

Pull live external data — weather, temperature, and more — into your widgets from partner APIs with zero setup. No API keys to manage, no accounts, no configuration: the backend holds the key and injects it. You just call the endpoint with useFetch, and because the fetch runs server-side at render time, widgets always show fresh data.

Import​

import { useFetch } from "~lib/use-fetch";

Available Partners​

NameSlugOfficial DocsExample URL
Open Weatheropen-weatherdocshttps://api.blotch.app/partnerships/open-weather/data/2.5/weather?q=London&units=metric

Usage​

Call any partner endpoint through the proxy. The URL pattern is:

https://api.blotch.app/partnerships/<slug>/<path>?<query>

<slug> is the partner id; <path> and query params are forwarded to the partner API. Compose <path> and the query from the user's request — the example below shows the shape; substitute the actual values (city, units, etc.) the user asked for. Do not hardcode a fixed value when the request implies a different one.

Open Weather — current weather​

Current weather by city. Path data/2.5/weather; query q=<city> (set to the city the user asked for), units=metric. Read temperature from .main.temp.

import { useFetch } from "~lib/use-fetch";

type Weather = {
  main: { temp: number; feels_like: number; humidity: number };
  weather: { main: string; description: string }[];
  wind: { speed: number };
  name: string;
};

// Set `city` to the city from the user's request (e.g. London, Tokyo, Paris).
const city = "London";
const { data } = useFetch<Weather>(
  `https://api.blotch.app/partnerships/open-weather/data/2.5/weather?q=${city}&units=metric`,
);
// data?.main.temp → temperature in °C; data?.weather[0].main → e.g. "Clouds"

Sandbox​

Test any partnership endpoint interactively:

Open Default in Storybook

See Also​