A lightweight, browser-based chat interface for interacting with various AI providers through their OpenAI-compatible APIs. GrokChat offers a clean, intuitive interface with support for multiple AI providers, local storage of chat history, and customizable settings.
- Quick Export Access: Export current chat directly from header with one click or from the History tab in Settings
- Multi-Provider Support: Connect to various AI services including Groq, OpenAI, Anthropic, Mistral, xAI, DeepSeek, Novita, Google Gemini (with reasoning efforts), OpenRouter, and local Ollama instances
- Local-First Architecture: All chat history and settings stored securely in your browser
- Progressive Web App (PWA): Installable for an app-like experience with basic offline access
- Customizable Experience:
- Manage multiple providers and API keys
- Configure model-specific parameters
- Adjust context window size
- Choose between light, dark, or system theme
- Save and manage multiple system prompts with dropdown selection
- Toggle streaming responses on a per-chat basis
- Manually add custom models to a provider
- Rich Content Rendering:
- Markdown support with syntax highlighting for code blocks
- Support for AI thinking process visualization
- Conversation Management:
- Create, rename, and delete chats
- Copy messages in markdown or plain text format
- Regenerate responses
- View technical details about responses
- Request Control: Ability to interrupt ongoing requests
- Responsive Design: Works on desktop and mobile devices
You have two options to use GrokChat:
Visit http://grokchat.pages.dev/ to use the application without installation.
-
Clone/Download this Repository:
git clone https://github.com/OleksiyM/grokchat.git cd grokchat -
Serve Locally: Use a simple HTTP server to run the application
- Using Python:
python -m http.server 8000 # or python3 -m http.server 8000 - Or use VS Code's Live Server extension
- Using Python:
-
Access the Application: Open
http://localhost:8000(or your server's address) in your browser
-
Configure AI Providers:
- Click the "⚙️ Settings" button in the bottom left
- Go to the "Providers & Models" tab
- Click "Add Provider"
- Enter provider details:
- Name (e.g., "Groq")
- Base URL (e.g.,
https://api.groq.com/openai/v1) - Your API Key
- Save the provider
-
Set Up Models:
- Click "Manage Models" for your provider
- Click "Update Models List from Provider" to fetch available models
- Select which models to make active/favorite
- Save your model configuration
- Click "+ New Chat" in the top left
- Select a provider and model from the dropdown menus at the bottom of the chat area
- Type your message and press Enter or click the send button
Click the sliders icon (⚙️) in the top right to access chat parameters:
- System Prompt (select from saved prompts or create new ones)
- Temperature
- Max Tokens
- Top P
- Reasoning Effort (for supported models, e.g., Google Gemini, Grok 3 mini: None, Low, Medium, High)
To manage system prompts:
- Go to Settings > System Prompts
- Click "Add New Prompt"
- Give it a name and enter your prompt text
- Save to make it available in the chat dropdown
- Delete Any Message: Click the trash icon next to any message to remove it from the chat history.
- Clear All History: Go to Settings > Chats tab > "Clear All History"
- Export Chat: Go to Settings > Chats tab > "Export Chat"
- Folder Management: Organize chats into custom folders (System 'Default' folder is protected)
- Go to Settings > Chats to manage folders
- Pinned Chats: Keep important chats easily accessible in dedicated section
- Archive: Hide inactive chats without deleting them
- Search: Find chats across all sections (Pinned, Folders, History, Archive)
- Context Menu: Click 3 dot menu on any chat for quick actions via menu
- Rename, Delete, Move to/from Folder, Pin/Unpin, Archive/Unarchive, Export
- In-place Message Editing: Click the edit icon next to a message to modify its content directly. Edited messages will be marked with an "edited" label.
- Regenerate Response: Click the regenerate icon next to a message
- Copy Message: Click the copy icon next to a message. Format options can be set in the Settings -> General:
- Markdown
- Plain Text
- Copy Current Chat: Quickly duplicate your current conversation with all messages and settings using the "Copy Chat" button in the chat header
- Unlimited Context: Enable in General Settings to bypass default context window limits (may increase API costs)
- Data Export/Import:
- Export/Import chat history (Settings > Chats tab)
- Export/Import application settings (Settings > General tab)
- Information about Response: Mouse hover over the info icon next to a message. You will see the technical details of the response.
Provider: <Provider name>
Model: <model name>
Duration: <mumber in seconds>
Prompt Tokens: <number>
Completion Tokens: <number>
Total Tokens: <number>
Speed (tokens/sec): <number>
API keys are stored in your browser's localStorage. While this keeps your keys on your device, be aware of the security implications:
- API keys are stored unencrypted
- They persist between sessions
- They could potentially be accessed by other scripts if there are security vulnerabilities
- Frontend: Pure JavaScript, HTML, CSS (no frameworks)
- Storage:
- IndexedDB for chat history
- localStorage for settings
- API Communication: Fetch API
- PWA Features: Service Worker & Web App Manifest
- Libraries:
- marked.js (Markdown rendering)
- DOMPurify (HTML sanitization)
- highlight.js (Code syntax highlighting)
- The application requires a modern browser with support for IndexedDB, Service Workers, and ES Modules
- OpenAI API compatibility is assumed for chat completions (
/v1/chat/completions) and model listing (/v1/models) - Current limitations:
- Streaming responses are supported and can be toggled per-chat
- Some formatting issues may occur with complex markdown
- Layout may have issues on certain devices (work in progress)
Contributions and bug reports are welcome via GitHub issues and pull requests.
MIT License
GrokChat - A lightweight chat interface for AI models