How to Use a Personal API Key for Image Generation in Awesome‑GPT‑Image‑2

To use a personal API key in Awesome‑GPT‑Image‑2, paste your APIMart key into the "Configure personal API key" dialog; the app stores it in browser localStorage and switches to personal mode, sending requests directly to APIMart with the Authorization: Bearer <key> header instead of using the server's credit pool.

Awesome‑GPT‑Image‑2, an open‑source React‑based interface for AI image generation, supports two distinct authentication flows for the APIMart backend. You can rely on the platform mode, where the server consumes a shared key from its environment variables, or you can supply a personal API key that remains entirely in your browser. This article explains the implementation details found in src/main.jsx and src/apimartClient.js to show exactly how the personal key flow operates.

Understanding the Two Generation Modes

The application determines which authentication path to use by checking for the presence of a personal key in React state.

In platform mode, the frontend makes requests to the application's own backend API (/api/generate-image), which then uses the APIMART_API_KEY environment variable defined in api/_lib/apimart.js (line 15). This deducts credits from the website operator's account.

In personal mode, the frontend bypasses the backend proxy entirely. It checks const hasPersonalKey = Boolean(apimartKey) (as implemented in src/main.jsx), and if true, it calls submitPersonalGeneration directly from src/apimartClient.js. This sends the request straight to APIMart's servers using your private credentials.

Configuring Your Personal APIMart Key in the UI

The user interaction is handled entirely within src/main.jsx.

1. Trigger the dialog: Click the "Configure personal API key" button. The UI strings and button logic are located around lines 173–179 of src/main.jsx.
2. Enter and validate: Paste your key into the input field. The application validates the key by checking its format or performing a lightweight API call.
3. Persist: Upon successful validation, the code invokes setStoredApimartKey(userEnteredKey) to write to localStorage and updates the React state with setApimartKey(userEnteredKey). This triggers a toast notification using the translation key t.apimartKeySaved.
4. Clear: If you remove the key, the handler calls removeStoredApimartKey() and displays t.apimartKeyCleared.

Where the Personal Key is Stored

The personal key lives only in the browser. It is never transmitted to the application's server or stored in the repository’s .env file.

On application startup, src/main.jsx initializes the state:

const [apimartKey, setApimartKey] = useState(() => getStoredApimartKey());

This call to getStoredApimartKey() retrieves the string from localStorage. If the return value is null or empty, the state remains falsy, and the app defaults to platform mode.

Sending Generation Requests with Your Personal Key

When a personal key is present, the generation logic shifts to src/apimartClient.js. This module exports submitPersonalGeneration and fetchPersonalTask, both of which accept the key as an explicit argument.

The submitPersonalGeneration function (lines 64–75) constructs the request payload and injects the key into the HTTP headers:

// src/apimartClient.js (simplified logic)
async function submitPersonalGeneration(prompt, apimartKey, language) {
  const response = await fetch('https://api.apimart.ai/v1/generate', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apimartKey}`  // Your personal key
    },
    body: JSON.stringify({ prompt, language })
  });
  return response.json();
}

Similarly, fetchPersonalTask (used for polling the task status) also requires the apimartKey to authenticate status requests.

If the key is invalid or expired, the UI displays the error message defined by t.apimartKeyInvalid (e.g., "The APIMart API key is invalid. Check it and try again.").

Code Example: Generating Images in Personal Mode

You can see the client implementation in src/apimartClient.js. Here is how the functions are typically consumed to generate an image using your personal credentials:

import { submitPersonalGeneration, fetchPersonalTask } from './src/apimartClient.js';

async function generateWithPersonalKey(prompt, personalKey) {
  // 1️⃣ Submit the generation request using personal key
  const { taskId } = await submitPersonalGeneration(
    prompt,
    personalKey,  // <-- Your personal APIMart API key
    'en'
  );

  // 2️⃣ Poll the task until completion
  let result = null;
  while (!result) {
    await new Promise(resolve => setTimeout(resolve, 2000));
    result = await fetchPersonalTask(taskId, personalKey, 'en');
  }

  console.log('Generated image URL:', result.output[0].uri);
}

In this flow, the personalKey variable is passed through from the React state down to the client functions, ensuring the Authorization header is correctly populated for every request.

Fallback to the Server‑Side Key

If apimartKey is falsy—meaning no personal key was entered or it was cleared—the application reverts to platform mode. In this scenario, the frontend posts to the internal /api/generate-image endpoint. The server-side handler in api/_lib/apimart.js then reads process.env.APIMART_API_KEY to authenticate the request with APIMart, deducting credits from the platform's account instead of yours.

Summary

• Storage: Personal APIMart keys are stored in browser localStorage, not on the server, via functions defined in src/main.jsx.
• State: The React state apimartKey is initialized using getStoredApimartKey() on app load.
• Mode Switch: The boolean check Boolean(apimartKey) determines whether the app uses personal mode or platform mode.
• Request Headers: In personal mode, src/apimartClient.js functions attach the header Authorization: Bearer <personal‑key> to every outgoing request.
• Fallback: Without a personal key, the system defaults to the server-side environment variable APIMART_API_KEY defined in api/_lib/apimart.js.

Frequently Asked Questions

Where is my personal API key stored?

Your personal API key is stored in the browser’s localStorage. It never touches the Awesome‑GPT‑Image‑2 server or appears in the codebase environment files, ensuring only you have access to your credentials.

What happens if I don’t enter a personal key?

If no personal key is configured, the application falls back to platform mode. It sends generation requests to the backend API, which uses the APIMART_API_KEY defined in the server's .env file, consuming credits from the site operator's APIMart account.

How does the app validate my APIMart key?

When you click save in the configuration dialog, the application validates the key (typically via a lightweight API call or format check). If validation succeeds, it calls setStoredApimartKey and displays the success toast t.apimartKeySaved. If it fails, the UI shows the error t.apimartKeyInvalid.

Can I use any APIMart-compatible key?

Yes. Obtain a valid key from your APIMart dashboard (e.g., via https://apimart.ai/register). Once entered into the Awesome‑GPT‑Image‑2 UI, it is passed directly to the submitPersonalGeneration and fetchPersonalTask functions in src/apimartClient.js for authentication.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}