https://github.com/brettdavies/lmgroktfy
Let Me Grok That For You is a modern, accessible web interface for Grok AI that supports multiple languages, offers keyboard navigation, screen reader compatibility, and responsive design for all devices.
https://github.com/brettdavies/lmgroktfy
answer-bot aria gauntletai grok grokking keyboard-shortcuts screen-reader xai
Last synced: 8 months ago
JSON representation
Let Me Grok That For You is a modern, accessible web interface for Grok AI that supports multiple languages, offers keyboard navigation, screen reader compatibility, and responsive design for all devices.
- Host: GitHub
- URL: https://github.com/brettdavies/lmgroktfy
- Owner: brettdavies
- Created: 2025-02-20T06:26:13.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-16T01:39:16.000Z (about 1 year ago)
- Last Synced: 2025-04-16T02:35:59.303Z (about 1 year ago)
- Topics: answer-bot, aria, gauntletai, grok, grokking, keyboard-shortcuts, screen-reader, xai
- Language: JavaScript
- Homepage: https://lmgroktfy.com/
- Size: 295 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# LMGROKTFY (Let Me GROK That For You)
A simple, accessible web application that allows users to submit questions to the Grok AI and share the answers.
## Features
- Submit questions to Grok AI and view responses
- Copy answers or question-answer pairs for sharing
- Share links directly to specific questions and answers
- Toggle between light and dark themes
- Fully accessible interface with keyboard navigation and screen reader support
## Accessibility Features
### ARIA Live Regions
- Dynamic content updates are announced to screen readers
- Loading states use `aria-live="polite"` to inform users of progress
- Toast notifications use `aria-live="assertive"` for important updates
### Keyboard Navigation
- Full keyboard navigation throughout the application
- Focus management for modal dialogs
- Focus trapping within modals for improved usability
- Automatic focus on interactive elements in the response area
### Keyboard Shortcuts
#### General
- `/` or `?` - Focus the search input
- `h` - Open the help modal
- `t` - Toggle between light and dark themes
- `Esc` - Close any open modal
#### When Answer is Displayed
- `c` - Copy the answer
- `q` - Copy the question and answer
- `s` - Copy the share link
- `g` - Continue on Grok
## Development
### Setup
1. Clone the repository
2. Install dependencies: `npm install`
3. Configure the API endpoint (see below)
4. Start the development server: `npm run serve`
### API Configuration
For development with the team's API endpoint:
1. Create a `config.local.json` file in the project root (this file is gitignored)
2. Add the following content, replacing the example URL with the actual development API endpoint:
```json
{
"apiBaseUrl": "https://development-api-domain.com",
"debugMode": true
}
```
3. The application will automatically use this API endpoint when running locally
4. In production, the application uses relative URLs by default (`/api/grok`)
> **Note**: The development API endpoint is confidential and should not be committed to the repository or shared publicly. Contact a team member to get the correct endpoint URL.
#### CORS Requirements
When working with the development API:
- **HTTPS is required**: The API endpoint must use HTTPS to avoid mixed-content issues
- **CORS support**: The API server must allow cross-origin requests from your local development server
- **Troubleshooting**: If you encounter CORS errors, ensure the API server includes the following headers in its responses:
```
Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Headers: Content-Type
```
### Testing
- Run unit tests: `npm test`
- Run end-to-end tests: `npm run test:e2e`
## Deployment
This project is deployed using Cloudflare Pages, which automatically minifies all assets for production.
### Deployment Process
1. Development is done on the `development` branch with unminified code for easier debugging
2. When code is pushed to either the `development` or `main` branch, Cloudflare Pages:
- Runs the build script located at `cloudflare/build.sh`
- Minifies all JavaScript, CSS, and HTML files
- Deploys the minified code to Cloudflare's global CDN
### Cloudflare Pages Configuration
The Cloudflare Pages configuration is documented in `cloudflare/cloudflare-pages.json` and includes:
- Build command: `bash cloudflare/build.sh`
- Output directory: `dist`
- Environment variables for both production and preview deployments
For more details on the deployment configuration, see the [Cloudflare Pages documentation](cloudflare/README.md).
### Local Testing of Production Build
To test the minified production build locally:
```bash
# Run the build script
bash cloudflare/build.sh
# Serve the dist directory to preview the minified site
npx http-server dist
```