This is a local, user-friendly web application that provides a graphical interface for chatting with xAI's latest models via their official API. Designed for a seamless experience, this tool allows for rich communication with Grok using a simple text interface, full Markdown-rendered streaming responses, and advanced image generation capabilities.
The frontend is built with HTML, CSS, and JavaScript, while the backend uses Node.js with Express to securely handle API requests and manage conversation context.
- Latest xAI Models: Support for the entire new lineup, including:
- Language:
grok-4.20-0309-reasoning,non-reasoning,multi-agent-0309, and fast variants. - Image:
grok-imagine-image-proandgrok-imagine-image.
- Language:
- Model Selection Dropdowns: Easily switch between language and image models with clean dropdown menus.
- Clear Chat: A dedicated button to wipe your local session history and start fresh instantly.
- Rich Streaming Response: AI responses stream directly into the chat bubbles in real-time with Markdown parsing.
- Smart UI Logic: Selecting an image model automatically resets the language model dropdown to prevent confusion.
- Dark Mode: Automatically follows your system's default theme or can be toggled manually.
- Persistent Context: Full conversation history is preserved during your session for context-aware responses.
- Node.js and npm: Version 18 or higher.
- xAI API Key: Sign up at xAI Console.
- Browser: Tested with Brave, Firefox, and Safari.
git clone https://github.com/Shawshank01/xAI-native.git
cd xAI-nativenpm installCreate a .env file in the root directory:
XAI_API_KEY=your_xai_api_key_hereRun the following command:
npm startThis command opens the UI in your default browser and starts the Node server in the foreground.
Simply press Ctrl + C in your terminal. This will safely stop the Node server.
If you get a 400 or Port in use error, it likely means a server process is stuck in the background. To clear it:
lsof -ti :3000 | xargs kill -9- Express — Backend server
- OpenAI SDK — Utilizes xAI's compatibility layer
- Marked — Markdown parsing