CursorをCDPで実ブラウザに接続する方法 — Clawbrowserの記事カバー

CursorをCDPで実ブラウザに接続する方法

Clawbrowser TeamAIエージェントcdpcursorチュートリアル

Cursor内蔵のbrowser toolは、localhostのアプリを確認するには十分です。ページを開き、クリックし、入力し、screenshotを取れます。ただし実運用のWebサイトでは、分離されたwebviewであることが問題になります。cookieの永続性は弱く、fingerprintは管理されず、anti-botが見るbrowser identityも一貫しません。

TL;DR: CursorをCDP(Chrome DevTools Protocol)でClawbrowserに接続します。agentは実Chromiumを使い、永続profile、管理されたfingerprint、proxy routingを得ます。runtimeを入れ、profileを起動し、Cursorにlocal endpointを渡すだけです。


Cursor内蔵ブラウザでは足りない理由

Cursorのbrowser toolは、MCP server extensionとして動くsandboxed webviewです。localhostでは便利です。navigate、click、type、scroll、screenshot、console output、network trafficを扱えます。

しかし実Webに出ると制約が出ます。

制約 何が起きるか
Sandboxed webview 実Chromium instanceではありません。サイトは欠けているAPIや非標準のwindow propertiesを検出できます。
Session persistenceなし CookiesとlocalStorageはworkspaceに閉じ、実行間で安定しません。
Fingerprint managementなし canvas hash、WebGL renderer、navigator propertiesが毎回ほぼ同じです。
Proxy supportなし trafficはマシンのdefault IPから出ます。datacenter IPは早くflagされます。
信頼性の問題 Cursor 2.3.18+ではclick、scroll、element検出にregressionが出ています。

agentがlogin、Cloudflare背後の取得、production siteのmulti-step workflowを行うなら、内蔵webviewは弱い土台です。


CDPで得られるもの

CDP(Chrome DevTools Protocol)は、Chromium browserをprogrammaticに制御する標準interfaceです。PlaywrightはconnectOverCDP、Puppeteerはpuppeteer.connectを使い、raw CDP clientはdebugging portへWebSocket接続します。

Cursorを外部browserへCDP接続すると、次を得られます。

  • 実ブラウザ: 完全なrendering engine、extensions、標準API
  • 永続session: cookiesとlogin stateがagent実行をまたいで残る
  • ページ全体の制御: PlaywrightとPuppeteerが内部で使うprotocol
  • Anti-detection: browserがfingerprintとproxy identityを一貫して管理する

接続は標準WebSocket URLです。CDPを話せるtoolなら、CDP endpointを公開するbrowserへ接続できます。Clawbrowserは各profileでendpointを公開します。


CursorをClawbrowserに接続する手順

前提条件

  • macOS(Apple Silicon)、Linux(x64またはarm64)、またはWindows
  • Cursorがインストール済み
  • app.clawbrowser.aiのClawbrowser API key

ステップ1:Clawbrowserをインストールする

clawctl bootstrapperをダウンロードして展開します。

# macOS (Apple Silicon)
archive="clawctl-macos-arm64.tar.gz"
curl -fL --retry 3 -o "$archive" \
  "https://github.com/clawbrowser/clawctl/releases/latest/download/${archive}"
tar -xzf "$archive"

Linuxではclawctl-linux-amd64.tar.gzまたはclawctl-linux-arm64.tar.gzを使います。Dockerやsudoは不要です。

API keyを設定します。

./clawctl config set api-key

ステップ2:ブラウザprofileを起動する

名前付きprofileでClawbrowserを起動します。各profileは独自のfingerprint、cookie storage、任意のproxyを持ちます。

# Start a profile and open the verification page
clawctl start --profile cursor-dev --url clawbrowser://verify/ --json

# Get the CDP endpoint for this profile
clawctl endpoint --profile cursor-dev --json

endpointコマンドはhttp://127.0.0.1:9222のようなURLを返します。これがCursor agentのCDP endpointです。

ステップ3:CursorからMCPで接続する

最も簡単なのは、Clawbrowser内蔵のMCP serverを使う方法です。navigation、screenshots、clicks、tab management、profile startupをMCP toolsとしてCursorから直接呼べます。CDP接続はserverが内部で管理します。

MCP設定を書き込むにはinstallerを実行します。

clawctl install --agent all --json

Cursorはこのlocal MCP serverを設定から読み込みます。

別案:Microsoft Playwright MCP

