A React-based chat application that integrates with the Grok AI model through x.ai's API.
- Real-time chat interface with Grok AI
- Multiple chat sessions support with titles based on first message
- Persistent chat history using localStorage
- Markdown support in messages with code block highlighting
- Responsive design with styled-components
- Dark/Light theme toggle
- Mobile-friendly sidebar navigation
- Settings management for API key configuration
- Message editing with version history
- Copy message content to clipboard
- Export chat history to JSON
- Alternative timeline responses after message edits
- Version navigation for edited messages
Before running this application, you'll need:
- Node.js (v18 or higher)
- npm or yarn
- A valid API key from x.ai (Grok)
- Clone the repository
- Create a
.envfile in the root directory - Add your x.ai API key:
REACT_APP_GROK_API_KEY=your_api_key_here
Alternatively, you can set your API key through the settings interface in the app.
In the project directory, run:
In the project directory, you can run:
Runs the app in development mode.
Open http://localhost:3000 to view it in your browser.
Launches the test runner in interactive watch mode.
Builds the app for production to the build folder.
The build is minified and optimized for best performance.
- Chat Management: Create, switch between, and delete chat sessions
- Persistent Storage: Chat history is saved in localStorage
- Responsive Design: Works on both desktop and mobile devices
- Theme Support: Toggle between light and dark themes
- API Key Management: Set and update your x.ai API key through the settings interface
- Markdown Support: Rich text formatting and code syntax highlighting
- Message Management:
- Edit your messages with full version history
- Navigate through different versions of edited messages
- Copy message content to clipboard
- View alternative timeline responses after edits
- Data Export: Export your entire chat history as JSON