Skip to main content

​
Prerequisites

Before installing Screen Answerer, ensure you have the following:

Node.js

Version 14.x or higherDownload Node.js

npm

Included with Node.jsVerify: npm --version

Google Gemini API Key

Free tier availableGet API key

Modern browser

Chrome or Firefox recommendedFor screen capture support

​
Installation steps

1

Clone or download the repository

Get the Screen Answerer source code:
git clone <repository-url>
cd screen-answerer
2

Install dependencies

Install all required npm packages:
npm install
This will install:
  • express - Web server framework
  • @google/generative-ai - Google Gemini API client
  • cors - Cross-origin resource sharing
  • helmet - Security middleware
  • multer - File upload handling
  • dotenv - Environment variable management
  • express-rate-limit - API rate limiting
  • marked - Markdown parsing
Installation typically takes 1-2 minutes depending on your internet connection.
3

Configure environment (optional)

While Screen Answerer can run without environment variables (API keys are configured through the UI), you can optionally create a .env file:
.env
# Optional: Server port (defaults to 3000)
PORT=3000

# Optional: Pre-configure a Gemini API key
# Note: Users should configure this through the UI instead
# GEMINI_API_KEY=your_api_key_here
Never commit your .env file to version control. It’s already included in .gitignore.
4

Start the server

Launch the Screen Answerer server:
npm start
You should see output similar to:
Screen Answerer server running on port 3000
If port 3000 is already in use, the server automatically tries port 3001, then 3002, and so on.
5

Access the application

Open your browser and navigate to:
http://localhost:3000
You should see the Screen Answerer interface with a welcome screen prompting you to configure your API key.

​
Project structure

Understanding the codebase structure: 
screen-answerer/
├── server.js              # Express server and API endpoints
├── history.js             # File processing history management
├── package.json           # Dependencies and scripts
├── public/               # Frontend files
│   └── index.html        # Main application interface
└── uploads/              # Temporary image storage (auto-created)

​
Key files

server.js The main server file containing:
  • Express app configuration (server.js:10-13)
  • Security middleware setup (server.js:14-43)
  • API endpoints for question processing (server.js:274-474)
  • Screen monitoring endpoint (server.js:319-386)
  • Rate limiting logic (server.js:86-122)
history.js Manages file lifecycle to prevent race conditions:
  • Tracks files being processed (history.js:6-10)
  • Safely deletes temporary files (history.js:52-84)
  • Cleans up stale entries (history.js:87-100)
public/index.html Full-featured web interface with:
  • Settings modal with API key configuration
  • Screen monitoring controls
  • Theme switcher (dark/light mode)
  • Model selection slider
  • Real-time answer display

​
Configuration options

​
Server configuration

Modify these settings in server.js:
server.js
const PORT = process.env.PORT || 3000;  // Server port

​
Rate limiting

Adjust rate limits in server.js:46-101:
server.js
const RATE_LIMIT_WINDOW = 5000;          // 5 seconds between requests
const MAX_RETRIES = 3;                    // Maximum retry attempts
const INITIAL_RETRY_DELAY = 1000;        // Initial retry delay (ms)
const API_CALL_QUOTA_LIMIT = 50;         // Max calls per minute

​
File upload limits

Configure upload settings in server.js:76-80:
server.js
const upload = multer({ 
  storage: storage,
  fileFilter: fileFilter,
  limits: { fileSize: 5 * 1024 * 1024 }  // 5MB limit
});

​
Monitoring interval

Adjust screen capture frequency in public/index.html:994:
index.html
const MONITORING_INTERVAL = 5000;  // 5 seconds between captures

​
Security considerations

Screen Answerer includes several security features:

Helmet.js

Content Security Policy headers to prevent XSS attacksConfigured in server.js:18-29

CORS

Cross-origin resource sharing controlsConfigured in server.js:30-34

Rate limiting

Global and per-IP rate limits100 requests per 15 minutes

File validation

Image-only uploads with size limitsMax 5MB per file

​
Content Security Policy

The application enforces strict CSP headers:
server.js
app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", "'unsafe-inline'", "cdn.jsdelivr.net"],
      styleSrc: ["'self'", "'unsafe-inline'", "fonts.googleapis.com"],
      imgSrc: ["'self'", "data:", "blob:"],
      connectSrc: ["'self'", "https://generativelanguage.googleapis.com"],
    },
  },
}));

​
Supported browsers

Screen Answerer works best with modern browsers:
BrowserScreen MonitoringFile UploadNotes
Chrome✅ Excellent✅ YesRecommended
Firefox✅ Excellent✅ YesRecommended
Edge⚠️ Good✅ YesSome limitations
Safari⚠️ Limited✅ YesScreen capture may not work
Screen monitoring requires the getDisplayMedia API, which may not be available in all browsers or may require HTTPS in production.

​
Running in production

For production deployments:
1

Use a process manager

Keep the server running with PM2:
npm install -g pm2
pm2 start server.js --name screen-answerer
pm2 save
pm2 startup
2

Set up reverse proxy

Use Nginx to proxy requests:
nginx.conf
server {
  listen 80;
  server_name your-domain.com;

  location / {
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}
3

Enable HTTPS

Screen capture requires HTTPS in production. Use Let’s Encrypt:
sudo certbot --nginx -d your-domain.com
4

Configure environment

Set production environment variables:
export NODE_ENV=production
export PORT=3000

​
Troubleshooting installation

Common causes:
  • Outdated Node.js version
  • Network connectivity issues
  • Permission errors
Solutions:
# Update Node.js to latest LTS
nvm install --lts

# Clear npm cache
npm cache clean --force

# Install with verbose logging
npm install --verbose
Error: EADDRINUSE: address already in use :::3000Solutions:
# Find and kill the process
lsof -ti:3000 | xargs kill

# Or use a different port
PORT=3001 npm start
The server will automatically try the next port, but you may want to specify one manually.
Error: Cannot find module '@google/generative-ai'Solutions:
# Reinstall all dependencies
rm -rf node_modules package-lock.json
npm install
Error: EACCES: permission deniedSolutions:
# Fix npm permissions (Linux/Mac)
sudo chown -R $USER ~/.npm
sudo chown -R $USER node_modules

# Or use a Node version manager (recommended)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

​
Updating Screen Answerer

To update to the latest version: 
# Pull latest changes
git pull origin main

# Update dependencies
npm install

# Restart the server
npm start
Your API key configuration is stored in browser local storage, so it won’t be affected by updates.

​
Next steps

Quick start

Configure your API key and answer your first question

Configuration

Explore advanced configuration options

Build docs developers (and LLMs) love

Get started for freeTalk to us