claude-playwright/dist/commands/mcp.js

Seamless integration between Claude Code and Playwright MCP for efficient browser automation and testing

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.createMcpCommand = createMcpCommand;
const commander_1 = require("commander");
const fs = __importStar(require("fs-extra"));
const path = __importStar(require("path"));
const chalk_1 = __importDefault(require("chalk"));
const os = __importStar(require("os"));
function createMcpCommand() {
    const mcp = new commander_1.Command('mcp');
    mcp
        .description('MCP (Model Context Protocol) server management for Claude Code')
        .action(() => {
        console.log(chalk_1.default.cyan('\n📡 MCP Server Commands:'));
        console.log('  claude-playwright mcp init     - Initialize MCP configuration');
        console.log('  claude-playwright mcp status   - Check MCP server status');
        console.log('  claude-playwright mcp docs     - Open MCP documentation\n');
    });
    mcp
        .command('init')
        .description('Initialize MCP configuration for Claude Code')
        .option('-b, --base-url <url>', 'Set base URL for browser automation', 'http://localhost:3000')
        .option('-f, --force', 'Overwrite existing configuration')
        .action(async (options) => {
        console.log(chalk_1.default.blue('\n🚀 Initializing MCP Configuration...\n'));
        const projectRoot = process.cwd();
        const mcpConfigPath = path.join(projectRoot, '.mcp.json');
        // Check if .mcp.json already exists
        if (fs.existsSync(mcpConfigPath) && !options.force) {
            console.log(chalk_1.default.yellow('⚠️  .mcp.json already exists. Use --force to overwrite.'));
            return;
        }
        // Create .mcp.json configuration - server runs directly from package
        // Try to find the MCP server in the package
        let mcpServerPath;
        try {
            // If installed as dependency
            const packageRoot = path.dirname(require.resolve('claude-playwright/package.json'));
            mcpServerPath = path.join(packageRoot, 'dist', 'mcp', 'server.cjs');
        }
        catch {
            // If running from linked package or development
            mcpServerPath = path.join(__dirname, '..', '..', 'dist', 'mcp', 'server.cjs');
        }
        // Check if server exists
        if (!fs.existsSync(mcpServerPath)) {
            console.error(chalk_1.default.red('✗ MCP server not found in package'));
            console.log(chalk_1.default.yellow('  Please ensure claude-playwright is properly installed'));
            return;
        }
        const mcpConfig = {
            mcpServers: {
                playwright: {
                    command: "node",
                    args: [mcpServerPath],
                    env: {
                        BASE_URL: options.baseUrl
                    }
                }
            }
        };
        try {
            fs.writeJsonSync(mcpConfigPath, mcpConfig, { spaces: 2 });
            console.log(chalk_1.default.green('✓ Created .mcp.json configuration'));
        }
        catch (error) {
            console.error(chalk_1.default.red('✗ Failed to create .mcp.json:'), error.message);
            return;
        }
        console.log(chalk_1.default.green('\n✅ MCP Configuration Complete!\n'));
        console.log(chalk_1.default.cyan('Next steps:'));
        console.log('1. Restart Claude Code to load the MCP server');
        console.log('2. Use /mcp command in Claude Code to verify connection');
        console.log('3. Start using browser automation tools!\n');
        console.log(chalk_1.default.dim('Available tools:'));
        console.log(chalk_1.default.dim('- browser_navigate, browser_click, browser_type'));
        console.log(chalk_1.default.dim('- browser_session_save, browser_session_restore'));
        console.log(chalk_1.default.dim('- browser_console_messages, browser_network_requests'));
        console.log(chalk_1.default.dim('- browser_screenshot, browser_evaluate, and more...'));
        console.log(chalk_1.default.dim('\nRun "claude-playwright mcp docs" for full documentation'));
    });
    mcp
        .command('status')
        .description('Check MCP server status and configuration')
        .action(() => {
        const projectRoot = process.cwd();
        const mcpConfigPath = path.join(projectRoot, '.mcp.json');
        console.log(chalk_1.default.blue('\n🔍 MCP Server Status\n'));
        // Check .mcp.json
        if (fs.existsSync(mcpConfigPath)) {
            console.log(chalk_1.default.green('✓ .mcp.json found'));
            try {
                const config = fs.readJsonSync(mcpConfigPath);
                const baseUrl = config.mcpServers?.playwright?.env?.BASE_URL || 'Not set';
                console.log(chalk_1.default.gray(`  BASE_URL: ${baseUrl}`));
            }
            catch (error) {
                console.log(chalk_1.default.red('  Error reading configuration'));
            }
        }
        else {
            console.log(chalk_1.default.red('✗ .mcp.json not found'));
            console.log(chalk_1.default.yellow('  Run "claude-playwright mcp init" to create it'));
        }
        // Check if package is installed
        try {
            require.resolve('claude-playwright');
            console.log(chalk_1.default.green('✓ MCP server available (from package)'));
        }
        catch {
            console.log(chalk_1.default.yellow('✓ MCP server will run via npx'));
        }
        // Check sessions directory
        const sessionsDir = path.join(os.homedir(), '.claude-playwright', 'sessions');
        if (fs.existsSync(sessionsDir)) {
            const sessions = fs.readdirSync(sessionsDir)
                .filter(f => f.endsWith('.session.json'))
                .map(f => f.replace('.session.json', ''));
            console.log(chalk_1.default.green(`✓ Sessions directory found`));
            if (sessions.length > 0) {
                console.log(chalk_1.default.gray(`  Saved sessions: ${sessions.join(', ')}`));
            }
            else {
                console.log(chalk_1.default.gray('  No saved sessions'));
            }
        }
        else {
            console.log(chalk_1.default.yellow('✓ Sessions directory will be created on first use'));
        }
        console.log(chalk_1.default.cyan('\n📝 Notes:'));
        console.log('- Restart Claude Code after making configuration changes');
        console.log('- Use /mcp command in Claude Code to test connection');
        console.log('- Sessions are stored globally and shared across projects\n');
    });
    mcp
        .command('docs')
        .description('Open MCP server documentation')
        .action(() => {
        const docsPath = path.join(__dirname, '..', '..', 'docs', 'MCP_SERVER.md');
        if (fs.existsSync(docsPath)) {
            console.log(chalk_1.default.blue('\n📚 MCP Server Documentation\n'));
            console.log(chalk_1.default.cyan('Opening documentation...\n'));
            // Copy docs to current directory for easy access
            const localDocsPath = path.join(process.cwd(), 'MCP_DOCUMENTATION.md');
            fs.copySync(docsPath, localDocsPath);
            console.log(chalk_1.default.green(`✓ Documentation copied to: ${localDocsPath}`));
            console.log(chalk_1.default.gray('\nYou can also view it online at:'));
            console.log(chalk_1.default.blue('https://github.com/smartlabsAT/claude-playwright/blob/main/docs/MCP_SERVER.md\n'));
        }
        else {
            console.log(chalk_1.default.red('Documentation file not found'));
        }
    });
    return mcp;
}
//# sourceMappingURL=mcp.js.map