Get up and running with CBrowser in under 5 minutes.

How to Add a Connector in Claude.ai

Step 1: Create Your Account

CBrowser requires a free account to use the MCP server.

Go to cbrowser.ai/account/register
Enter your email — you'll receive a 6-digit verification code
Enter the code, set your name and password
Save your API key — it starts with cbk_ and won't be shown again

Your free account includes core browser automation, natural language testing, and session tools. Upgrade to Pro to unlock all 120 tools including cognitive analysis, attention heatmaps, and empathy audits.

Limited-time offer: Sign up for Pro ($49.99/month) and get 500 bonus credits free that never expire. Pro includes 2,000 monthly credits + full access to all 120 tools including cognitive journeys, empathy audits, and attention heatmaps. Claim your bonus credits →

Step 2: Install CBrowser

Option A: Claude.ai (Easiest — No Install)

Add the MCP connector and optionally install the Claude.ai skill:

1. Add the connector:

Go to Customize → Connectors → "Add custom connector"
Paste: https://demo.cbrowser.ai/mcp
You now have 120 browser automation tools available

2. Install the Claude.ai Skill (recommended):

Download the CBrowser Skill (.skill)
Go to Customize → Skills → Upload the zip
The skill gives Claude context about CBrowser tools, pricing, workflows, and best practices

Note: The Claude.ai Skill is a lightweight knowledge file for the Claude.ai web interface. It is NOT the same as the Claude Code Skill (see Option D below). The Claude.ai Skill works on all plans including Free.

Tip: You can also connect via https://pro.cbrowser.ai/mcp — both URLs point to the same server.

Option B: Claude Desktop

Add CBrowser to the Claude Desktop app:

Open Claude Desktop → Settings → Developer → Edit Config
Add this to claude_desktop_config.json:

{
  "mcpServers": {
    "cbrowser": {
      "url": "https://demo.cbrowser.ai/mcp"
    }
  }
}

Restart Claude Desktop

Option C: CLI / npm (For Developers)

npm install -g cbrowser
cbrowser mcp-server

Or run directly without installing:

npx cbrowser mcp-server

Option D: Claude Code Skill (CLI — Not for Claude.ai)

If you use Claude Code (the terminal CLI app), install CBrowser as a full CLI skill:

# One-line installation
curl -fsSL https://raw.githubusercontent.com/alexandriashai/cbrowser/main/scripts/install-skill.sh | bash

# Or via npm CLI
npx cbrowser install-skill

Important: This is the Claude Code Skill for the terminal app. It is NOT the same as the Claude.ai Skill (Option A above). The Claude Code Skill includes workflow routing, CLI wrappers, and persistent memory. The Claude.ai Skill is a lightweight knowledge file.

This creates the full skill structure at ~/.claude/skills/CBrowser/:

~/.claude/skills/CBrowser/
├── SKILL.md              # Entry point: triggers, routing, CLI reference
├── Philosophy.md         # Constitutional safety (Green/Yellow/Red/Black zones)
├── AIVision.md           # AI selector modes (NL, visual, ARIA, semantic)
├── Personas.md           # Built-in + custom personas with cognitive traits
├── SessionManagement.md  # Session persistence (cookies, localStorage)
├── Credentials.md        # Encrypted credential vault with 2FA
├── Workflows/
│   ├── Navigate.md       # Smart navigation with AI wait detection
│   ├── Interact.md       # AI-guided click, fill, submit
│   ├── Extract.md        # Intelligent data extraction
│   ├── Authenticate.md   # Login handling with credential vault
│   ├── Test.md           # Test scenarios and assertions
│   └── Journey.md        # Autonomous persona exploration
├── Tools/
│   └── CBrowser.ts       # TypeScript CLI wrapper
└── .memory/              # Persistent storage (survives sessions)
    ├── sessions/         # Saved browser sessions
    ├── selectors/        # Self-healing selector cache
    └── personas/         # Custom persona definitions

See Claude-Skill-Installation for detailed architecture diagrams.

After installation:

Add to ~/.claude/skills/skill-index.json:

{
  "CBrowser": "~/.claude/skills/CBrowser/SKILL.md"
}

Install dependencies:

npm install -g cbrowser
npx playwright install

See Claude-Skill-Installation for detailed guide.

Managing Your Account

Dashboard: cbrowser.ai/account — view API keys, usage stats, rate limits
Generate new keys: Up to 5 active keys per account
View usage: Track tool calls, daily breakdown, top tools used

Option B: npm (Standard)

npm install cbrowser

bun

bun add cbrowser

yarn

yarn add cbrowser

Install Browsers

CBrowser uses Playwright under the hood. Install browsers for cross-browser testing:

# Recommended: Install all browsers
npx playwright install

# Or just specific browsers
npx playwright install chromium
npx playwright install firefox
npx playwright install webkit

Verify Installation

Run the doctor command to check that everything is set up correctly:

npx cbrowser doctor

You should see pass/fail for each check:

CBrowser Doctor v18.53.0
[PASS] Node.js: v22.19.0 (>= 18 required)
[PASS] Playwright Chromium: Installed
[WARN] Anthropic API Key: Not configured (cognitive features require it, basic commands work without it)
[PASS] Data Directory: /home/user/.cbrowser

All critical checks passed. 1 warning(s).

If any check fails, the doctor tells you exactly how to fix it.

You can also verify the version:

npx cbrowser --version

Accessibility

CBrowser supports accessible output for screen readers, CI pipelines, and scripts:

npx cbrowser doctor --plain       # No emoji or decorations
npx cbrowser doctor --no-color    # No ANSI color codes
npx cbrowser doctor --json-output # Structured JSON output

The NO_COLOR environment variable (no-color.org) is also supported.

Your First Automation

1. Navigate to a Page

npx cbrowser navigate "https://example.com"

This will:

Open the page in headless Chromium
Take a screenshot
Report the page title and load time

2. Click Something

npx cbrowser smart-click "More information" --url "https://example.com"

The smart-click command uses AI to find the element. It automatically retries and self-heals if the selector fails.

3. Make an Assertion

npx cbrowser assert "page contains 'Example Domain'" --url "https://example.com"

Natural language assertions let you verify page state without writing selectors.

Your First Test Suite

Create a file called my-tests.txt:

# Test: Homepage Loads
go to https://example.com
verify title contains "Example"
take screenshot

# Test: Link Works
go to https://example.com
click "More information"
verify url contains "iana.org"

Run it:

npx cbrowser test-suite my-tests.txt

Your First Persona Test

See how different users experience your site:

npx cbrowser compare-personas \
  --start "https://your-site.com" \
  --goal "Find the contact page" \
  --personas power-user,first-timer,elderly-user

You'll see a comparison showing:

Success rate per persona
Time taken
Friction points encountered
Specific issues (small buttons, confusing CTAs, etc.)

Configuration

Environment Variables

Variable	Default	Description
`CBROWSER_HEADLESS`	`true`	Run without visible browser
`CBROWSER_BROWSER`	`chromium`	Browser engine
`CBROWSER_TIMEOUT`	`30000`	Default timeout (ms)
`CBROWSER_DATA_DIR`	`~/.cbrowser`	Data storage location

Config File

Create .cbrowserrc.json in your project:

{
  "headless": true,
  "timeout": 60000,
  "persistent": true,
  "viewport": {
    "width": 1920,
    "height": 1080
  }
}

Next Steps

Constitutional Safety - Understand action zones
Persona Testing - Deep dive into user perspective testing
CLI Reference - All available commands
Examples - More code samples

Copyright: (c) 2026 Alexa Eden.

License: MIT License

Contact: [email protected]

Getting Started