Getting started

Hold and rewrite a request.

1. 01
   Open your test page

   Type the address of an app you own or are authorized to test into the URL bar.

2. 02
   Arm interception

   In the strip beside the URL bar, switch INTERCEPT from BRK to ALL. Then trigger a request from the page, such as a form submit.

3. 03
   Inspect and edit

   Select the held row in the network log. Change the method, URL, headers, or body to change what the server receives.

4. 04
   Release

   Press RELEASE to send your version. The home page capture shows a real run where the server received the edited JSON.

Responses can be held and edited the same way: change the status, headers, or body before the page receives it.

Edit React and store state.

1. 01
   Open the State panel

   Press ⌘⇧S or click the braces icon in the panel rail. The header shows the React version and whether the build is development or production.

2. 02
   Find a component

   Walk the tree with j and k, or press / to search by name. Press h to show host elements such as div and button, and x to highlight the selected component in the page.

3. 03
   Edit a value

   Select a prop, hook, or state value and change it inline, or edit it as JSON. The page re-renders with your value.

4. 04
   Work with stores

   Stores are listed under the tree. Edit Redux state or dispatch an action, edit a query's cached data, or edit Zustand state. Zustand appears only when the app uses its devtools middleware.

In production builds, props and hooks are read-only and the panel says why. Context is always read-only.

Bring your own API key.

1. 01
   Activate your license

   Open Provider keys from the panel rail on the right. Under Refract license, paste the RF- key from your license email and activate it.

2. 02
   Save a provider key

   Paste an Anthropic or OpenAI API key and save it. Refract checks it with one request to that provider and encrypts it in the local macOS profile. After that the interface shows only its last four characters.

3. 03
   Start a turn

   Open the Agent panel, pick a model, and describe the task.

The agent can read and propose edits to React and store state too.

Before each turn, Refract redacts Cookie, Set-Cookie, Authorization, and Proxy-Authorization values and limits how much of each body the model sees. A workspace switch turns off that redaction and sends real secret values to the model.

There is no Refract-hosted model and no bundled usage credit. Provider charges and data handling follow your agreement with that provider.

Every action needs your approval.

The agent can read the tab, the network log, and app state on its own. Navigating, clicking, typing, adding an intercept rule, editing state, dispatching a store action, and editing or dropping a held request each arrive as a separate approval sheet showing the exact proposal. Click Allow or Deny. One approval is never a standing grant, and a sheet left unanswered expires as a denial.