feat(chatbot): integrate OpenRouter API for AI assistance in dashboard
- Added a Chatbot component to the dashboard for user interaction and support. - Created a README for the Chatbot detailing setup, features, and usage instructions. - Introduced environment variables for secure API key management. - Updated app.js to include the Chatbot component. - Implemented a configuration server to serve API keys securely. - Enhanced styles for the Chatbot interface to improve user experience.
This commit is contained in:
130
dashboard/CHATBOT_README.md
Normal file
130
dashboard/CHATBOT_README.md
Normal file
@@ -0,0 +1,130 @@
|
||||
# CityPulse Dashboard Chatbot
|
||||
|
||||
This dashboard includes an AI-powered chatbot that uses OpenRouter's API to provide assistance with dashboard features and city reporting questions.
|
||||
|
||||
## Features
|
||||
|
||||
- **AI Assistant**: Powered by x-ai/grok-4-fast:free model via OpenRouter
|
||||
- **Interactive Chat**: Real-time conversation with typing indicators
|
||||
- **Quick Actions**: Pre-defined questions for common help topics
|
||||
- **Mobile Responsive**: Works on desktop and mobile devices
|
||||
- **Context Aware**: Understands CityPulse dashboard functionality
|
||||
- **Secure API Key Management**: No hardcoded API keys in frontend code
|
||||
|
||||
## Setup
|
||||
|
||||
### 1. **Environment Variables**
|
||||
Create a `.env` file in the dashboard directory:
|
||||
```env
|
||||
OPENROUTER_API_KEY=your_api_key_here
|
||||
OPENROUTER_BASE_URL=https://openrouter.ai/api/v1
|
||||
OPENROUTER_MODEL=x-ai/grok-4-fast:free
|
||||
```
|
||||
|
||||
### 2. **Get API Key**
|
||||
Sign up at [OpenRouter](https://openrouter.ai/) to get your free API key.
|
||||
|
||||
### 3. **Install Dependencies**
|
||||
```bash
|
||||
cd dashboard
|
||||
npm install
|
||||
```
|
||||
|
||||
### 4. **Setup API Key (Development)**
|
||||
```bash
|
||||
npm run setup
|
||||
```
|
||||
This script safely injects your API key from the `.env` file into the frontend code.
|
||||
|
||||
### 5. **Start Development Server**
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
Or manually:
|
||||
```bash
|
||||
npm run setup && python -m http.server 3000
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
- Click the floating chat button (💬) in the bottom-right corner to open the chatbot
|
||||
- Type your questions or use the quick action buttons for common queries
|
||||
- The chatbot can help with:
|
||||
- Dashboard navigation and features
|
||||
- Understanding report statuses and categories
|
||||
- General questions about city reporting
|
||||
- Troubleshooting dashboard issues
|
||||
|
||||
## Quick Actions Available
|
||||
|
||||
- **Dashboard Help**: How to use dashboard filters
|
||||
- **Report Status**: What different report statuses mean
|
||||
- **Categories**: Types of city issues that can be reported
|
||||
- **Navigation**: How to navigate to specific locations on the map
|
||||
|
||||
## Security Features
|
||||
|
||||
### 🔒 **No Hardcoded API Keys**
|
||||
- API keys are never hardcoded in the frontend JavaScript
|
||||
- Keys are loaded from environment variables at runtime
|
||||
- Build-time replacement ensures keys aren't exposed in source code
|
||||
|
||||
### 🛡️ **Development vs Production**
|
||||
- **Development**: Uses environment variables with build-time replacement
|
||||
- **Production**: Should use a secure backend endpoint to serve configuration
|
||||
|
||||
### 🔧 **Backend Configuration Server (Optional)**
|
||||
For enhanced security, you can run the included Python server:
|
||||
```bash
|
||||
pip install flask flask-cors python-dotenv
|
||||
python server.py
|
||||
```
|
||||
This serves configuration from `http://localhost:3001/api/chatbot-config`
|
||||
|
||||
## Technical Details
|
||||
|
||||
- Built with React and modern JavaScript
|
||||
- Uses OpenRouter API for AI responses
|
||||
- Styled to match the CityPulse dashboard theme
|
||||
- Includes error handling and loading states
|
||||
- Mobile-responsive design
|
||||
- Secure API key management
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
dashboard/
|
||||
├── .env # Environment variables (create this)
|
||||
├── Chatbot.js # Main chatbot component
|
||||
├── app.js # Dashboard application
|
||||
├── index.html # Main HTML file
|
||||
├── styles.css # Styling
|
||||
├── server.py # Optional backend config server
|
||||
├── replace-env-vars.js # Development API key injection
|
||||
├── package.json # Node.js dependencies
|
||||
└── requirements.txt # Python dependencies
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
If the chatbot isn't working:
|
||||
|
||||
1. **Check API Key**: Ensure your OpenRouter API key is valid and has credits
|
||||
2. **Environment Setup**: Make sure `.env` file exists with correct variables
|
||||
3. **Run Setup**: Execute `npm run setup` to inject the API key
|
||||
4. **Check Console**: Look for error messages in browser developer tools
|
||||
5. **Network Check**: Verify internet connection for API calls
|
||||
|
||||
### Common Issues
|
||||
|
||||
- **"API key not configured"**: Run `npm run setup` to inject the key
|
||||
- **CORS errors**: Make sure the server is running from the correct directory
|
||||
- **404 errors**: Check that all files are in the dashboard directory
|
||||
|
||||
## Security Best Practices
|
||||
|
||||
1. **Never commit API keys** to version control
|
||||
2. **Use environment variables** for all sensitive configuration
|
||||
3. **Consider backend services** for production deployments
|
||||
4. **Rotate API keys** regularly
|
||||
5. **Monitor API usage** on OpenRouter dashboard
|
||||
Reference in New Issue
Block a user