Browser and preview

Mework has a browser in a side pane. You can browse in it, mark up a page or pick an element to send to the model, and run your project's dev servers from .mework/launch.json. With the preview tools on, the model can start those servers and work on the page itself.

The browser pane

Open the pane with the Preview button (the globe) in the top bar, or press ⌘B (CtrlB on Windows); you can rebind it as Toggle built-in browser under Settings → Keyboard shortcuts. When the conversation has several workspaces, the button asks which workspace to open a page for. Close pane only hides the pane; its pages keep running.

Pages

Each tab is a page that belongs to one workspace: its start page lists that workspace's dev servers, and they run on that workspace's machine. + (New preview page) opens another page. Closing a tab closes that page for good.

Every tab has its own browser profile. It starts empty, shares no cookies with other tabs, and is deleted when the tab closes or Mework quits. To sign out of a site without closing the tab, use Servers & settings (the globe at the left of the toolbar) → Clear browsing data → Clear all data for this tab.

Pages follow Mework's light or dark theme. If the model sets a colour scheme with preview_resize, that tab keeps it across reloads until you change the app theme or reopen the pane.

The address field

You can type an address without http:// or https://. Local and private-network addresses (localhost, *.localhost, *.local, 127.0.0.1, and LAN addresses such as 192.168.1.5:3000) then open over http, and everything else, including example.com:8080, over https. Text with spaces, or a single word with no . or :, becomes a Google search.

Annotate

Annotate freezes the page as a picture you can draw on. Add to chat attaches the drawing to your message as page-annotation.png.

Select element

Select element lets you click one element on the page. It appears as a chip above the composer, with a cropped picture of it attached. With your message, the model also receives the element's tag, classes, text, computed styles and HTML, and its React component when the page exposes one.

Open a local file

Servers & settings → Files → Open file opens a file from this computer, even when the workspace is on an SSH machine: HTML, SVG, PNG, JPEG, GIF, WebP, AVIF or PDF, up to 64 MiB.

An HTML file loads together with the files beside it: stylesheets, scripts, images and fonts in its folder and the folders below it load as they would from a web server; other files on this computer do not. If the file's tab goes to sleep, or is closed to save memory, it reopens at the same file when you return to it.

Dev servers and launch.json

Each workspace lists its dev servers in .mework/launch.json at its root. The format is a VS Code-style launch file; comments and trailing commas are allowed.

{
  "version": "0.0.1",
  "configurations": [
    {
      "name": "web",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev", "--", "--port", "5173"],
      "port": 5173,
      "autoPort": true
    },
    {
      "name": "storybook",
      "url": "http://localhost:6006"
    }
  ]
}

If port 5173 is taken, web moves to a free port and Mework rewrites its --port argument. storybook has no command: Mework starts nothing and opens a server that is already running.

Start an entry with Run on the pane's start page or in the Servers & settings menu, where you also stop servers.

Keys

${workspaceFolder} and ${workspaceRoot} become the workspace root in the command, the arguments and cwd. VS Code debug configurations, entries with neither a command nor a url, and entries with a field of the wrong type are skipped.

Ports

Always set port. Without it, Mework takes the port from a localhost url, from PORT in env, or from a port flag in the arguments: --port 5173 or -p 5173, written as one argument or two, or --port=5173 or -p=5173. Otherwise it uses 3000.

The server's environment always has PORT set to the chosen port. When that port is already taken:

• autoPort: true takes a free port and rewrites --port N, -p N, --port=N and -p=N in the arguments. A server that gets its port any other way must read PORT.
• autoPort: false refuses and names what holds the port.
• Without autoPort, the start is refused and the model asks you whether the port matters, for example for OAuth callbacks.

Starting and stopping

• A server that exits within 3 seconds has failed. The pane shows the error with Copy error log and Try again, and the conversation's model is told about the failure, so you can ask it to fix the configuration.
• Stopping a server closes its page. A server that crashes leaves the page open with Restart.
• Servers you start from the pane belong to the conversation, so its model sees them and can stop them.
• When Mework quits or crashes, every local server and the processes it started end with it.
• On macOS, commands see your login shell's PATH even when Mework was opened from the Finder.

Servers & settings → Show dev server logs docks a drawer under the page with the latest output of the first running server in the page's workspace.

What the model can do

Turn the preview tools on in Conversation settings → Tools, group Preview (see conversation settings); the tool list describes each one. preview_start, preview_stop and preview_list are on whenever any other preview tool is.

The model works on one page per conversation: the first page opened for it, or the one preview_start opens. Tabs you add with + are yours; the tools never touch them. preview_start does not open the pane; the page waits as a tab until you look. While the model works on the page, the pane shows Stop page automation.

The model can pick an element by a CSS selector or by the uid that preview_snapshot printed for it. preview_upload_image puts an image into the file chooser the page has open, or otherwise into the page's first file input.

An alert, confirm or prompt on the model's page waits for the model to answer it with preview_dialog. On a page you are using, you see and answer it yourself.

At Manual and Accept edits, every preview tool asks first except preview_list, preview_logs, preview_snapshot, preview_inspect and preview_resize; at Full access none ask (see security levels). Only preview_start and preview_stop offer Always allow. preview_screenshot and preview_upload_image are only offered to models that accept images.

When you are using the page

If you have been using the conversation's page yourself when the model needs it, the pane shows that the model is asking for the page and which tool it wants to use, and you give it back with one click. If the page is signed in to a site, Mework first asks you to approve the takeover for that site. The approval lasts until the page moves to another origin, and no security level or hook can answer it for you.

Remote machines

For a workspace on an SSH machine, launch.json is read and servers run on that machine. Pages are drawn on your computer, but their connections go out from the remote machine, so localhost and host names in any page of that workspace resolve there. If the connection drops, servers keep running there for up to 2 hours, and the page and servers carry on once it is back.

Workspaces in WSL have no previews.

Limits

• Up to 5 dev servers run per workspace folder, across all conversations.
• Usually at most 3 pages stay awake; the others sleep. Beyond 8 pages, the oldest sleeping ones close and reload, with their cookies, when you return.