# How to Enable Stable Diffusion Integration in NextChat: A Complete Configuration Guide

> Effortlessly integrate Stable Diffusion into NextChat with this complete guide. Learn to configure Stability AI, set your API key, and start generating images at /sd.

- Repository: [NextChat/NextChat](https://github.com/ChatGPTNextWeb/NextChat)
- Tags: how-to-guide
- Published: 2026-02-28

---

**To enable Stable Diffusion in NextChat, select Stability AI as your provider in Settings → Access, configure the endpoint URL (typically `https://api.stability.ai`), and provide your `STABILITY_API_KEY`, then navigate to `/sd` to generate images.**

NextChat (ChatGPTNextWeb/NextChat) supports image generation through **Stability AI**, the service behind Stable Diffusion models. This integration allows you to generate images directly within the chat interface without requiring a local GPU or manual model setup. Below is a comprehensive guide to configuring and using this feature based on the actual source code implementation.

## Prerequisites for Stable Diffusion Integration

### Obtaining a Stability AI API Key

Before configuring NextChat, you must have a valid Stability AI account and API key. The application expects the `STABILITY_API_KEY` environment variable or a user-provided key in the UI. Without this authentication token, the proxy in [`app/api/stability.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/api/stability.ts) cannot authorize requests to the Stability endpoint.

### Supported Endpoints

The default Stability AI endpoint is `https://api.stability.ai`. However, NextChat supports custom endpoints if you are using a proxy or a self-hosted Stability-compatible API. The endpoint configuration is stored in `accessStore.stabilityUrl` and defaults to the value defined in [`app/constant.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/constant.ts).

## Step-by-Step Configuration Guide

### 1. Select Stability as the Provider

Navigate to **Settings → Access** in the NextChat UI. Locate the **Provider** dropdown and select **Stability**. This selection triggers the UI to render Stability-specific configuration fields.

According to [`app/components/settings.tsx`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/components/settings.tsx), the Stability endpoint and API key inputs only appear when `accessStore.provider === ServiceProvider.Stability`:

```typescript
// From app/components/settings.tsx
{accessStore.provider === ServiceProvider.Stability && (
  <>
    <ListItem title={Locale.Settings.Access.Stability.Endpoint.Title}>
      <input
        type="text"
        value={accessStore.stabilityUrl}
        placeholder={Stability.ExampleEndpoint}
        onChange={e => accessStore.update(a => a.stabilityUrl = e.currentTarget.value)}
      />
    </ListItem>
    {/* API Key input follows */}
  </>
)}

```

### 2. Configure the Endpoint URL

In the **Stability Endpoint** field, enter the base URL for the Stability API. The default is `https://api.stability.ai`. This value updates `accessStore.stabilityUrl`, which is used by the frontend store when constructing requests.

### 3. Enter Your API Key

In the **Stability API Key** field, paste your `STABILITY_API_KEY`. This sensitive value is stored in `accessStore.stabilityApiKey` and is never exposed to the client-side code in plain text during transmission; instead, it is handled by the server-side proxy.

```typescript
// From app/components/settings.tsx - API Key input
<ListItem title={Locale.Settings.Access.Stability.ApiKey.Title}>
  <PasswordInput
    value={accessStore.stabilityApiKey}
    placeholder={Locale.Settings.Access.Stability.ApiKey.Placeholder}
    onChange={e => accessStore.update(a => a.stabilityApiKey = e.currentTarget.value)}
  />
</ListItem>

```

### 4. Environment Variable Configuration (Optional)

If you are deploying NextChat on a server, you can pre-configure these values using environment variables instead of the UI. Set `STABILITY_URL` and `STABILITY_API_KEY` in your environment. These are loaded in [`app/store/access.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/store/access.ts):

```typescript
// From app/store/access.ts
const DEFAULT_ACCESS_STATE = {
  // ...
  stabilityUrl: getClientConfig("STABILITY_URL"),
  stabilityApiKey: getClientConfig("STABILITY_API_KEY"),
  // ...
};

```

## Using the Stable Diffusion Interface

### Navigating to the /sd Page

Once configured, navigate to `/sd` in your NextChat instance (or click the "Stable Diffusion" menu item). This page uses the `useSdStore` defined in [`app/store/sd.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/store/sd.ts) to manage model selection, parameters, and submission state.

### Submitting Generation Tasks

On the `/sd` page, select a model (e.g., `stable-diffusion-xl-1024-v1-0`), adjust generation parameters such as width, height, and steps, then click **Generate**. The `sendTask` method in [`app/store/sd.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/store/sd.ts) constructs a `FormData` payload and POSTs it to the proxy endpoint:

```typescript
// From app/store/sd.ts – sendTask method
const headers = {
  Accept: "application/json",
  Authorization: bearerToken,
};

const path = `${prefix}/${Stability.GeneratePath}/${data.model}`;

const formData = new FormData();
for (const key in data.params) {
  formData.append(key, data.params[key]);
}

fetch(path, { method: "POST", headers, body: formData })
  .then(res => res.json())
  .then(handleResponse)
  .catch(handleError);

```

The `Stability.GeneratePath` constant points to `v2beta/stable-image/generate` as defined in [`app/constant.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/constant.ts).

## Technical Implementation Details

### Frontend Request Flow

The frontend does not send requests directly to Stability AI. Instead, it communicates with NextChat's internal API proxy. The path construction in [`app/store/sd.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/store/sd.ts) uses a prefix that defaults to `/api/stability` but can be customized via the endpoint configuration.

### Server-Side Proxy Mechanism

The actual communication with Stability AI happens in [`app/api/stability.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/api/stability.ts). This server-side route handles the incoming request from the frontend, injects the proper `Authorization: Bearer <key>` header using the API key from the access store or environment variable, and forwards the multipart request to the real Stability endpoint:

```typescript
// From app/api/stability.ts – handle() function
const fetchUrl = `${baseUrl}/${path}`;
const fetchOptions: RequestInit = {
  method: req.method,
  headers: {
    "Content-Type": req.headers.get("Content-Type") || "multipart/form-data",
    Accept: req.headers.get("Accept") || "application/json",
    Authorization: `Bearer ${key}`,
  },
  body: req.body,
  redirect: "manual",
  duplex: "half",
  signal: controller.signal,
};

const res = await fetch(fetchUrl, fetchOptions);
return new Response(res.body, {
  status: res.status,
  headers: newHeaders,
});

```

This proxy architecture ensures your API key remains secure on the server while allowing the frontend to generate images seamlessly.

## Summary

- **Select Stability Provider**: Change the provider to Stability in Settings → Access to unlock the configuration fields.
- **Configure Credentials**: Enter the Stability endpoint (`https://api.stability.ai`) and your `STABILITY_API_KEY` in the UI, or set `STABILITY_URL` and `STABILITY_API_KEY` as environment variables.
- **Access the Interface**: Navigate to `/sd` to open the Stable Diffusion generation page.
- **Understand the Flow**: Requests flow from [`app/store/sd.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/store/sd.ts) → [`app/api/stability.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/api/stability.ts) → Stability AI API, with the server proxy handling authentication securely.

## Frequently Asked Questions

### Do I need a local Stable Diffusion installation?

No. NextChat uses the **Stability AI cloud API**, not a local GPU instance. The generation happens on Stability's servers, and NextChat proxies the request through [`app/api/stability.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/api/stability.ts). You only need a valid Stability AI API key and internet access.

### What models are available through the Stability API?

The available models depend on Stability AI's current offerings, but NextChat typically supports models like `stable-diffusion-xl-1024-v1-0` and other SDXL variants. The model selection dropdown in the `/sd` interface populates based on the constants defined in [`app/constant.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/constant.ts) and the response from your configured endpoint.

### Why am I getting authentication errors?

Authentication errors usually indicate an invalid or missing `STABILITY_API_KEY`. Verify that you have entered the key in **Settings → Access** or set the `STABILITY_API_KEY` environment variable correctly. The server-side proxy in [`app/api/stability.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/api/stability.ts) injects this key as `Authorization: Bearer <key>`; if this header is missing or malformed, Stability AI will reject the request with a 401 or 403 error.

### Can I use a custom Stability endpoint?

Yes. While the default is `https://api.stability.ai`, you can configure a custom endpoint URL in the **Stability Endpoint** field in Settings. This is useful if you are using a reverse proxy or a compatibility layer. The custom URL is stored in `accessStore.stabilityUrl` and used by both the frontend store ([`app/store/sd.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/store/sd.ts)) and the server proxy ([`app/api/stability.ts`](https://github.com/ChatGPTNextWeb/NextChat/blob/main/app/api/stability.ts)) to route requests.