Hover/docs← HomeGitHub

Your first session

A guided walkthrough of every widget control. Estimated time: 5 minutes.

Prerequisites

  • Followed Quick start — Hover is installed in your project and pnpm dev (or your equivalent) is running.
  • The floating ✨ launcher is visible in the bottom-right of your dev page.
  • The debug Chrome is open on port 9222 (the widget walks you through launching it if not).

Step 1 — Open the widget

Click the ✨ launcher. The panel slides up.

You'll see:

  • A header pill claude ▾ showing the active coding agent
  • A status indicator (connected when the WS bridge is up)
  • An empty conversation body
  • A footer with a textarea, Record, ⌖ Fix, Send, and a round 🎙 mic button

Step 2 — Send your first prompt

Type a natural-language instruction describing a flow you want to verify on your app. For example:

log in with the test account, navigate to the dashboard, and verify
the user's name appears in the header

add a product to cart, go to checkout, verify the total is correct

submit the contact form with empty fields, verify each required-field
error appears

Press ↵ or click Send. The button switches to Stop while the agent runs.

Or hold the round 🎙 button to the right of Send and speak the same instruction. Hover transcribes it into the textarea and submits on release. Works in 中文 too — learn more.

Step 3 — Watch the agent drive

Events stream into the panel as the agent works:

  • Opening page / Clicking … / Filling form — tool calls, one row per natural-language intent
  • Mint-bar spinner on the currently-running step
  • Running cost ($) ticks in the header

The agent's verification report renders as a Result card at the end. If it found bugs, a Findings card appears alongside, severity-coloured.

Step 4 — Save the verified session

Click the dropdown on the Result card. Two formats by default (three if @hover-dev/security is loaded):

  • Save as Spec → __vibe_tests__/<slug>.spec.ts using getByRole / getByLabel / getByTestId
  • Save as Jira case → __vibe_tests__/<slug>.case.csv (Xray-compatible)
  • Save as Security spec → __vibe_tests__/<slug>.security.spec.ts (uses Playwright's request fixture for header/status assertions; only present when @hover-dev/security is registered)

Step 5 — Run the spec without Hover

The saved file is a plain @playwright/test spec. Run it like any other Playwright test in your project:

pnpm exec playwright test __vibe_tests__/<slug>.spec.ts

This is the point of crystallization: the AI authored the test once, but the saved spec runs forever in CI with zero agent involvement.

What's next

  • Voice mode — hands-free instruction and step narration
  • Record mode — record your own clicks as Playwright steps
  • Fix prompt — click an element, describe a change, get a precise prompt