How Environment Variables Configure Providers in NextChat: A Complete Guide
NextChat reads all provider-specific settings from process.env at startup through the getServerSideConfig() function in app/config/server.ts, which builds a configuration object containing API keys, endpoints, and boolean flags that downstream API routes use to instantiate the correct LLM client.
The ChatGPTNextWeb/NextChat repository uses a centralized environment-based configuration system to manage multiple LLM providers without code changes. By setting variables in your .env file or hosting platform, you control which providers are active, their API credentials, and endpoint URLs. This approach separates secrets from source code and enables rapid provider switching through simple configuration updates.
The Central Configuration Hub (app/config/server.ts)
The app/config/server.ts file exports getServerSideConfig(), the single source of truth for all provider settings. This function runs once at server startup, reading process.env to construct a plain object containing flags and resolved credentials for every supported LLM provider.
// app/config/server.ts – simplified structure
export const getServerSideConfig = () => {
const isAzure = !!process.env.AZURE_URL;
const isGoogle = !!process.env.GOOGLE_API_KEY;
const isAnthropic = !!process.env.ANTHROPIC_API_KEY;
return {
// OpenAI
apiKey: getApiKey(process.env.OPENAI_API_KEY),
openaiOrgId: process.env.OPENAI_ORG_ID,
// Azure OpenAI
isAzure,
azureUrl: process.env.AZURE_URL,
azureApiKey: getApiKey(process.env.AZURE_API_KEY),
azureApiVersion: process.env.AZURE_API_VERSION,
// Google Gemini
isGoogle,
googleApiKey: process.env.GOOGLE_API_KEY,
googleUrl: process.env.GOOGLE_URL,
// Anthropic Claude
isAnthropic,
anthropicApiKey: getApiKey(process.env.ANTHROPIC_API_KEY),
anthropicApiVersion: process.env.ANTHROPIC_API_VERSION,
anthropicUrl: process.env.ANTHROPIC_URL,
// Additional providers: Baidu, ByteDance, Alibaba, Tencent, Moonshot,
// iFlytek, DeepSeek, XAI, ChatGLM, SiliconFlow, 302.AI, Stability, etc.
};
};
The helper function getApiKey handles comma-separated key lists by selecting one at random, enabling built-in load balancing across multiple credentials.
Supported Providers and Their Environment Variables
NextChat supports 15+ providers through dedicated environment variables defined in .env.template. Each provider requires specific variables to activate and authenticate:
- OpenAI:
OPENAI_API_KEY(required),OPENAI_ORG_ID(optional) - Azure OpenAI:
AZURE_URL,AZURE_API_KEY,AZURE_API_VERSION - Google Gemini:
GOOGLE_API_KEY,GOOGLE_URL(optional custom endpoint) - Anthropic Claude:
ANTHROPIC_API_KEY,ANTHROPIC_VERSION,ANTHROPIC_URL - Baidu:
BAIDU_API_KEY,BAIDU_SECRET_KEY,BAIDU_URL - Alibaba:
ALIBABA_API_KEY,ALIBABA_URL - Tencent:
TENCENT_API_KEY,TENCENT_URL - ByteDance:
BYTEDANCE_API_KEY,BYTEDANCE_URL - Moonshot:
MOONSHOT_API_KEY,MOONSHOT_URL - DeepSeek:
DEEPSEEK_API_KEY,DEEPSEEK_URL - XAI (Grok):
XAI_API_KEY,XAI_URL - SiliconFlow:
SILICONFLOW_API_KEY,SILICONFLOW_URL
Boolean flags like isAzure or isGoogle are derived from the presence of these variables, determining which provider implementations load at runtime.
Runtime Configuration Flow
The environment variable resolution follows a strict four-step lifecycle:
- Server Initialization:
getServerSideConfig()executes once, parsing process.env and caching the resulting configuration object. - Provider Detection: Boolean flags (e.g.,
isAzure,isGoogle) signal which providers are active based on variable presence. - Request Routing: API routes like
app/api/openai.tsimport the cached config and instantiate the appropriate client using the resolved keys and URLs. - Client Hydration: The same configuration propagates to the browser via
app/config/client.ts, enabling UI components to display available providers.
Each provider module follows this pattern to consume the shared configuration:
// app/api/openai.ts
import { getServerSideConfig } from "@/app/config/server";
const config = getServerSideConfig();
export async function POST(req: Request) {
const body = await req.json();
const client = new OpenAI({
baseURL: config.isAzure ? config.azureUrl : config.baseUrl,
apiKey: config.isAzure ? config.azureApiKey : config.apiKey,
organization: config.openaiOrgId,
});
return client.chat.completions.create(body);
}
Practical Configuration Examples
Minimal OpenAI and Google Setup
Enable basic functionality with two providers by creating a .env file:
OPENAI_API_KEY=sk-your-openai-key
GOOGLE_API_KEY=your-google-gemini-key
GOOGLE_URL=https://generativelanguage.googleapis.com/
Azure OpenAI Configuration
Switch the OpenAI route to use Azure endpoints by setting Azure-specific variables:
AZURE_URL=https://my-resource.openai.azure.com/openai/deployments/gpt-4
AZURE_API_KEY=your-azure-key
AZURE_API_VERSION=2024-02-01
When AZURE_URL is present, isAzure becomes true and app/api/openai.ts automatically routes requests to the Azure endpoint instead of the standard OpenAI API.
Load Balancing with Multiple Keys
Provide comma-separated keys for random rotation across multiple accounts:
OPENAI_API_KEY=sk-key-1,sk-key-2,sk-key-3
The getApiKey utility selects one key randomly per request, distributing load across credentials without additional infrastructure.
Accessing Configuration on the Client Side
Expose provider availability to the UI using the client configuration helper:
import { getClientConfig } from '@/app/config/client';
export default function ProviderInfo() {
const cfg = getClientConfig();
return (
<ul>
<li>OpenAI: {cfg.apiKey ? '✅' : '❌'}</li>
<li>Azure: {cfg.isAzure ? '✅' : '❌'}</li>
<li>Google: {cfg.isGoogle ? '✅' : '❌'}</li>
</ul>
);
}
The client receives the same boolean flags computed server-side, ensuring the UI accurately reflects backend capabilities.
Summary
- Centralized Configuration: The
getServerSideConfig()function inapp/config/server.tsaggregates all provider settings from process.env into a single object consumed throughout the application. - Boolean Provider Flags: Variables like
isAzure,isGoogle, andisAnthropicare derived from environment variable presence, determining which LLM clients instantiate at runtime. - Multi-Key Support: The
getApiKeyhelper enables comma-separated API keys for built-in load balancing and redundancy. - Template Reference:
.env.templatecontains the complete inventory of supported variables for all 15+ providers including OpenAI, Azure, Google, Anthropic, and regional services like Baidu and Moonshot. - Isomorphic Config: Server-side configuration propagates to the client via
app/config/client.ts, keeping the UI synchronized with backend provider availability.
Frequently Asked Questions
What is the difference between server and client configuration in NextChat?
The server configuration in app/config/server.ts contains sensitive data like API keys and endpoint URLs, while app/config/client.ts exposes only non-sensitive boolean flags (e.g., isAzure, isGoogle) to the browser. This separation ensures secrets never leak to the client while allowing the UI to show which providers are available.
How does NextChat handle multiple API keys for the same provider?
When you provide comma-separated values in an environment variable like OPENAI_API_KEY=key1,key2,key3, the internal getApiKey function randomly selects one key for each request. This implements client-side load balancing across multiple accounts or rate limits without requiring a separate proxy.
Can I use custom base URLs for providers other than Azure?
Yes. Most providers support an optional *_URL variable (e.g., GOOGLE_URL, ANTHROPIC_URL, DEEPSEEK_URL) that overrides the default endpoint. This enables compatibility with proxy services, private deployments, or regional API gateways while maintaining the same authentication logic.
Where do I find the complete list of supported environment variables?
The repository maintains a comprehensive reference in .env.template at the root level. This file documents every supported variable across all providers including optional parameters like OPENAI_ORG_ID, version strings for Azure and Anthropic, and region-specific keys for Baidu, ByteDance, and Alibaba services.
Have a question about this repo?
These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:
curl -s "https://instagit.com/install.md" Maintain an open-source project? Get it listed too →