Getting started

This page walks through the whole loop once: sign up, publish a prototype, share it, collect comments, and let your coding agent pick them up.

Create your workspace

Open /signup on your critlab instance and enter your work email. critlab has no passwords: it emails you a six-digit code, and the account is created when you enter it. Your first workspace is created with the account, and a short onboarding checklist walks you through the rest of this page.

Publish a prototype

A prototype is any static build: a folder or zip with an index.html, or a single .html file. critlab hosts the files your build produces and does not build your project, so build a React, Angular or other framework project first and publish its output folder: What you can publish.

• In the browser: choose New prototype and drop the file or folder onto the drop zone. The name is taken from the page's <title> (then package.json, then the first heading, then the file name); you can rename it later.
• From the command line: install the CLI, sign in with an API key, and publish a build directory.

npm install -g @critlab/cli
crit login --api https://critlab.example.com
crit publish ./dist

Publishing again to the same prototype creates a new version. Comments stay with the version they were left on, and every version shows how many threads are still open.

Share it

Every prototype has a share link. Pick who can open it:

Prototypes are never indexed by search engines, whichever mode you pick.

Collect comments

Reviewers open the link, press C (or the comment button), click any element and type. Each thread's first comment captures a screenshot of the viewport and a crop of the element, plus the element's selectors, text and the browser environment, so whoever fixes it sees exactly what the reviewer saw. Reviewers can also record voice notes, mention teammates with @, attach up to four images (picked, pasted or dropped onto the comment box; a visitor with the link can too) and react to comments.

Every comment has its own link. Hover a comment (or tab to it) and press the link button beside the reaction button to copy it: anyone who can open the prototype lands on that thread with the comment in the middle of the card, highlighted for a moment. The link itself carries no password and no access, so it opens only what the prototype's own access setting already lets that person see. The notification and email for a reply or a mention open the exact comment the same way.

Resolve a thread when it is fixed. Resolved threads stay on the version they belong to.

Connect your coding agent

Create an API key in Settings → API keys & agents, then add critlab as an MCP server. For Claude Code:

claude mcp add critlab -e CRITLAB_TOKEN=<your key> -e CRITLAB_API=https://critlab.example.com -- npx -y @critlab/cli mcp

CRITLAB_API is your instance's address. The onboarding checklist's agent step prints this command with your key filled in, plus the equivalents for other agents. Your agent can then list open threads, pull a thread with its screenshots and selectors, publish a fixed version, and resolve the thread: that is the default core tool group. Everything you can do in the app is available to the agent too — folders, access, members and settings included — in the groups you choose to load (CRITLAB_MCP_TOOLS=core,workspace) or through the crit CLI: Choose your tools.

When an agent publishes a prototype with more than one screen or any designed state, it writes critlab.canvas.json next to index.html, so the canvas shows every screen with the right name: The canvas manifest.

Next steps

• Organise prototypes in folders and invite teammates or guests: Roles and guest access.
• Running critlab yourself: start with Architecture and trust boundaries.