koracodestudio guide

Studio

Build, run, and script workflow graphs in your browser, with the agent beside you.

The studio is where workflow graphs are easiest to work with. The graph sits on a canvas, the agent sits in a chat beside it, and every run plays out live. Describe a job and the agent builds the graph; select a step and ask for a change; run it and watch each step go. The chat is the terminal's agent with the same tools, so whatever you can do in kcode, you can do here.

The Workflows screen: a graph of browser steps on a canvas, the selected step open in a panel, and the chat beside it
The Workflows screen, with a step selected and the chat that scripted it.

Experimental. Workflow graphs (the Workflows, Runs, and Schedules screens) are turned on with KCODE_EXPERIMENTAL_GRAPHS=1. Setup and the Tasks screen work without it.

Open the studio

# add the first line to your shell profile to keep graphs on
export KCODE_EXPERIMENTAL_GRAPHS=1
kcode

Run kcode (or kcode studio) in your project's folder. It opens the studio in your browser for that project, on the background server (kcode daemon), which it starts when it is not running. Runs and schedules carry on after you close the tab and the terminal; kcode daemon stop ends it. kcode studio --foreground keeps a server in the terminal instead, until Ctrl-C. --no-open prints the address instead of opening it. To turn graphs on when the background server already runs, run kcode daemon stop first.

