Reverse Engineer Anything: открытый MCP-инструмент для клонирования приложений в Claude Code

Сколько раз ты, наткнувшись на элегантный виджет в чужом веб-сервисе — будь то интерактивный календарь бронирования встреч, сложный аудиовизуализатор или плавный рекордер экрана — ловил себя на мысли: «Хочу такую же штуку в свой проект»?

Раньше путь к этому лежал через многочасовую рутину: открыть DevTools, копаться в сетевых запросах во вкладке Network, распутывать обфусцированный минифицированный JavaScript и вручную проектировать структуры данных. Мы уже обсуждали, как устроен вирусный MCP-сервер Reverse Engineer Anything и почему обратный инжиниринг удается ИИ-агентам лучше прямого проектирования с нуля.

Сегодня давай разберем практическую сторону открытого репозитория Reverse Engineer Anything (REA) (morluto/rea) от разработчика morluto и посмотрим, как независимые исследователи Nate Herk и Julian Goldie используют его в связке с Claude Code для воссоздания реальных компонентов.

Пятиэтапный алгоритм обратной разработки

Инструмент REA подключается к Claude Code как сервер Model Context Protocol (MCP). Вместо хаотичных попыток «угадать код по скриншоту», агент выполняет строгий пятиэтапный протокол исследования:

1. Поведенческий анализ (Behavioral Analysis): фиксация пользовательских сценариев, триггеров и изменений состояний интерфейса.
2. Сбор артефактов (Artifact Extraction): захват структуры DOM, CSS-переменных, шрифтов, локальных ассетов и перехваченных сетевых пакетов.
3. Парсинг строк и эндпоинтов (String & Endpoint Mining): поиск внутренних сигнатур API, скрытых маршрутов и формата заголовков запросов.
4. Декодирование контрактов данных (Data Contract Decoding): автоматическая реконструкция интерфейсов TypeScript и JSON-схем полезной нагрузки (Payload).
5. Синтез кода (Code Synthesis & Edge-Case Hardening): генерация чистого, типизированного компонента на современном стеке (React, Tailwind, TypeScript) с обработкой пограничных состояний.

В тестах Julian Goldie агент за пару минут декомпилировал логику слотов доступности интерактивного календаря бронирования в стиле Calendly. А Nate Herk протестировал REA на разборе расширения видеозаписи экрана в стиле Loom: агент вытащил обращение к браузерному API navigator.mediaDevices.getDisplayMedia, настроил запись потока и собрал работающий компонент.

Подключение навыка к Claude Code

Для интеграции REA в рабочее окружение достаточно прописать MCP-сервер в настройках навыков Claude Code:

{
  "name": "reverse-engineer-anything",
  "version": "1.2.0",
  "description": "Пошаговая обратная разработка веб-интерфейсов и логики приложений",
  "mcpServers": {
    "rea": {
      "command": "npx",
      "args": ["-y", "@morluto/rea-mcp-server"],
      "env": {
        "REA_WORK_DIR": "./.rea-cache",
        "REA_LOG_LEVEL": "debug"
      }
    }
  }
}

После этого запуск декомпиляции выполняется прямой инструкцией в терминале Claude Code CLI:

claude "Используя навык REA, декомпилируй функционал виджета записи экрана:
1. Исследуй HTML/JS артефакт в папке ./reference-app.
2. Извлеки методы захвата медиапотока getDisplayMedia и композиции видео.
3. Сгенерируй чистый React-компонент ScreenRecorder.tsx с типизацией TypeScript.
4. Добавь корректную обработку отказа пользователя в выдаче разрешений."

Результат синтеза: чистый компонент на TypeScript

Вот фрагмент чистого рабочего компонента ScreenRecorder.tsx, который агент генерирует по итогам декомпиляции собранных артефактов:

import React, { useState, useRef } from 'react';

export const ScreenRecorder: React.FC = () => {
  const [isRecording, setIsRecording] = useState(false);
  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
  const chunksRef = useRef<Blob[]>([]);

  const startCapture = async () => {
    try {
      const stream = await navigator.mediaDevices.getDisplayMedia({
        video: { frameRate: 60 },
        audio: true
      });
      const recorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp9' });
      recorder.ondataavailable = (e) => { 
        if (e.data.size > 0) chunksRef.current.push(e.data); 
      };
      recorder.onstop = () => {
        const completeBlob = new Blob(chunksRef.current, { type: 'video/webm' });
        const videoUrl = URL.createObjectURL(completeBlob);
        console.log("Запись сформирована:", videoUrl);
      };
      recorder.start(1000);
      mediaRecorderRef.current = recorder;
      setIsRecording(true);
    } catch (err) {
      console.error("Отказ в доступе к экрану или ошибка API:", err);
    }
  };

  return (
    <div className="p-4 rounded-xl bg-zinc-900 text-white border border-zinc-800">
      <h3 className="font-semibold text-lg mb-2">Автономный рекордер экрана</h3>
      <button 
        onClick={isRecording ? () => mediaRecorderRef.current?.stop() : startCapture}
        className={`px-4 py-2 rounded-lg font-medium transition ${
          isRecording ? 'bg-rose-600 hover:bg-rose-500' : 'bg-indigo-600 hover:bg-indigo-500'
        }`}
      >
        {isRecording ? 'Остановить запись' : 'Начать запись экрана'}
      </button>
    </div>
  );
};

Границы возможностей инструмента

Чего REA сделать не сможет? Агент не способен заглянуть на закрытый бэкенд сервера. Если вся бизнес-логика выполняется в закрытой базе данных или микросервисах на AWS, агент восстановит только формат входящих и исходящих JSON-пакетов, но внутренние алгоритмы сервера останутся «черным ящиком».

Однако для клиентского фронтенда, расширений Chrome и автономных виджетов связка REA с Claude Code экономит колоссальное количество инженерных часов.