Microsoft公式のPlaywright MCP serverを使いたい場合は、Cursor Settings > MCP > Add ServerでClawbrowserのCDP endpointを指定します。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [

どちらもCursorに高レベルのbrowser accessを渡します。Clawbrowser MCP serverは、標準操作にprofileとfingerprint管理を追加します。

ステップ4:接続を確認する

Cursor agentにテストページを開かせます。

Navigate to https://browserleaks.com/canvas and take a screenshot. Tell me what canvas fingerprint hash you see.

接続できていれば、sandboxed webviewのgeneric hashではなく、Clawbrowser profileの実canvas fingerprintが見えます。


コードから直接CDP接続する

Cursor agentがMCP toolsではなくscriptを書いて実行する場合は、PlaywrightまたはPuppeteerで直接接続します。

Playwright (Python)

from playwright.async_api import async_playwright

async def browse_with_clawbrowser():
    async with async_playwright() as p:
        # Connect to Clawbrowser's CDP endpoint

Playwright (Node.js)

const { chromium } = require('playwright');

const browser = await chromium.connectOverCDP('http://127.0.0.1:9222');
const page = browser.contexts()[0].pages()[0];

Puppeteer

const puppeteer = require('puppeteer');

const browser = await puppeteer.connect({
  browserURL: 'http://127.0.0.1:9222'
});

3つのframeworkは同じCDP endpointに接続します。Clawbrowserはidentity layerを下で管理します。Canvas、WebGL、AudioContext、fonts、screen resolution、timezone、navigator properties、proxy routingがprofile内で一貫します。


Cursor agentにanti-detectionが重要な理由

Cursor agentが標準browserでWebを操作すると、anti-bot systemはbrowser identityを複数surfaceで確認します。

Signal 確認される内容 Standard Chrome Clawbrowser
Canvas hash GPU rendering fingerprint Static, matches known automation profiles Unique per profile, consistent with reported GPU
WebGL renderer Graphics card identifier Exposes real hardware Matches the profile's simulated hardware
Navigator properties Browser version, platform, language Generic Chromium values Consistent with profile's OS and locale
Timezone System timezone vs IP geo Mismatches with proxy location Auto-aligned with proxy geography
CDP detection Runtime.enable traces Detectable via leaked CDP artifacts Engine-level patches suppress CDP signals

標準ChromiumをCDPで動かすと、anti-bot scriptsがすぐ読める痕跡が残ります。ClawbrowserはJavaScript overridesではなくengine levelでpatchします。property descriptorsやprototype chainsで見破られにくいのが重要です。

つまり、Cursorをchrome --remote-debugging-port=9222へつなぐのと、Clawbrowserへつなぐのではbrowser identityの品質が違います。


複数profileを管理する

Clawbrowser profileはそれぞれ完全に分離されています。別アカウントや別プロジェクト用に複数profileを同時に起動できます。

# Create three profiles with different locations
clawctl create --profile account-a --location sweden --json
clawctl create --profile account-b --location germany --json
clawctl create --profile account-c --location japan --json

各profileは固有のfingerprint、proxy IP、isolated storageを持ちます。platform側には、異なる国の異なるmachineから来る独立userとして見えます。

Cursor agentは別CDP endpointへ接続してprofileを切り替えるか、1つのscriptから複数profileを並列制御できます。


Cursor built-in browser vs CDP vs Clawbrowser

Cursor built-in Chrome via CDP Clawbrowser via CDP
Browser engine Sandboxed webview Real Chromium Real Chromium (patched)
Session persistence Workspace-scoped Manual profile dirs Named profiles with auto-persistence
Fingerprint management None None 20+ surfaces managed per profile
Proxy support None Manual flag Profile-bound, geo-aligned
Anti-bot survival Blocked instantly Blocked within minutes Passes Cloudflare, DataDome, PerimeterX
Multi-account Not possible Separate --user-data-dir Built-in profile isolation
Setup complexity Zero (built in) Moderate Three commands

内蔵browserはlocalhostの検証に使います。実Webへ触れるworkflowではClawbrowser via CDPを使います。


FAQ

Cursorのagent modeで動きますか?

はい。Cursorのagent modeは、CDPで外部browserに接続するMCP serverを含め、任意のMCP serverを使えます。actionsはsandboxed webviewではなくClawbrowserで実行されます。

PlaywrightやPuppeteerは必要ですか?

agentがautomation scriptを書いて実行する場合だけ必要です。MCP workflowではserverが内部でCDP接続を管理します。

Cursor projects間でlogin sessionを再利用できますか?

はい。Clawbrowser profilesはcookies、localStorage、IndexedDBを保持します。一度loginしたprofileを別workspaceで再利用できます。

Cursorのbrowser toolと外部browserが混ざる場合は?

Settings > Features > Browserで内蔵browserを無効にできます。両方を残しても、独立したbrowserとして共存します。

Clawbrowserは無料ですか?

はい。Clawbrowserは無料、open source、MIT-licensedです。seat fee、usage limit、browser runtime subscriptionはありません。install検証にはapp.clawbrowser.aiのAPI keyが必要です。


はじめる

Cursor agentを実ブラウザへ接続する3つのコマンドです。

# Install Clawbrowser
clawctl install --json

# Set your API key
clawctl config set api-key

返されたendpointをMCP serverまたはPlaywright scriptに指定します。Cursor agentはmanaged fingerprints、persistent sessions、proxy routingを持つbrowserでWebを操作します。

CDPの詳しい背景はAIエージェント向けCDPブラウザ開発者ガイドを参照してください。fingerprintingはブラウザの指紋:20の自動化信号で解説しています。

続きを読む

すべての記事 →