The first time, the studio opens on setup: connect a model (a ChatGPT or SuperGrok sign-in, or an API key), pick the browser (KoraCode's own Chrome window, your Chrome, or a cloud browser), and give it a first task. The connection button in the top bar shows the model and the browser, and opens them again, with your site secrets.

The link the command opens carries the server's password, so open the studio from the command rather than typing the address. A tab without it says it has no access to the server.

Find your way

One quiet bar runs across the top. From left to right:

  • Project / graph. The project's name opens the list of your projects and chats. The graph's name is a menu: switch graphs, start a New graph…, open Graph settings…, or Reload from disk.
  • Tasks, Workflows, Runs, Schedules. The screens. On Tasks you give the browser a job and watch it work beside the conversation; the others build and run workflow graphs. The graph you are on stays selected as you move between them, and every screen, graph, and run has its own address you can bookmark or share.
  • Save and Run. On Workflows, Saved turns into a Save button when the canvas has edits, and Run starts a run.
  • Theme and chat. The sun and moon button switches between the dark and light themes, and the last button shows or hides the chat. The studio remembers both.

Build a graph

The canvas fills the screen. Each step is a card with its kind, its name, and one line of what it does; agent steps also say whether they run with AI or replay a Script. The first step carries a Start tag. Drag cards to move them, and drag the empty canvas to pan.

The toolbar

The toolbar floats at the bottom of the canvas:

Button What it does
+ Step Adds an agent step: an agent does one job in the browser
Check Reads the page (the URL, some text, or an element) and goes on by true or false, without AI
Loop Runs a step once for each item of a list
Output Ends the run with a result
⋯ More kinds: a Subgraph runs another graph, a Success end or Failure end ends the run
Tidy, Undo, Redo Lay the graph out from left to right, and step back and forward through your edits
−, Fit, + Zoom out, fit the whole graph on screen, zoom in

New steps land in a free spot near the middle of the view. To connect two steps, drag from a step's ● to another step, or use Connect to… in the step's panel.

The step panel

Select a step and a panel slides in on the right. Its name is at the top, with Ask the chat (open the chat about this step), Start here (make it the first step), and Delete. Below that, depending on the kind of step:

  • Agent step: the Instruction, and a card that says whether the step runs with AI or replays a script, with Script this step with kcode (see Script a step).
  • Check: what to read (the URL, text on the page, or a CSS selector) and the value.
  • Loop: the list to go through (such as PREV_OUTPUT, the previous step's answer), what to do with each item, and the most items to handle.
  • Subgraph: the graph to run.

Next lists the paths out of the step and where each one leads; select one to edit it. More settings holds the step's model (blank uses the run's model), a time limit, and Ask a person first, which pauses the run for an approval or an answer before the step starts.

Paths

Select a path, on the canvas or in a step's Next list, to choose when it is taken: when the step succeeds or fails, when a check is true or false, or when the agent chooses it. For a path the agent chooses, describe when it should choose it, such as "Overdue". Tick This path means the run failed for a path that ends the run as a failure.

Problems, saving, and undo

The studio checks the graph as you edit. A pill at the top of the canvas says Valid, with how many steps run without AI, or how many problems it found; click it to see each one and jump to its step. A graph with problems can't run until they are fixed. Save (⌘S) writes the graph to .kcode/agent-workspace/graphs/<name>.json, and ⌘Z and ⇧⌘Z undo and redo every canvas edit. When the chat's agent or another editor changes the file, the canvas updates with the changed steps highlighted, and Undo in the notice puts back the last change.

Graph settings, in the graph menu, holds the run's time limit and the inputs a run asks for. Use an input in an instruction as {{.NAME}}, or a saved site secret as ##NAME##.

Work through the chat

The chat beside every screen is the terminal's agent with the same tools. It knows what you are looking at, and a chip above the message box shows what it will read with your message: the selected step or path, or the open run. Click the chip's × to leave it out.

  • Describe a job. The agent looks at the site, lists the steps it plans, and builds the graph once you agree. /new-graph skips the plan and builds straight away.
  • Change a step. With a step selected, "this step" means that step: ask the agent to change its instruction, split it in two, or add a check after it.
  • Run it. Ask the agent to run the graph. The run stays in the conversation as a live card: each step as it goes, marked script, no AI or agent, what it waits for (answer it right there), and the result as a table when it ends.
  • Runs that fix themselves. When a run fails, the agent reads why, fixes the graph, and runs it again, up to five runs, until it works. It stops and asks when only you can fix the cause (a login, a missing input, a model your account can't use) and before running again a graph that buys, sends, or deletes something.
  • Ask about a run. Type @, or press the @ button, to mention a run so the agent reads it. On a run, Ask the chat asks why it failed and how to fix it.
The chat: a request to script a step, the agent's folded work, and two run cards, the second with every step replaying a script

The agent's work folds into one line, such as Worked 4.7 s · 3 steps; click it to see each tool call. Its approvals and questions show in the chat, and its browser shows above the conversation while it works. Slash commands complete with Tab, the model picker sits next to the send button, and Stop ends the agent's turn. Unsaved edits on the canvas are saved before a message goes out, so the agent always works on what you see.

Script a step with kcode

A step that runs with AI costs tokens and time on every run. Select an agent step and press Script this step with kcode, or type /script-step <graph> <step> in the chat or the terminal. The agent:

  1. takes a successful attempt at the step, from a run or by doing it in the browser itself;
  2. turns it into a script and attaches it to the step;
  3. runs the graph to prove it: the step must show script, no AI;
  4. if it doesn't, scripts it again and reruns, up to four tries.

This works for steps that read data too, such as a list of products: their script returns what it reads, so later steps and the run's result get the same data the agent would have given. A graph whose steps are all scripted runs in about a second without the model. If the page changes and a script no longer fits, the agent takes over that step for the run.

A script belongs to the instruction it was captured for. Change a step's instruction and its card reads Out of date: the step runs with AI until it is scripted again.

Runs

Run on the Workflows screen saves the graph, asks for any inputs, and opens the run. The Runs screen lists the graph's runs, newest first, with All, Failed, and Waiting filters; the run you open fills the rest of the screen and updates live.

A finished run: the runs list, the page the run's browser ended on, every step marked Script with its time, and the result as a table
A run where every step replayed a script.

The run's header shows its status, how long it took, how many steps ran without AI, its model, tokens, and cost, with Pause, Resume, Cancel, Run again, and Ask the chat. Below it, five tabs:

Tab What it shows
Overview The run's browser, live while it runs; each step with Script or AI and its time; and the result
Graph The graph as it ran, with each step's outcome and the path the run took
Trace What every step did: the agent's messages, tool calls, and screenshots
Output The run's result and each step's output
Inputs The inputs the run was given

When a run reaches a login, a captcha, or a decision, a card at the top says what it needs. Answer it, Approve what it is waiting to do, or choose Retry the step or Treat as failed, and the run carries on.

Schedules

The Schedules screen runs graphs on a timetable. Pick a graph, a cron expression (such as 0 9 * * 1-5 for 9:00 on weekdays), and a time zone, then Add schedule. A schedule runs the graph's published version, so press Publish when the graph is ready, and again after you change it. Each schedule shows its next and last run, with Run now, Turn off, and Remove.

Schedules fire in whichever KoraCode is open for the project. kcode daemon start keeps one open in the background, so they fire with the studio and the terminal closed.

Projects and chats

Every chat is an ordinary session: the terminal lists it, and the studio can open a conversation you started in the terminal. The chat's title, or the project's name in the top bar, opens every project you have opened with KoraCode, each with its chats under it, newest first. The open project comes first, and a search narrows the chats by title.

Open a chat from another project, or start a New chat there, and the studio switches to that project: its graphs, its runs, and that chat.

The list of projects, each with its chats, newest first

Shortcuts

Keys Where What it does
⌘ S Workflows Save the graph
⌘ Z Workflows Undo the last canvas edit
⇧ ⌘ Z Workflows Redo
Esc Workflows, menus Close the panel, the dialog, or the menu
Enter Chat Send the message (Shift Enter starts a new line)
Tab Chat Complete a slash command or an @ mention

On Windows and Linux, use Ctrl for ⌘.