Generate an image with JavaScript and the Magnt API

Create a key before writing the integration

Sign in to Magnt, open the developer playground and create a named API key. Copy the secret when it appears; you cannot retrieve it later. Set it as MAGNT_API_KEY in your local server environment or your application’s secret configuration. Do not put it in browser code, a public repository, or a URL.

The account needs an active plan allowance or enough legacy credits to generate an image. Creating a key does not create free generation capacity. One successful generation uses one plan output or two legacy credits, shared with the account’s other image usage.

• Create a Magnt API key

Send the request from Node.js

Save the example as generate.mjs and run it with a current Node.js release that supports the built-in fetch API and AbortSignal.timeout. The program reads a server-side environment variable, sends a JSON body, and writes image.webp only after a successful image response.

The request selects magnt-image-1, a square composition and 1K resolution. The image response is WebP regardless of the source file format you might use for an editing request. No provider-specific account or key belongs in this call.

import { writeFile } from "node:fs/promises";

const key = process.env.MAGNT_API_KEY;
if (!key) throw new Error("Set MAGNT_API_KEY first");

const response = await fetch(
  "https://magnt.app/api/v1/images/generations",
  {
    method: "POST",
    headers: {
      Authorization: `Bearer ${key}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      model: "magnt-image-1",
      prompt: "A blue ceramic cup in soft window light",
      aspect_ratio: "1:1",
      resolution: "1K",
      response_format: "image",
    }),
    signal: AbortSignal.timeout(240_000),
  },
);
if (!response.ok) {
  const error = await response.json();
  throw new Error(`Magnt ${response.status}: ${error.error?.message}`);
}
if (!response.headers.get("content-type")?.startsWith("image/webp")) {
  throw new Error("Unexpected response type");
}
await writeFile("image.webp", Buffer.from(await response.arrayBuffer()));

• Node.js fetch and AbortSignal reference

Put the request behind your own application route

For a web product, the browser should call your backend. Authenticate your user there, validate their prompt and attachments, and then call Magnt with your key. Return the image from your route or store an accepted result in your own application if users need it later.

Keep the Generate button disabled while a request is running. A second click is a second generation, not a lookup of the first request. The API does not provide stored jobs, a replay endpoint or automatic deduplication. If your application needs those behaviours, design them explicitly around your own request IDs and state.

Handle errors as part of the UI

A 401 response means the Magnt key is missing, invalid or revoked. A 402 response means the account has no available allowance. A 429 response means generation is rate limited; asking the user to try again later is better than repeatedly resubmitting the same request.

The client timeout stops this program waiting indefinitely. It does not prove an upstream generation stopped, and it is not a reason to automatically repeat the call. Generation errors handled by Magnt restore the reserved allowance; a process termination can leave a reservation consumed. Avoid presenting a timeout as a guaranteed refund.

• HTTP 429 reference

Start with one reviewed result

Use the playground to settle on a prompt before connecting the flow to your product. Once the first image arrives, check the actual dimensions, file type and composition. Add your download or accept action after that review step.

The API returns the image in the response and does not retain a photo history. That keeps this integration small, but it also means your application is responsible for keeping any output your user expects to find tomorrow.

• Explore the Image API