gpt-4-chat-ui is a Next.js 14 and TypeScript starter template for a multi-model AI chat interface that routes conversations to OpenAI, Anthropic Claude, Google Gemini, and local Ollama models from a single dark-themed UI.
What is gpt-4-chat-ui?
gpt-4-chat-ui is an open-source web template (MIT license) that provides a ready-to-run chat frontend and backend API routes. It takes a provider name, model ID, and message history as input, sends them to the chosen provider's SDK, and returns a unified chat response. The template is built for Next.js 14 with API routes under pages/api, so it deploys anywhere Next.js runs, and the repository is maintained by GitHub user hillis.
It uses React Markdown to render responses with GitHub-flavored markdown, includes Material UI for its loading spinner, and keeps all provider credentials in .env.local environment variables.
Key Features
- Multi-provider support — Switch between OpenAI, Anthropic Claude, Google Gemini, and Ollama from a dropdown; available providers are auto-detected based on which API keys are set.
- Auto-detection of configured providers — The UI calls GET /api/providers on load and only lists models for providers with valid environment variables, so unused integration keys are never exposed in the interface.
- Model lineup — Ships with OpenAI GPT-5.2, GPT-5 Mini, GPT-5 Nano, GPT-4o, GPT-4o Mini, o3-mini; Anthropic Claude Opus 4.6, Sonnet 4.5, Haiku 4.5; Google Gemini 2.5 Pro/Flash/Flash-Lite and 2.0 Flash; plus any Ollama model (llama3.3, mistral, phi4) via OLLAMA_BASE_URL.
- Security hardening — Validates message type, length (max 4000 chars) and count (max 50); rate-limits 20 requests per minute per IP; sanitizes roles to user/assistant; validates provider/model against allowlists; sets security headers and disables X-Powered-By.
- Markdown rendering — AI responses render full GitHub-flavored markdown including code blocks, tables, lists, and links through React Markdown.
- Dark responsive UI — A clean dark theme with mobile support, built with plain CSS modules (Home.module.css, globals.css) and a Material UI spinner.
- Extensible provider architecture — Adding a new provider means writing one factory function in lib/providers.ts, registering it in providerFactories, and adding its name to ALLOWED_PROVIDER_NAMES in pages/api/chat.ts.
Who is it for?
- Full-stack developers who want a production-ready chat UI skeleton to customize without building auth, rate limiting, and provider integrations from scratch.
- AI and LLM enthusiasts who want to compare outputs from OpenAI, Anthropic, and Gemini side by side in one interface.
- Privacy-conscious users who want to use local models via Ollama (llama3.3, mistral, phi4) through a web UI instead of a terminal.
- Indie hackers building a ChatGPT-like product who need a deployable baseline on Vercel, Railway, or Render.
What can you do with gpt-4-chat-ui?
- Run a personal AI assistant: Set one or more API keys, run npm run dev, and start chatting at http://localhost:3000.
- A/B test model responses: Because the frontend sends provider and model with every request, you can switch models mid-conversation and compare answer quality.
- Build a model-agnostic product demo: Use the existing API routes and provider router to prototype a BYOK (bring-your-own-key) AI app that supports multiple vendors.
- Extend to a new AI provider: Use the documented factory pattern in lib/providers.ts to add any new provider in a few minutes.
How does gpt-4-chat-ui work?
On page load, the frontend calls GET /api/providers to discover which providers are configured, then POSTs user messages to /api/chat as provider, model, and messages. The API route validates the request, rate-limits the IP, and routes to the matching SDK (OpenAI, Anthropic, Google GenAI, or a direct fetch to Ollama). The response comes back as role/content and is rendered as markdown.
Setup takes five steps: clone the repo, npm install, create .env.local with any combination of OPENAI_API_KEY, ANTHROPIC_API_KEY, GOOGLE_AI_API_KEY, and OLLAMA_BASE_URL, run npm run dev, and open localhost:3000. Node.js 18 or later is required.
FAQ
Is gpt-4-chat-ui free?
Yes. The project is licensed under the MIT License and source is available on GitHub. You only pay for the API usage of the providers you connect (OpenAI, Anthropic, Google), or nothing if you use local Ollama models.
Which models are included in the dropdown?
The template ships with GPT-5.2, GPT-5 Mini, GPT-5 Nano, GPT-4o, GPT-4o Mini and o3-mini for OpenAI; Claude Opus 4.6, Sonnet 4.5, and Haiku 4.5 for Anthropic; Gemini 2.5 Pro, 2.5 Flash, 2.5 Flash-Lite, and 2.0 Flash for Google; plus any Ollama model you set in OLLAMA_MODELS.
Do I need API keys for all providers?
No. The UI auto-detects only the providers you have configured. Set any combination of OPENAI_API_KEY, ANTHROPIC_API_KEY, GOOGLE_AI_API_KEY, or OLLAMA_BASE_URL in .env.local.
How do I add a new provider?
Write a factory function in lib/providers.ts that returns a ProviderConfig with provider name, model list, and a chat function; add it to providerFactories; and add its name to ALLOWED_PROVIDER_NAMES in pages/api/chat.ts. No other files need changes.
Where can I deploy this template?
Any platform that supports Next.js, including Vercel with zero-config deployment, Railway, Render, or Docker via npm run build and npm start.
