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

> Learn to use your personal API key for Awesome-GPT-Image-2 image generation. Securely connect to APIMart via localStorage for direct requests and bypass server credits.

- Repository: [苍何/awesome-gpt-image-2](https://github.com/freestylefly/awesome-gpt-image-2)
- Tags: how-to-guide
- Published: 2026-09-08

---

**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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) and [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx)), and if true, it calls `submitPersonalGeneration` directly from [`src/apimartClient.js`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/main.jsx) initializes the state:

```javascript
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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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:

```javascript
// 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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js). Here is how the functions are typically consumed to generate an image using your personal credentials:

```javascript
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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/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`](https://github.com/freestylefly/awesome-gpt-image-2/blob/main/src/apimartClient.js) for authentication.