$ show ChatGPTNextWeb/NextChat
NextChat is a production-grade, multi-provider AI chat client built as a Next.js web application with an optional Tauri desktop wrapper. It supports 15+ LLM providers (OpenAI, Anthropic, Google, Baidu, DeepSeek, etc.) through a unified API abstraction layer, and provides a rich chat interface with streaming responses, markdown rendering, code folding, image upload, TTS, real-time voice chat, and Stable Diffusion image generation. The application is designed for self-hosting (Docker, Vercel, manual) and emphasizes privacy by storing all chat data locally in IndexedDB/localStorage, with optional cloud sync via WebDAV or UpStash Redis. Architecturally, NextChat is a monolith with client-side state management using Zustand (with IndexedDB persistence), serverless API routes for proxying LLM requests, and a React component library. It includes a plugin system for OpenAPI-based function calling, MCP (Model Context Protocol) integration for external tool execution, and a prompt/mask system for reusable system instructions. The codebase is well-structured with reusable patterns like generic store factories, UI components, and streaming utilities, though it exhibits significant duplication across provider integrations and some features (e.g., Tencent, SD) appear less maintained.
The LLM identified 5 files worth highlighting for reuse:
A generic Zustand store factory (`createPersistStore`) that wraps Zustand's persist middleware with IndexedDB storage, migration support, and a consistent API. It is self-contained, reusable in any React project needing persistent state, and demonstrates non-obvious skill in handling store versioning and async storage.
A versatile `IconButton` component that renders a button with an icon, optional text, and configurable type (primary, danger, etc.). It is isolated, themable via CSS modules, and can be extracted into any React project for consistent button UI.
A React error boundary component (`ErrorBoundary`) that catches rendering errors and provides options to clear data or save state. It is self-contained, uses React's error boundary API correctly, and is reusable in any React application needing graceful error handling.
A message selection component that supports shift-range selection, search filtering, and multi-select with visual feedback. It is isolated, uses only React state and props, and demonstrates a clean pattern for list selection that can be adapted to other contexts.
Core streaming utilities (`stream`, `streamWithThink`) that parse Server-Sent Events (SSE) from LLM APIs, handle tool calls, and animate response text. They are self-contained, use async generators, and can be reused in any project needing to consume streaming LLM responses with thinking mode support.