# 🔍 WebWatch MCP

A Model Context Protocol (MCP) server for monitoring website changes. Track URLs, detect content changes, compare snapshots, and extract content with CSS selectors — all from your AI assistant.

## Features

- **Watch URLs** — Monitor any webpage for content changes
- **CSS Selectors** — Track specific elements (prices, headlines, stock info)
- **Snapshot History** — SQLite-backed storage of every page state
- **Diff Detection** — See exactly what changed, line by line
- **Content Extraction** — Pull structured data from any page on demand

## Tools

| Tool | Description |
|------|-------------|
| `watch_url` | Add a URL to the watch list with optional CSS selector and label |
| `list_watches` | List all monitored URLs with status and statistics |
| `check_now` | Fetch a URL now, compare to previous snapshot, return diff |
| `get_changes` | Browse change history for one or all watched URLs |
| `compare_snapshots` | Compare any two snapshots side-by-side |
| `extract_content` | One-off content extraction with CSS selectors |

## Installation

```bash
# Clone and build
git clone https://github.com/leviai-tools/webwatch-mcp.git
cd webwatch-mcp
npm install
npm run build

# Or install globally
npm install -g @leviai/webwatch-mcp
```

## Usage with Claude Desktop

Add to your `claude_desktop_config.json`:

```json
{
  "mcpServers": {
    "webwatch": {
      "command": "node",
      "args": ["/path/to/webwatch-mcp/build/index.js"],
      "env": {
        "WEBWATCH_DATA_DIR": "/path/to/data/dir"
      }
    }
  }
}
```

Or if installed globally:

```json
{
  "mcpServers": {
    "webwatch": {
      "command": "webwatch-mcp"
    }
  }
}
```

## Environment Variables

| Variable | Default | Description |
|----------|---------|-------------|
| `WEBWATCH_DATA_DIR` | `~/.webwatch-mcp` | Directory for SQLite database |

## Example Workflows

### Monitor a pricing page
```
You: "Watch https://example.com/pricing — track the .pricing-table element"
→ watch_url(url, selector=".pricing-table", label="Example pricing")

You: "Check if pricing changed"
→ check_now("https://example.com/pricing")
```

### Track competitor changes
```
You: "Add these competitor pages to my watchlist"
→ watch_url for each URL

You: "Show me all recent changes"
→ get_changes(limit=20)
```

### Extract data on demand
```
You: "What are the headlines on HN right now?"
→ extract_content("https://news.ycombinator.com", ".titleline > a")
```

## Data Storage

All data is stored locally in SQLite at `~/.webwatch-mcp/webwatch.db` (configurable via `WEBWATCH_DATA_DIR`).

**Tables:**
- `watches` — Monitored URLs with selectors and labels
- `snapshots` — Page content captured at each check
- `changes` — Detected diffs between consecutive snapshots

## Requirements

- Node.js ≥ 18.0.0

## License

MIT