ChatAny

Provides a single web UI that routes chat requests to multiple LLM providers (OpenAI GPT-3.5/4/4o, Google Gemini, Anthropic Claude) via direct API integration. The system maintains provider-agnostic conversation state and handles context window management across models with different token limits (4K-128K range). Built on ChatGPT-Next-Web foundation with extended provider registry in app/constant.ts, enabling seamless provider switching within a conversation thread.

Integrates StabilityAI's image generation API supporting three distinct model families: Stable Image Ultra (highest quality), Stable Image Core (balanced), and Stable Diffusion 3 (latest architecture). Handles text-to-image generation with configurable parameters (resolution, steps, guidance scale) and manages API response streaming for real-time image display. Direct API integration via environment variable configuration (STABILITY_API_KEY) with request/response marshaling for image binary data.

Implements a provider registry architecture that decouples AI service implementations from the core UI. Each provider (OpenAI, StabilityAI, Midjourney, etc.) is registered as a module with standardized interface: request builder, response parser, and error handler. New providers can be added by creating a new provider module and registering it in the provider registry without modifying core chat logic. Provider selection is UI-driven via dropdown or configuration. Each provider maintains its own API client, authentication, and request/response handling.

Provides a responsive React-based UI that adapts to desktop, tablet, and mobile viewports using CSS media queries and flexible layouts. Chat interface includes message bubbles, input field, send button, and provider/model selector. Mobile optimizations include: touch-friendly button sizing (48px minimum), viewport-aware text sizing, and bottom-sheet-style modals for settings. Uses CSS-in-JS or Tailwind CSS for responsive styling. Supports both light and dark themes with system preference detection.

Implements server-sent events (SSE) or chunked HTTP response handling to display LLM responses as they stream from the API. Each token or chunk is parsed and appended to the message UI in real-time, creating a typewriter effect. Handles stream errors and incomplete responses gracefully. Maintains scroll position at bottom of chat as new tokens arrive. Supports cancellation of in-progress streams via AbortController. Works with OpenAI streaming API and compatible endpoints that support chunked responses.

Integrates Midjourney image generation through a proxy API layer (MJ_PROXY_URL, MJ_PROXY_KEY) that abstracts Midjourney's Discord-based interface. Supports multiple operations: Imagine (text-to-image), Upscale, Variation, Zoom, Pan, and other Midjourney-native commands. Implements real-time progress tracking and image display by polling proxy API for job status and retrieving generated image URLs. Proxy pattern decouples the web UI from Midjourney's native Discord API, enabling web-based access without bot management.

Manages conversation history and context state using a provider-agnostic data model that persists in browser localStorage. Tracks message metadata (provider used, model selected, timestamp, token count estimates) and handles context window constraints by maintaining separate conversation threads per provider. State updates are synchronous with UI rendering, enabling instant provider switching. Built on React state management patterns with localStorage serialization for persistence across browser sessions.

Provides UI localization across multiple languages (English, Chinese, Japanese, etc.) using a key-based translation system. Language selection is stored in localStorage and applied dynamically without page reload. Translation keys are centralized in language files with fallback to English if translations are missing. Supports both UI text and dynamic content (error messages, API responses) through a translation context provider pattern.

Packages ChatAny as a Docker image with multi-stage build optimization for reduced image size. Configuration is entirely environment variable-driven (OPENAI_API_KEY, BASE_URL, MJ_PROXY_URL, CODE, etc.), enabling deployment without code changes. Docker Compose support for local development with service orchestration. Image includes Node.js runtime and production-optimized build artifacts. Supports both development (with hot reload) and production (minified, optimized) build modes.

Provides pre-configured deployment templates for Vercel, Railway, and Sealos that automate environment setup and API key configuration through web forms. Deployment process: user clicks deploy button → platform prompts for API keys → application is automatically built and deployed with zero manual configuration. Each platform template includes platform-specific optimizations (Vercel serverless functions, Railway container runtime, Sealos Kubernetes). Deployment status and logs are accessible through platform dashboards.

Supports routing API requests to custom OpenAI-compatible endpoints via BASE_URL environment variable, enabling use of proxy services, local LLM servers (Ollama, vLLM), or alternative API providers (Azure OpenAI, Together AI). Request/response format remains OpenAI-compatible, allowing seamless provider substitution without code changes. Implements HTTP client abstraction that handles endpoint URL construction, authentication header injection, and response parsing for any OpenAI-compatible API.

Implements optional password protection for the web UI via CODE environment variable. When CODE is set, users must enter the password before accessing the application. Password validation occurs client-side on initial page load and is stored in sessionStorage for the duration of the browser session. No server-side session management required. Provides basic access control without authentication infrastructure.

Implements polling-based progress tracking for asynchronous image generation operations (Midjourney, StabilityAI). Client polls the proxy/API endpoint at regular intervals (typically 1-2 seconds) to fetch job status and retrieve generated image URLs once complete. Progress state is maintained in React component state and updated on each poll response. UI displays progress indicators (percentage, status text) and renders images immediately upon completion. Polling continues until job reaches terminal state (completed, failed, or cancelled).