Claude Web MCP

克劳德代码Web自动化

一个全面的TypeScript/Playwright解决方案，用于以编程方式与Claude Code web界面交互，网址为https://claude.ai/code.

特性

核心自动化

• 浏览器自动化：与隐形模式的完全剧作家集成
• 认证：支持OAuth和传统登录流程
• 会话管理：使用cookie/本地存储保存的持久会话
• 验证码处理：集成2captcha求解器支持
• 请求拦截：API监控和修改功能

高级功能

• 会话池：管理多个并发会话
• 费率限制处理：智能节流和指数回退
• API提取：逆向工程和直接使用内部API
• WebSocket监控：实时代码更新和流媒体
• 突变观察者：动态内容跟踪

安装

npm install

# Install Playwright browsers
npx playwright install chromium

配置

创建一个 .env 文件：

TWOCAPTCHA_API_KEY=your_2captcha_key
CLAUDE_EMAIL=your_email (optional)
CLAUDE_PASSWORD=your_password (optional)

基本用法

import { ClaudeCodeAutomation } from './claude-code-automation';

const automation = new ClaudeCodeAutomation({
  headless: false,
  debugMode: true
});

await automation.initialize();
await automation.authenticate();

// Create a coding session
const session = await automation.createSession(
  'Create a TypeScript REST API with Express',
  {
    language: 'typescript',
    files: ['./requirements.md']
  }
);

// Send follow-up requests
await automation.sendRequest('Add authentication middleware');

// Submit a PR
const prUrl = await automation.submitPullRequest({
  title: 'feat: Add REST API implementation',
  description: 'Implements Express REST API with TypeScript',
  branch: 'feature/rest-api'
});

高级用法

会话池管理

高效处理多个并发会话：

import { ClaudeSessionPool } from './claude-code-advanced';

const pool = new ClaudeSessionPool(10, 5); // 10 sessions, 5 concurrent
await pool.initialize(browser);

// Execute tasks with automatic session management
const result = await pool.executeWithSession(async (context) => {
  const page = await context.newPage();
  // Your automation logic here
  return result;
});

API提取和直接请求

绕过浏览器以实现更快的操作：

import { ClaudeCodeAPIExtractor } from './claude-code-advanced';

const extractor = new ClaudeCodeAPIExtractor();
await extractor.extractFromBrowser(page);

// Make direct API calls
const sessionId = await extractor.createSessionAPI('Your prompt here');
const response = await extractor.sendMessageAPI(sessionId, 'Follow-up message');

费率限制处理

智能节流，避免达到极限：

import { RateLimitHandler } from './claude-code-advanced';

const rateLimiter = new RateLimitHandler();

if (rateLimiter.shouldThrottle('/api/messages')) {
  await rateLimiter.handleRateLimitResponse(response);
}

rateLimiter.recordRequest('/api/messages');

WebSocket实时监控

实时流式代码更新：

import { CodeStreamHandler } from './claude-code-advanced';

const stream = new CodeStreamHandler();
await stream.connect(sessionId, authToken);

stream.send({
  type: 'subscribe',
  channels: ['code-updates', 'execution-results']
});

集成示例

现有自动化系统

// Integrate with Skyvern
import { SkyvernClaudeIntegration } from './claude-code-examples';

const integration = new SkyvernClaudeIntegration(
  claudeAutomation,
  skyvernAPI
);

const script = await integration.generateAutomationScript(
  'Automate LinkedIn job applications with smart form detection'
);

工作申请自动化增强

import { enhanceJobApplicationAutomation } from './claude-code-examples';

const enhancedSession = await enhanceJobApplicationAutomation(automation);
// Your enhanced automation is ready with:
// - Improved field detection
// - Smart resume parsing
// - Answer generation
// - Success tracking

API方法

核心方法

先进的方法

事件处理

自动化类扩展了EventEmitter：

automation.on('oauth-required', async ({ page }) => {
  // Handle OAuth flow
});

automation.on('captcha-detected', async ({ page, type }) => {
  // Handle CAPTCHA
});

automation.on('rate-limited', async ({ endpoint, retryAfter }) => {
  // Handle rate limiting
});

最佳实践

1. 会话管理：始终保存会话以避免重新身份验证
2. 速率限制：使用会话池和智能节流
3. 错误处理：实施全面的try-catch块
4. 调试：为API监控启用调试模式
5. 验证码：为验证码挑战提供后备解决方案

架构说明

请求流

1. 浏览器自动化捕获API模式
2. 会话池管理并发操作
3. 速率限制器阻止API节流
4. WebSocket处理程序流式传输实时更新

安全考虑

• 本地存储的会话（建议加密）
• 安全处理OAuth令牌
• API密钥从未在代码中公开

故障排除

常见问题

1. 身份验证失败

- 检查OAuth配置 - 验证验证码求解器是否正常工作 - 确保正确保存/加载Cookie

1. 速率限制

- 减少并发会话 - 在请求之间实现更长的延迟 - 使用会话池

1. 动态内容

- 等待突变观察者 - 使用具有数据属性的适当选择器 - 实现重试逻辑

高级模式

自定义工具集成

// Add custom Claude Code tools
await automation.executeScript(() => {
  window.claudeTools = {
    customFormatter: (code) => {
      // Custom formatting logic
    },
    customValidator: (code) => {
      // Custom validation
    }
  };
});

批处理

const tasks = [...]; // Your tasks

for (const task of tasks) {
  await pool.executeWithSession(async (context) => {
    // Process task
  });
}

性能优化

1. 使用直接API：如果可能，使用提取的API而不是浏览器自动化
2. 缓存响应：对重复请求实施响应缓存
3. 并行执行：将会话池用于并发操作
4. 最小化DOM操作：批量更新并使用高效选择器

贡献

您可以通过以下方式扩展此解决方案：

• 其他身份验证方法
• 更复杂的速率限制
• 增强的错误恢复
• 自定义集成

许可证

麻省理工学院

备注

此解决方案专为您自己的Claude Code会话的合法自动化而设计。始终遵守服务条款和费率限制。