@opencraw/studio

A visual editor for OpenCraw recipes: open a site or a document, click the data you want, and get a recipe that runs — the same engine, the same JSON files, no hidden state.

Install

npm install -g @opencraw/cli @opencraw/studio

Start

opencraw studio recipes/          # the cli delegates to this package when it's installed
npx @opencraw/studio recipes/     # or run it directly, without the cli

Either opens a local server (127.0.0.1 only, behind a random access token) and prints the URL to open:

OpenCraw Studio: http://127.0.0.1:52341/?token=8f2a1c9e4b7d3f6a0e5c8b1d2a4f7e9c
Workspace: /home/you/project/recipes

recipes/ can already have .ocw-in.json/.ocw-out.json files in it, or be empty — the studio's own Recipe ▾ → New recipe… writes a minimal, valid pair to start from.

Chat

A host that has a language model can give Studio a chat agent: pass chat (a ChatModel, which streams the model's text and tool calls for a conversation) to startStudioServer. The page then shows a Chat tab where the OpenCraw agent (@opencraw/agent) works with the person inside Studio: it lists, reads, writes and validates recipes in the open folder, probes a page, opens a recipe, picks a value and runs a sample, each step shown as it happens. Without a chat option there is no tab. The VS Code extension passes the editor's models; channelChatModel builds a model that is answered over a message channel (the extension's IPC), and scriptedChatModel one that answers from a script, for tests.

Show me. The options over the chat box turn on a guide: with Show me on, the agent gets the tools ui_controls, ui_say, ui_point, ui_click, ui_type and ui_pause, and demonstrates on the page. A fake pointer (an overlay, so the real mouse is never touched) eases to a control the page registered with data-guide, a ring marks it, a ripple shows the click, and a caption says why; then the action happens through the control's own handlers. The server sends each step down the channel the page already listens to, so it works when Studio runs somewhere else (a container, Azure). Voice speaks the captions with the browser's speech synthesis (speed and voice to choose), and Step by step waits for Next after each action. The person stays in charge: any click, key press, scroll or touch of their own pauses the guide until Continue, and Esc stops it and the agent. The agent is told which controls exist when it names one that does not.

Hooks in a folder

A folder's opencraw.hooks.json defines hooks as text, in any language (see §6.0 of the authoring guide). Studio lists them in the bar under the toolbar with the exact command or address each will run, Add hook writes a new one (a JavaScript or TypeScript file asks whether it runs in Node or in the browser page), and Test runs an allowed hook once with a sample input. A hook typed in Studio is allowed at once; one that arrives in the folder's file is not allowed until the person presses Allow, and the approval is kept in their own configuration (~/.opencraw/studio-trust.json, or trustFile in startStudioServer), keyed by the folder, the name and the exact definition: edit the command and it has to be allowed again. Sample runs and the editor's hook names include the allowed hooks.

Learn more

The OpenCraw Studio manual builds one real recipe end to end, tab by tab: picking on a live page, the Record tab's mapping, the document canvases (JSON, PDF, Excel/CSV, PowerPoint), recording a login, and the JSON editor.