Kalokoby

All guides › By use case

By use case

Screen library: every screen of every flow, searchable

The newest screenshot of every step across your flows in one gallery. Search by title, text, URL or step id before you design or build a screen that already exists.

A designer asks whether the app already has an empty state for the cart. Someone remembers seeing one, in some run, in some project. The screen library answers in a second, with the screenshot and a link to the step.

The problem

Screens are captured in runs, and runs are sorted by scenario and date. To find a pattern you have to know where it was walked. So teams redraw dialogs and empty states that already exist, slightly differently each time.

What changes with Kaloko

/<org>/screens on kaloko.app shows the newest capture of every step across the organization's flows, one tile per step. Search matches step and flow titles, ids, paths, URLs, the page title and the H1, and ignores diacritics. Filters narrow it to a project, product, module, locale, viewport, device, status or environment. It is in every plan.

How it works

  1. Open the library

    Screens in the top navigation of kaloko.app, or /<org>/screens.

  2. Search

    type "empty cart", "košík" or a URL path; filter by project, locale or status (fail shows the screens that are broken right now).

  3. Open the step

    each tile links to the step on the canvas of its run, in the locale and viewport you picked.

  4. From the terminal

    kaloko screens "empty cart" --project shop --locale en lists the same, with the canvas link of each; --designs adds design versions, --json gives it to an agent. MCP agents call search_screens.

Skills and prompts

Before you design the empty cart, look in the Kaloko screen library for empty states we already have and reuse their pattern.

Expected outcome: the agent runs kaloko screens "empty" --designs, names the screens it found with their links, and says which one it follows.

Which screens of the shop are failing right now?

Expected outcome: kaloko screens --project shop --status fail with each step and its link.

What you get

FAQ

Does it show old runs?

No. Each step shows its newest capture. Older captures stay in the runs and their history.

Who sees which screens?

Everyone sees the screens of the projects they can open; restricted projects stay restricted.

More guides

Accepting a task with an AI agent, in the pull requestRegression before a release: compare the run with the accepted baselineSEO and landing-page checks on production, read-only, every dayE-mail flows: capture the message next to the screen that sent it

Install once, then work through your agent

Kaloko runs where your code and your agent are. The service stores and versions the results, shows the canvas and collects approvals.

  1. Add the CLI to the project
    npm install --save-dev kaloko

    Needs Node 20 or newer. Update later with npm update kaloko.

  2. Create the config and install the skill
    npx kaloko init --agent claude --org <your-org>

    The skill is copied to .claude/skills/kaloko. npx kaloko doctor checks Chrome, the config and the token.

  3. Create your organization and a token

    Create an organization; you become its admin. The start page offers a tester token in one click, later under Settings → API tokens. Put it into the project .env:

    KALOKO_TOKEN=qwk_…
TYPESAFE_API_KEY=…   # optional: semantic evaluator

Then just ask your agent

The skill teaches your agent the whole loop: it writes the acceptance plan and the scenario from the task, walks the screens, evaluates, shares the canvas, reads what reviewers said and fixes it. You don’t type the commands; you look at the canvas.

What the agent runs (or run it yourself, e.g. in CI)

The same loop by hand:

npx kaloko start --scenario docs/tasks/TASK-123/qa/scenario.yml --env local
npx kaloko walk        # playwright steps; agent/manual steps: kaloko capture
npx kaloko evaluate
npx kaloko share --pr
npx kaloko feedback    # what reviewers said, with ids to answer