# AskBox AI

AskBox AI is a lightweight, no-login AI FAQ chatbot widget generator for small business websites. It is inspired by AI support widget tools, but uses original branding, copy, and UI.

Users paste website or FAQ content, test a bot instantly, choose a theme color, and copy a small embed script. The v1 app has no database and stores temporary configuration in `localStorage`, making it best suited for demos, prototypes, and simple static deployments.

## Features

- Plain HTML, CSS, and JavaScript frontend
- Cloudflare Pages-ready static files
- Cloudflare Worker API at `/api/chat`
- OpenAI-compatible Chat Completions request from the Worker only
- `MODEL_API_KEY` read from Worker environment variables
- No registration and no database for v1
- Lightweight framework-free `widget.js`
- Basic source snippet extraction from pasted knowledge
- Comments for future Cloudflare rate limiting and KV-based publishing

## Files

- `index.html` - marketing page, builder UI, live chat preview, and embed section
- `style.css` - responsive premium SaaS styling
- `app.js` - localStorage config, preview chat behavior, and embed generation
- `widget.js` - embeddable floating chat widget
- `worker.js` - Cloudflare Worker API for `/api/chat`
- `.env.example` - example environment variables

## Local preview

Because this is a static app, you can build and preview the frontend with any local static server:

```bash
npm run build
python3 -m http.server 8788 --directory dist
```

Open `http://localhost:8788`.

The chat preview calls `/api/chat`, so full chat responses require deploying or locally running the Worker.

## Cloudflare deployment

### 1. Install Wrangler

```bash
npm install wrangler --save-dev
```

Or install it globally if you prefer:

```bash
npm install -g wrangler
```

### 2. Set Worker secrets

Never put real API keys in frontend code or commit them to Git.

```bash
npx wrangler secret put MODEL_API_KEY
```

Optional OpenAI-compatible provider settings:

```bash
npx wrangler secret put MODEL_API_URL
npx wrangler secret put MODEL_NAME
```

If omitted, the Worker uses `https://api.openai.com/v1/chat/completions` and `gpt-4o-mini`.

### 3. Deploy the Worker

Create a `wrangler.toml` or configure the Worker in the Cloudflare dashboard so `worker.js` handles `/api/chat` for the same domain as your Pages site.

Example `wrangler.toml`:

```toml
name = "askbox-ai-api"
main = "worker.js"
compatibility_date = "2026-06-20"

[vars]
MODEL_NAME = "gpt-4o-mini"
```

Deploy:

```bash
npx wrangler deploy
```

### 4. Deploy Cloudflare Pages

In Cloudflare Pages:

1. Connect this repository.
2. Set the build command to `npm run build`.
3. Set the build output directory to `dist`.
4. Leave the root directory empty unless your repository is in a subfolder.
5. Deploy.
6. Add a Pages Function route or Worker route so `/api/chat` reaches the Worker.

The included `package.json` exists specifically so Cloudflare Pages can run `npm run build` and publish the static files from `dist`.

## Embed script

The builder generates a snippet like:

```html
<script src="https://YOUR_DOMAIN/widget.js" data-bot-name="AskBox Assistant" data-theme="#635bff"></script>
```

For v1, the no-database embed uses inline/local configuration and is best for demos. A production version should publish bot configuration to Cloudflare KV and load it by `data-bot-id`.

## Rate limiting note

`worker.js` includes a simple placeholder that reads `CF-Connecting-IP`. For production, configure Cloudflare WAF/rate limiting rules or add Durable Object/KV counters keyed by IP address.