AI Weather Forecasting in Your Browser: A 2026 Developer Guide

The surprising thing about AI weather forecasting in 2026 is that you can do it from a web page. No supercomputer, no CUDA install, no ERA5 download. You call a hosted Aurora endpoint through SciRouter's climate lab, pass an initial atmospheric state and a forecast horizon, and get a forecast back in seconds. This guide walks through the whole thing.

What you need

• A free SciRouter API key from the dashboard.
• A web project. Any framework or vanilla JS works.
• A small backend proxy — do not put your API key directly in browser JavaScript.

The proxy is important. Never expose a SciRouter API key client-side. Put a tiny serverless function in front of the call, inject the key from an environment variable, and forward the request.

Step 1: Build a minimal backend proxy

Here is the smallest possible proxy in Node, suitable for Vercel or any serverless host. The proxy receives a forecast request from the browser, attaches the API key, calls SciRouter, and returns the response.

// api/forecast.js
export default async function handler(req, res) {
  if (req.method !== "POST") {
    return res.status(405).json({ error: "method not allowed" });
  }

  const { initial_state, horizon_hours } = req.body;

  const upstream = await fetch(
    "https://scirouter-gateway-production.up.railway.app/v1/climate/aurora",
    {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${process.env.SCIROUTER_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ initial_state, horizon_hours }),
    }
  );

  const data = await upstream.json();
  return res.status(upstream.status).json(data);
}

That is it. No state, no logic, no database. Set SCIROUTER_API_KEY in the host's environment and deploy.

Step 2: Call it from the browser

From browser JavaScript, call your proxy instead of calling SciRouter directly. The proxy attaches the API key for you.

async function getAuroraForecast(initialState, hoursAhead) {
  const resp = await fetch("/api/forecast", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      initial_state: initialState,
      horizon_hours: hoursAhead,
    }),
  });

  if (!resp.ok) {
    throw new Error(`Forecast failed: ${resp.status}`);
  }

  return resp.json();
}

// Example: forecast 24 hours ahead from the current atmospheric state
const forecast = await getAuroraForecast(initialState, 24);
console.log("Forecast:", forecast);

The initialState object is the starting atmospheric state Aurora will forecast forward. For development you can use the example initial state shipped with the climate lab. For production you want to feed in a recent real state.

Step 3: Render the forecast

Aurora returns fields on a global grid. What you do with them depends on the application.

• Simple dashboards. Pick a single variable (temperature, wind) and render it as a 2D heatmap using deck.gl or Leaflet.
• Cyclone tracking UIs. Call the cyclone-tracking head and render predicted storm positions as a path on a map.
• Air quality overlays. Call the air-quality head and render pollutant concentrations over a city or region.

The response from Aurora is just numbers on a grid. Rendering is entirely up to you. For the climate lab UI we use deck.gl for raster overlays and d3 for time-series charts.

Step 4: Handle latency gracefully

Aurora is fast — typically a few seconds end to end — but that is still long enough that you need a loading state. Three tips:

• Show a skeleton or spinner. Users wait more happily when they know something is happening.
• Cache aggressively. If the same initial state and horizon are requested twice, return the cached result. Many user interactions only change one parameter at a time.
• Precompute the common cases. If your app always forecasts 24 and 72 hours ahead from the same base state, precompute those on a timer and serve them from a simple key-value store.

Common pitfalls

Exposing the API key

The single biggest mistake. Even on a personal project, put a proxy in front. It takes ten minutes and it is the difference between a leaked key and a secure app.

Wrong initial state format

Aurora expects atmospheric variables at specific pressure levels in a specific order. Check the schema before sending. The climate lab documentation has the exact field layout.

Treating Aurora like a forecast API

Aurora is an inference model. It forecasts from whatever state you give it. If you pass a stale initial state, your forecast is stale. For production applications, refresh the initial state on a schedule that matches your freshness requirements.

Using it for safety-critical decisions

Aurora is a research-grade tool, and it is very good, but it is not the operational forecast that an emergency manager should be making evacuation decisions from. Combine it with official forecasts and expert review for anything where a wrong answer has real consequences.

Where to go next

Once you have a working forecast in the browser, the natural next step is to wire it into a broader climate or sustainability workflow. The SciRouter climate lab exposes Aurora alongside air quality prediction and cyclone tracking. For a deeper dive into how Aurora works under the hood, see Aurora Explained.

Bottom line

AI weather forecasting in the browser is a three-step job: set up a tiny backend proxy, call the proxy from client code, and render the result. Aurora through SciRouter removes all of the infrastructure pain that used to make this kind of app impossible for anyone who was not an atmospheric scientist. Now it is a weekend project.

Open the Climate Lab →