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