Snapvisor in Claude Code

Fastest: Add to Claude

Signed in to Claude Code with a Claude account? Add Snapvisor as a claude.ai connector in one click and sign in; it is then available in Claude Code, claude.ai and Claude Desktop.

Let the agent do it

Paste this sentence into Claude Code. It fetches the setup instructions and runs every step below itself.

Connect Claude Code by hand

1. Add the Snapvisor MCP server for every project on this machine. If Claude Code answers that snapvisor already exists, keep it and continue.
   bashCopy

   claude mcp add --transport http --scope user snapvisor https://mcp.snapvisor.io

2. Sign in: the user runs /mcp inside Claude Code, selects snapvisor, and approves the Snapvisor consent screen that opens in the browser. Claude Code stores and refreshes the token itself.

With a personal access token instead

1. With SNAPVISOR_ACCESS_TOKEN set, register the server with the token as a header instead. No browser step.
   bashCopy

   claude mcp add --transport http --scope user snapvisor https://mcp.snapvisor.io --header "Authorization: Bearer $SNAPVISOR_ACCESS_TOKEN"

Add the SDK

1. Only do this step inside a project that has a UI test suite; otherwise skip it and say so in the completion message. Use the package manager the project already uses (the lockfile tells you): the commands below are written for npm.
2. Playwright (@playwright/test in package.json): install the SDK, register its reporter in playwright.config.ts, and capture screenshots with argosScreenshot in the tests that render UI.
   bashCopy

   npm install --save-dev @snapvisor/playwright

3. The reporter uploads from CI only, so local runs stay offline:
   tsCopy

   // playwright.config.ts
   import { defineConfig } from "@playwright/test";
   import { createArgosReporterOptions } from "@snapvisor/playwright/reporter";
   
   export default defineConfig({
     reporter: [
       process.env.CI ? ["dot"] : ["list"],
       [
         "@snapvisor/playwright/reporter",
         createArgosReporterOptions({ uploadToArgos: !!process.env.CI }),
       ],
     ],
   });

4. Storybook: install @snapvisor/storybook. Vitest browser mode: install @snapvisor/vitest. Then wire them as the SDK page describes.
   bashCopy

   npm install --save-dev @snapvisor/storybook

5. Any other runner that writes screenshots to a folder: install the CLI and upload that folder after the tests run.
   bashCopy

   npm install --save-dev @snapvisor/cli
   npx @snapvisor/cli upload ./screenshots

6. Python projects: follow the Python SDK section of https://snapvisor.io/docs/sdks.
7. Uploads authenticate with the project's ARGOS_TOKEN, found in the project's settings at https://app.snapvisor.io. It belongs in CI secrets, never in the repository. On GitHub Actions no token is needed: https://snapvisor.io/docs/learn/integrations/github-tokenless-authentication.
8. Optional: the CLI can also inspect builds, submit reviews and post comments from the terminal. login opens the browser for the user to approve; whoami confirms it.
   bashCopy

   npx @snapvisor/cli login
   npx @snapvisor/cli whoami

Verify the connection

1. The snapvisor MCP server normally shows only two tools, search_tools and execute_typescript, and every operation is reached through them. Call search_tools with the query getMe; it answers with the declaration of external_getMe. Then call execute_typescript with this program:
   tsCopy

   return await external_getMe({});

2. If the server instead lists getMe as a tool of its own, call that tool directly. Either way, success is a response naming the signed-in user and the accounts the connection can reach; each account slug is the owner argument of every other operation.
3. Most agents load MCP servers when a session starts. If no snapvisor tool is available to you yet, do not report failure: the completion message tells the user to restart the session and ask you to verify the connection.
4. A 401 means the browser sign-in has not been completed yet. Inside execute_typescript a refused call throws an error carrying the same message; wrap the call in try/catch to read it. An answer that asks for an upgrade means the connection works and the account is on the Free plan.

Other agents