+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 +139 +140 +141 +142 +143 +144 +145 +146 +147 +148 +149 +150 +151 +152 +153 +154 +155 +156 +157 +158 +159 +160 +161 +162 +163 +164 +165 +166 +167 +168 +169 +170 +171 +172 +173 +174 +175 +176 +177 +178 +179 +180 +181 +182 +183 +184 +185 +186 +187 +188 +189 +190 +191 +192 +193 +194 +195 +196 +197 +198 +199 +200 +201 +202 +203 | + + + + +6x +6x +6x + + + +6x + + + + + + + + + + + + + + + + + + +1x + + + + + + + + +12x +12x + + + + + +1x +1x + + + + +1x +1x + + + + + +1x +1x + + + +1x +1x + + + + + + + + + + + + + + + +1x +1x +1x + + + + +1x +1x + + + +1x +1x + + + + +1x +1x + + + + +1x +1x + + + + +1x +1x + + + + +1x +1x + + + +1x +1x + + + + + +1x +1x + + + +14x +14x + +1x + + + +1x + + + +1x + + + +1x + + + +1x + + + +1x + + + +1x + + + +1x + + + +1x + + + +1x + + + +1x + + + +1x + + + +1x +1x + + +1x + + + + + + + + +13x + + + + | import { resolve } from 'node:path';
+import { type Browser, type BrowserContext, type Page, webkit } from 'playwright';
+import type { BrowserCommand, BrowserOptions, CommandResponse, ElementInfo } from './types.js';
+
+export class ClaudeBrowser {
+ private browser: Browser | null = null;
+ private context: BrowserContext | null = null;
+ private page: Page | null = null;
+ private options: Required<BrowserOptions>;
+
+ constructor(options: BrowserOptions = {}) {
+ this.options = {
+ headless: options.headless ?? true,
+ width: options.width ?? 1280,
+ height: options.height ?? 800,
+ };
+ }
+
+ async launch(): Promise<void> {
+ this.browser = await webkit.launch({ headless: this.options.headless });
+ this.context = await this.browser.newContext({
+ viewport: {
+ width: this.options.width,
+ height: this.options.height,
+ },
+ });
+ this.page = await this.context.newPage();
+ }
+
+ async close(): Promise<void> {
+ Iif (this.browser) {
+ await this.browser.close();
+ this.browser = null;
+ this.context = null;
+ this.page = null;
+ }
+ }
+
+ private ensurePage(): Page {
+ Eif (!this.page) {
+ throw new Error('Browser not launched. Call launch() first.');
+ }
+ return this.page;
+ }
+
+ async goto(url: string): Promise<{ url: string; title: string }> {
+ const page = this.ensurePage();
+ await page.goto(url, { waitUntil: 'networkidle' });
+ return { url: page.url(), title: await page.title() };
+ }
+
+ async click(selector: string): Promise<{ url: string }> {
+ const page = this.ensurePage();
+ await page.click(selector);
+ await page.waitForLoadState('networkidle').catch(() => {});
+ return { url: page.url() };
+ }
+
+ async type(selector: string, text: string): Promise<void> {
+ const page = this.ensurePage();
+ await page.fill(selector, text);
+ }
+
+ async query(selector: string): Promise<ElementInfo[]> {
+ const page = this.ensurePage();
+ return page.$$eval(selector, (nodes) =>
+ nodes.map((el) => {
+ const attrs: Record<string, string> = {};
+ for (const attr of el.attributes) {
+ attrs[attr.name] = attr.value;
+ }
+ return {
+ tag: el.tagName.toLowerCase(),
+ text: el.textContent?.trim().slice(0, 200) || '',
+ attributes: attrs,
+ };
+ })
+ );
+ }
+
+ async screenshot(path?: string, fullPage = false): Promise<{ path: string; buffer?: Buffer }> {
+ const page = this.ensurePage();
+ const resolvedPath = resolve(path || 'screenshot.png');
+ const buffer = await page.screenshot({ path: resolvedPath, fullPage });
+ return { path: resolvedPath, buffer };
+ }
+
+ async getUrl(): Promise<{ url: string; title: string }> {
+ const page = this.ensurePage();
+ return { url: page.url(), title: await page.title() };
+ }
+
+ async getHtml(full = false): Promise<string> {
+ const page = this.ensurePage();
+ const html = await page.content();
+ return full ? html : html.slice(0, 10000);
+ }
+
+ async back(): Promise<{ url: string }> {
+ const page = this.ensurePage();
+ await page.goBack();
+ return { url: page.url() };
+ }
+
+ async forward(): Promise<{ url: string }> {
+ const page = this.ensurePage();
+ await page.goForward();
+ return { url: page.url() };
+ }
+
+ async reload(): Promise<{ url: string }> {
+ const page = this.ensurePage();
+ await page.reload();
+ return { url: page.url() };
+ }
+
+ async wait(ms = 1000): Promise<void> {
+ const page = this.ensurePage();
+ await page.waitForTimeout(ms);
+ }
+
+ async newPage(): Promise<void> {
+ Eif (!this.context) {
+ throw new Error('Browser not launched. Call launch() first.');
+ }
+ this.page = await this.context.newPage();
+ }
+
+ async eval(script: string): Promise<unknown> {
+ const page = this.ensurePage();
+ return page.evaluate(script);
+ }
+
+ async executeCommand(cmd: BrowserCommand): Promise<CommandResponse> {
+ try {
+ switch (cmd.cmd) {
+ case 'goto': {
+ const result = await this.goto(cmd.url);
+ return { ok: true, ...result };
+ }
+ case 'click': {
+ const result = await this.click(cmd.selector);
+ return { ok: true, ...result };
+ }
+ case 'type': {
+ await this.type(cmd.selector, cmd.text);
+ return { ok: true };
+ }
+ case 'query': {
+ const elements = await this.query(cmd.selector);
+ return { ok: true, count: elements.length, elements };
+ }
+ case 'screenshot': {
+ const result = await this.screenshot(cmd.path, cmd.fullPage);
+ return { ok: true, path: result.path };
+ }
+ case 'url': {
+ const result = await this.getUrl();
+ return { ok: true, ...result };
+ }
+ case 'html': {
+ const html = await this.getHtml(cmd.full);
+ return { ok: true, html };
+ }
+ case 'back': {
+ const result = await this.back();
+ return { ok: true, ...result };
+ }
+ case 'forward': {
+ const result = await this.forward();
+ return { ok: true, ...result };
+ }
+ case 'reload': {
+ const result = await this.reload();
+ return { ok: true, ...result };
+ }
+ case 'wait': {
+ await this.wait(cmd.ms);
+ return { ok: true };
+ }
+ case 'newpage': {
+ await this.newPage();
+ return { ok: true };
+ }
+ case 'close': {
+ await this.close();
+ return { ok: true };
+ }
+ case 'eval': {
+ const result = await this.eval(cmd.script);
+ return { ok: true, result };
+ }
+ default: {
+ const _exhaustive: never = cmd;
+ return { ok: false, error: `Unknown command: ${(_exhaustive as { cmd: string }).cmd}` };
+ }
+ }
+ } catch (err) {
+ return { ok: false, error: (err as Error).message };
+ }
+ }
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| File | ++ | Statements | ++ | Branches | ++ | Functions | ++ | Lines | ++ |
|---|---|---|---|---|---|---|---|---|---|
| browser.ts | +
+
+ |
+ 58.42% | +52/89 | +75.67% | +28/37 | +80.95% | +17/21 | +58.42% | +52/89 | +
| logger.ts | +
+
+ |
+ 89.47% | +34/38 | +66.66% | +28/42 | +81.25% | +13/16 | +91.89% | +34/37 | +
| server.ts | +
+
+ |
+ 44.23% | +23/52 | +70% | +7/10 | +61.53% | +8/13 | +43.13% | +22/51 | +
| types.ts | +
+
+ |
+ 0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +0% | +0/0 | +
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 +115 +116 +117 +118 +119 +120 +121 +122 +123 +124 +125 +126 +127 +128 +129 +130 +131 +132 +133 +134 +135 +136 +137 +138 | + + + +2x + + + + + + + + + + + + + + + + + +2x + + + + + + + + + + + + + + + + + +23x + + + +3x + + + + + + + + + + + + + + +18x + +4x + + +5x + +2x + +2x + +1x + +1x + + + +3x + + + + +11x +11x +11x +11x +11x + + + + + + + + + + + + + +2x +3x +2x +2x + +2x +1x + + + + +12x +1x + +11x +11x +12x +12x + + + + + +6x + +9x + + +9x + + + + + +2x + + +2x + | import chalk from 'chalk';
+import logSymbols from 'log-symbols';
+
+// Icons for commands
+export const icons: Record<string, string> = {
+ goto: '→',
+ click: '◉',
+ type: '⌨',
+ query: '?',
+ screenshot: '📷',
+ url: '🔗',
+ html: '<>',
+ back: '←',
+ forward: '→',
+ reload: '↻',
+ wait: '⏳',
+ newpage: '+',
+ close: '✕',
+ eval: '⚡',
+};
+
+// Colors for command types
+export const cmdColor: Record<string, (s: string) => string> = {
+ goto: chalk.cyan,
+ click: chalk.yellow,
+ type: chalk.magenta,
+ query: chalk.blue,
+ screenshot: chalk.green,
+ url: chalk.cyan,
+ html: chalk.blue,
+ back: chalk.yellow,
+ forward: chalk.yellow,
+ reload: chalk.yellow,
+ wait: chalk.gray,
+ newpage: chalk.green,
+ close: chalk.red,
+ eval: chalk.magenta,
+};
+
+export function ts(): string {
+ return chalk.gray(`[${new Date().toISOString()}]`);
+}
+
+export function truncate(str: string, max: number): string {
+ return str.length > max ? `${str.slice(0, max)}...` : str;
+}
+
+export interface CommandLike {
+ cmd: string;
+ url?: string;
+ selector?: string;
+ text?: string;
+ path?: string;
+ full?: boolean;
+ ms?: number;
+ script?: string;
+}
+
+export function getCommandDetail(cmd: CommandLike): string | undefined {
+ switch (cmd.cmd) {
+ case 'goto':
+ return chalk.white(cmd.url);
+ case 'click':
+ case 'query':
+ return chalk.white(cmd.selector);
+ case 'type':
+ return `${chalk.white(cmd.selector)} ${chalk.dim(`="${cmd.text}"`)}`;
+ case 'screenshot':
+ return chalk.dim(cmd.path || 'screenshot.png');
+ case 'html':
+ return cmd.full ? chalk.dim('(full)') : undefined;
+ case 'wait':
+ return chalk.dim(`${cmd.ms || 1000}ms`);
+ case 'eval':
+ return chalk.dim(truncate(cmd.script || '', 50));
+ default:
+ return undefined;
+ }
+}
+
+export function formatCommand(cmd: CommandLike): string {
+ const color = cmdColor[cmd.cmd] || chalk.white;
+ const icon = icons[cmd.cmd] || '•';
+ const detail = getCommandDetail(cmd);
+ const suffix = detail ? ` ${detail}` : '';
+ return `${ts()} ${chalk.bold(color(icon))} ${color(cmd.cmd.toUpperCase())}${suffix}`;
+}
+
+export interface ResultLike {
+ ok: boolean;
+ error?: string;
+ title?: string;
+ url?: string;
+ count?: number;
+ path?: string;
+ html?: string;
+ result?: unknown;
+}
+
+const resultFormatters: Record<string, (r: ResultLike) => string | undefined> = {
+ goto: (r) => r.title,
+ click: (r) => (r.url ? `→ ${r.url}` : undefined),
+ query: (r) => (r.count !== undefined ? `Found ${r.count} element(s)` : undefined),
+ screenshot: (r) => (r.path ? `Saved to ${r.path}` : undefined),
+ url: (r) => r.url,
+ html: (r) => (r.html !== undefined ? `${r.html.length} chars` : undefined),
+ eval: (r) => (r.result !== undefined ? truncate(JSON.stringify(r.result), 80) : undefined),
+};
+
+export function formatResult(cmd: CommandLike, result: ResultLike): string {
+ if (!result.ok) {
+ return `${ts()} ${logSymbols.error} ${chalk.red(result.error)}`;
+ }
+ const formatter = resultFormatters[cmd.cmd];
+ const msg = formatter ? formatter(result) : undefined;
+ const suffix = msg ? ` ${chalk.dim(msg)}` : '';
+ return `${ts()} ${logSymbols.success}${suffix}`;
+}
+
+export type LogFn = (msg: string) => void;
+
+export function createLogger(logFn: LogFn = console.log) {
+ return {
+ command(cmd: CommandLike): void {
+ logFn(formatCommand(cmd));
+ },
+ result(cmd: CommandLike, result: ResultLike): void {
+ logFn(formatResult(cmd, result));
+ },
+ };
+}
+
+// Default logger to stdout
+export const logger = createLogger();
+
+// Logger to stderr (for MCP)
+export const stderrLogger = createLogger((msg) => process.stderr.write(`${msg}\n`));
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +3x +3x + + + +3x +3x +3x +3x + + + +3x +3x + + + +7x + + + +7x +7x +7x + +7x + + + + + + +7x +7x +7x + + + + + + + + + + + + + + + + + + + +1x +1x + + + +1x +1x + + + +2x + + + +7x + + + + + + + + + | import chalk from 'chalk';
+import express, { type Request, type Response } from 'express';
+import logSymbols from 'log-symbols';
+import { ClaudeBrowser } from './browser.js';
+import { logger, ts } from './logger.js';
+import type { BrowserCommand, BrowserOptions } from './types.js';
+
+export interface ServerOptions extends BrowserOptions {
+ port?: number;
+}
+
+function printBanner(port: number): void {
+ console.log();
+ console.log(chalk.cyan.bold(' 🌐 Claude Browse Server'));
+ console.log(chalk.dim(' ─────────────────────────'));
+ console.log(` ${logSymbols.success} Listening on ${chalk.bold(`http://localhost:${port}`)}`);
+ console.log();
+ console.log(chalk.dim(' Commands:'));
+ console.log(
+ ` ${chalk.cyan('goto')} ${chalk.yellow('click')} ${chalk.magenta('type')} ${chalk.blue('query')} ${chalk.green('screenshot')}`
+ );
+ console.log(
+ ` ${chalk.cyan('url')} ${chalk.blue('html')} ${chalk.yellow('back')} ${chalk.yellow('forward')} ${chalk.yellow('reload')} ${chalk.gray('wait')} ${chalk.red('close')}`
+ );
+ console.log();
+ console.log(chalk.dim(' Example:'));
+ console.log(
+ chalk.gray(` curl -X POST localhost:${port} -d '{"cmd":"goto","url":"https://example.com"}'`)
+ );
+ console.log();
+}
+
+export class BrowserServer {
+ private browser: ClaudeBrowser;
+ private app = express();
+ private server: ReturnType<typeof this.app.listen> | null = null;
+ private port: number;
+
+ constructor(options: ServerOptions = {}) {
+ this.browser = new ClaudeBrowser(options);
+ this.port = options.port ?? 13373;
+ this.setupMiddleware();
+ this.setupRoutes();
+ }
+
+ private setupMiddleware(): void {
+ this.app.use(express.json());
+ this.app.use(express.text({ type: '*/*' }));
+ }
+
+ private setupRoutes(): void {
+ this.app.post('/', (req, res) => this.handleCommand(req, res));
+ }
+
+ private async handleCommand(req: Request, res: Response): Promise<void> {
+ try {
+ const cmd: BrowserCommand = typeof req.body === 'string' ? JSON.parse(req.body) : req.body;
+ logger.command(cmd);
+
+ Iif (cmd.cmd === 'close') {
+ logger.result(cmd, { ok: true });
+ res.json({ ok: true });
+ await this.stop();
+ process.exit(0);
+ }
+
+ const result = await this.browser.executeCommand(cmd);
+ logger.result(cmd, result);
+ res.json(result);
+ } catch (err) {
+ const error = (err as Error).message;
+ console.log(`${ts()} ${logSymbols.error} ${chalk.red(error)}`);
+ res.status(500).json({ ok: false, error });
+ }
+ }
+
+ async start(): Promise<void> {
+ await this.browser.launch();
+
+ return new Promise((resolve) => {
+ this.server = this.app.listen(this.port, () => {
+ printBanner(this.port);
+ resolve();
+ });
+ });
+ }
+
+ async stop(): Promise<void> {
+ console.log(chalk.dim('\n Shutting down...'));
+ Iif (this.server) {
+ this.server.close();
+ this.server = null;
+ }
+ await this.browser.close();
+ console.log(` ${logSymbols.success} Browser closed\n`);
+ }
+
+ getPort(): number {
+ return this.port;
+ }
+
+ getApp() {
+ return this.app;
+ }
+}
+
+export async function startServer(options: ServerOptions = {}): Promise<BrowserServer> {
+ const server = new BrowserServer(options);
+ await server.start();
+ return server;
+}
+ |
+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 +69 +70 +71 +72 +73 +74 +75 +76 +77 +78 +79 +80 +81 +82 +83 +84 +85 +86 +87 +88 +89 +90 +91 +92 +93 +94 +95 +96 +97 +98 +99 +100 +101 +102 +103 +104 +105 +106 +107 +108 +109 +110 +111 +112 +113 +114 | + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | export interface BrowserOptions {
+ headless?: boolean;
+ width?: number;
+ height?: number;
+}
+
+export interface ElementInfo {
+ tag: string;
+ text: string;
+ attributes: Record<string, string>;
+}
+
+// Command types
+export interface GotoCommand {
+ cmd: 'goto';
+ url: string;
+}
+
+export interface ClickCommand {
+ cmd: 'click';
+ selector: string;
+}
+
+export interface TypeCommand {
+ cmd: 'type';
+ selector: string;
+ text: string;
+}
+
+export interface QueryCommand {
+ cmd: 'query';
+ selector: string;
+}
+
+export interface ScreenshotCommand {
+ cmd: 'screenshot';
+ path?: string;
+ fullPage?: boolean;
+}
+
+export interface UrlCommand {
+ cmd: 'url';
+}
+
+export interface HtmlCommand {
+ cmd: 'html';
+ full?: boolean;
+}
+
+export interface BackCommand {
+ cmd: 'back';
+}
+
+export interface ForwardCommand {
+ cmd: 'forward';
+}
+
+export interface ReloadCommand {
+ cmd: 'reload';
+}
+
+export interface WaitCommand {
+ cmd: 'wait';
+ ms?: number;
+}
+
+export interface NewPageCommand {
+ cmd: 'newpage';
+}
+
+export interface CloseCommand {
+ cmd: 'close';
+}
+
+export interface EvalCommand {
+ cmd: 'eval';
+ script: string;
+}
+
+export type BrowserCommand =
+ | GotoCommand
+ | ClickCommand
+ | TypeCommand
+ | QueryCommand
+ | ScreenshotCommand
+ | UrlCommand
+ | HtmlCommand
+ | BackCommand
+ | ForwardCommand
+ | ReloadCommand
+ | WaitCommand
+ | NewPageCommand
+ | CloseCommand
+ | EvalCommand;
+
+// Response types
+export interface SuccessResponse {
+ ok: true;
+ url?: string;
+ title?: string;
+ path?: string;
+ html?: string;
+ count?: number;
+ elements?: ElementInfo[];
+ result?: unknown;
+}
+
+export interface ErrorResponse {
+ ok: false;
+ error: string;
+}
+
+export type CommandResponse = SuccessResponse | ErrorResponse;
+ |