Drift

Drift is a local prototype for an autonomous website reliability agent.

The idea is simple: if customers depend on a website journey, a machine should be able to open that website in a real browser, observe what happened, collect evidence, and turn browser failures into a useful incident report.

First Principles

A website is not reliable just because its server returns 200 OK. A customer experience can still be broken if:

• the page takes too long to load
• JavaScript throws errors
• an API request fails
• a critical asset is missing
• buttons, links, forms, or inputs are present but unusable
• the page redirects, hangs, or blocks the browser

So the smallest useful reliability agent needs four basic abilities:

1. Act like a user: open the submitted URL in a real browser.
2. Observe the page: capture the final URL, title, screenshot, console errors, failed requests, and visible interactive elements.
3. Decide whether anything looks broken: treat navigation failures, console errors, and failed network requests as reliability signals.
4. Explain the result: produce a timeline and incident-style summary that a developer can inspect.

Drift implements that first loop for a homepage scan and can now run an AI-guided safe flow explorer for public websites.

What It Does Today

When you enter a URL, Drift:

• validates that the URL is an absolute http or https URL
• launches Chromium through Playwright
• loads the page with a 1440x1000 viewport
• waits for the initial page and network activity
• records browser console errors
• records failed requests and HTTP responses with status 400 or higher
• captures a full-page screenshot into apps/backend/artifacts/
• collects visible links, buttons, inputs, textareas, selects, and ARIA-role elements
• returns a replay timeline with screenshots, browser signals, visible controls, and an incident result
• in AI explorer mode, asks a configured planner for safe next actions, validates them, blocks risky actions, and captures evidence after each step

The run is marked failed when Drift sees a navigation error, console error, or failed request. Otherwise, the run is marked completed.

AI Explorer

AI explorer mode targets public unauthenticated websites. The model proposes one action at a time, but Drift validates every action before Playwright runs it. Safe-only mode allows public navigation, search/filter typing, selects, waits, and normal clicks. It blocks checkout, payment, auth, account, upload, final submit, destructive, and cross-origin actions.

Configure the planner with:

DRIFT_LLM_PROVIDER=openai
DRIFT_LLM_MODEL=<model>
DRIFT_LLM_API_KEY=<key>

If those values are missing, AI explorer returns a configuration incident instead of trying to run with an unconfigured planner.

Project Structure

apps/frontend/
  src/              React frontend built with Vite, Tailwind CSS, and shadcn-style UI

apps/backend/
  src/
    server.js       Local HTTP server, React static serving, and API endpoint
    runner.js       Playwright browser runner and incident builder
    planner.js      LLM planner adapter and strict response validation
    safety.js       Safe-only action policy
    url.js          URL validation helpers
  scripts/
    install-browsers.js  Installs the local Chromium browser used by Playwright
  artifacts/
    *.png           Screenshots generated by Drift runs

packages/ui/
  src/              Shared shadcn-style React components

Run Locally

Install dependencies:

bun install

Install the Chromium browser used by Playwright:

bun run install:browsers

Start the React frontend and API server:

bun run dev

Open the app:

http://localhost:5173

Build the frontend for the API server to serve:

bun run build
bun run start

Production-style app URL:

http://localhost:8787

API

Create a run:

POST /api/runs
Content-Type: application/json

{
  "url": "https://example.com",
  "mode": "ai-explorer",
  "maxSteps": 8
}

Omit mode or set "mode": "browser" to keep the original homepage scan.

The response contains:

• id: unique run id
• project: submitted URL and hostname
• status: completed or failed
• journey: the current scan goal
• journey.discoveredFlows: AI-discovered candidate flows in explorer mode
• journey.selectedFlow: selected flow in explorer mode
• steps: browser timeline with screenshots and observations
• incident: severity, summary, evidence, likely cause, and suggested fix

Health check:

GET /health

Development Notes

• The server defaults to port 8787.
• Set PORT to run on a different port.
• The Vite dev server runs on port 5173 and proxies API/artifact requests to 8787.
• Screenshots are served from /artifacts/....
• Playwright browsers are installed into apps/backend/.playwright-browsers/ so the backend stays self-contained.
• Run tests with npm test or node --test.