Babysit

Press / in your browser to file a GitHub issue with screenshot and app state — straight from your dev session.

Why

You're testing your app and something's off. You could switch to your IDE/CLI, describe the problem, wait for a fix, and reload — but now you've lost your train of thought and your place in the app.

Babysit keeps you in the flow. Press /, type what you see, and it captures your note alongside a screenshot and any custom app state you care about. The report lands in a GitHub Issue automatically — no tab switching, no context lost.

For beta users too

Ship the same widget to your beta users and let them report issues directly from inside the app. Every submission is a labeled GitHub Issue with full visual context — no more "it's broken on my screen" emails with no screenshot.

Auto-fixing with GitHub Actions

Trigger a workflow on every new Babysit issue to auto-triage, ping your team, or have Claude (or any AI) take a first pass at the fix.

Setup

No local server required. The widget talks to GitHub directly from the browser.

Step 1 — Create a GitHub token

Go to github.com/settings/personal-access-tokens, create a fine-grained token scoped to your target repo with:

• Issues: Read & Write
• Contents: Read & Write (for screenshots)

Step 2 — Add to your app

Option A: Vite plugin (zero config in app code)

Add to .env (gitignored):

BABYSIT_TOKEN=ghp_your_token_here

Add to vite.config.js:

import babysit from 'babysit/vite-plugin-babysit.js'

export default {
  plugins: [
    babysit({ repo: 'owner/repo' })
  ]
}

The widget is injected automatically on vite dev. Nothing else needed.

Option B: Plain HTML / any framework

<script src="https://unpkg.com/babysit/widget.js"></script>
<script>
  Babysit.init({
    token: "ghp_your_token_here",
    repo: "owner/repo",
    context: () => ({ /* optional: attach app state to every report */ })
  })
</script>

Option C: Local server (keep token server-side)

Use this only if you need the token to stay out of the browser (e.g. shared staging environments).

Add to .env:

GITHUB_TOKEN=ghp_your_token_here
GITHUB_REPO=owner/repo

Start the Babysit server (this is what runs on :5678):

npx babysit

Then add the widget — it loads from the same server and connects to it automatically:

<script src="http://localhost:5678/widget.js"></script>
<script>
  Babysit.init({ server: "http://localhost:5678" })
</script>

Usage

• Press / in your browser → overlay appears (or click the floating button if button: true)
• Type your prompt (first line becomes the issue title) → Enter to send
• A toast appears: ✓ #42 opened → — click to go directly to the issue

Architecture

[browser-mode]  widget.js  →  GitHub API directly
[server-mode]   widget.js  →  POST /report  →  server.js / worker  →  GitHub API

• widget.js — single script tag, no dependencies
• vite-plugin-babysit.js — injects widget + token from .env during Vite dev
• server.js — local Express server (token stays server-side)
• worker/ — Cloudflare Worker for production / beta users
• github.js — issue creation, label inference (used by local server)

Deploying to production (Cloudflare Worker)

For beta users or static frontends with no backend, deploy the included Worker.

1. Create a GitHub token for the target repo with fine-grained permissions:

• Issues: Read & Write
• Contents: Read & Write

2. Install wrangler:

cd worker
npm install

3. Edit worker/wrangler.toml — set name and GITHUB_REPO to your target repo:

name = "babysit-myapp"

[vars]
GITHUB_REPO = "your-org/your-app-repo"

4. Set secrets:

npx wrangler secret put GITHUB_TOKEN
npx wrangler secret put BABYSIT_SECRET

5. Deploy:

npm run deploy

6. Add the widget to your app:

<script src="https://unpkg.com/babysit/widget.js"></script>
<script>
  Babysit.init({
    trigger: "/",
    server: "https://babysit-myapp.your-subdomain.workers.dev",
    secret: "your-secret-here",
    context: () => ({ /* optional app state */ })
  })
</script>

One Worker per repo. Each Worker targets a single GITHUB_REPO. To use Babysit across multiple projects, deploy a separate Worker for each with a unique name in wrangler.toml.

Config

| Env var | Required | Description | |---|---|---| | GITHUB_TOKEN | ✓ | Personal access token with repo scope (or fine-grained: issues:write + contents:write) | | GITHUB_REPO | ✓ | Target repo in owner/repo format | | BABYSIT_PORT | — | Server port (default: 5678) | | BABYSIT_SECRET | — | Shared secret — widget must send matching x-babysit-secret header. Prevents casual abuse but is visible in client JS — not a substitute for user auth. |

Widget options (Babysit.init)

| Option | Default | Description | |---|---|---| | token | — | GitHub personal access token (create one →). Use for browser-mode (no server needed). | | repo | — | Target repo in owner/repo format. Required in browser-mode. | | server | http://localhost:5678 | URL of the Babysit server or Worker. Used when token is not set. | | trigger | / | Key that opens the overlay | | secret | — | Must match BABYSIT_SECRET on the server | | autoOpen | false | Open the overlay automatically on page load | | button | false | Show a persistent floating "Report issue" button | | context | — | Function returning app state to attach to every report |

Label inference

| Prompt prefix | Label | |---|---| | fix / bug | bug | | why / what | question | | improve / refine | enhancement | | (anything else) | feedback |