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

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 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.

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, the Stability endpoint and API key inputs only appear when accessStore.provider === ServiceProvider.Stability:

// 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.

// 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:

// 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 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 constructs a FormData payload and POSTs it to the proxy endpoint:

// 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.

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 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. 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:

// 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 → 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. 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 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 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) and the server proxy (app/api/stability.ts) to route requests.

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