1. Orientierung für Ihre Modernisierung
Dieses umfassende Codelab ist das praktische Begleit-Lab, das direkt aus dem detaillierten Artikel zur Architektur „Modernisierung mit Antigravity und Multi-Agent-Orchestrierung automatisieren“ abgeleitet wurde. Wir verwenden zwar einen klassischen Node.js-Framework-Austausch als konkretes Demonstrationsbeispiel, aber die grundlegenden Designmuster, Verzeichnisstrukturen und agentenbasierten Orchestrierungsprozesse, die Sie hier kennenlernen, sind völlig sprachunabhängig und universell auf jedes Modernisierungsprojekt im großen Maßstab anwendbar.
Im Gegensatz zu herkömmlichen Coding-Assistenten, die lediglich Zeilen in einer einzelnen Datei vervollständigen, erfahren Sie hier, wie Sie die agentenbasierten Funktionen von Google Antigravity nutzen können, um autonome Teams aus spezialisierten KI-Unteragenten zu orchestrieren. Diese Agenten können unabhängig voneinander Legacy-Codebasen per Reverse Engineering analysieren, strenge Testsuiten schreiben, moderne Architekturen erstellen und ihre eigenen Compilerfehler mithilfe von Reflexionsschleifen selbst korrigieren. Dabei behalten Sie als übergeordneter Architekt die absolute Kontrolle.
Lerninhalte
- Workflow abbilden: Deterministische Einrichtungsaufgaben korrekt von komplexen heuristischen Refaktorierungsaufgaben klassifizieren und trennen.
- Fähigkeitenarchitektur: Ein erweiterbares Agent Skills Pack mithilfe von Progressive Disclosure und YAML-Routing-Metadaten strukturieren.
- Designmuster orchestrieren: Refaktorierung im großen Maßstab durch Verknüpfen der Designmuster „Router“, „Planen und Ausführen“ und „Reflexion“ vorantreiben.
- Strenge Input-/Output-Verträge: Klare Input-/Fähigkeiten-/Output-Grenzen in mehrphasigen Reverse-Engineering- und Ziel-Scaffolding-Pipelines durchsetzen.
- Paritätsprüfung: Den Browser-Unteragenten von Antigravity nutzen, um vergleichende Paritätstests im Chrome-Webbrowser durchzuführen.
Aufgaben
Sie orchestrieren eine vollständig automatisierte Greenfield-Refaktorierungs-Pipeline, die den bekannten, veralteten Legacy-Express- und Mongoose-CRUD-Monolithen (die „madhums demo“) nimmt und ihn autonom von Grund auf in eine streng typisierte Next.js-App-Router-Anwendung umwandelt, die auf MongoDB, strenger Zod-Validierung und zugänglichen ShadCN-UI-Komponenten basiert.
Voraussetzungen
- Google Antigravity IDE lokal installiert (verfügbar unter antigravity.google).
- Node.js (Version 18 oder höher) lokal installiert.
- Chrome-Browser für die automatisierte UI-Überprüfung.
- Ein Klon des Open-Source-Demonstrations-Monorepos für die Modernisierung von Express.js.
2. Modernisierungsumgebung einrichten
Bevor wir autonome Agenten auf eine veraltete Legacy-Codebasis loslassen, müssen wir eine saubere, hochstabile Monorepo-Umgebung einrichten. Wenn ein KI-Assistent eine saubere Baseline hat, kann er sich ganz auf die Generierung von hochwertigem modernem Code konzentrieren, anstatt Tokens für die Behebung von Jahrzehnte alten Paketlücken oder Compiler-Inkompatibilitäten zu verschwenden.
Zuordnung von Legacy-Express zu moderner Next.js-Architektur
Komponente | Legacy-Stack | Moderne Alternative | Rationale |
Architektur | Express-Monolith | Next.js-App-Router | Entkopplung der Logik in Serverkomponenten für optimiertes Rendering und verbesserte Leistung von React Server Components (RSC). |
Datenlogik | Mongoose (ODM) | MongoDB + Zod | Ersetzen von impliziten ORM-Hooks durch explizite, typsichere Zod-Schemas und Rohleistung des Treibers. |
Sprache | CommonJS / JavaScript | TypeScript (ESM) | Durchsetzen der Kompilierzeitsicherheit und Umstellung auf moderne Modulstandards. |
Frontend | Pug/EJS (Serveransicht) | ShadCN UI + Tailwind | Umstellung von starren Vorlagen auf ein zusammensetzbares, zugängliches und Utility-First-Designsystem. |
Authentifizierung | Passport.js | NextAuth | Modernisierung der Sitzungsverwaltung mit integrierter Unterstützung für Edge und aktuelle Anbieter. |
Sicherheit | Manuelle Middleware | Zod (strenge Validierung) | Implementierung einer „Single Source of Truth“ für die Datenvalidierung im gesamten Stack. |
Modernisierungs-Hub initialisieren
Unsere erste deterministische Aktion besteht darin, die isolierte Monorepo-Struktur zu klonen. Dadurch wird der schreibgeschützte Legacy-Code von unserem neuen Greenfield-Ziel-Repository getrennt, sodass keine versehentlichen Änderungen an der ursprünglichen Anwendung vorgenommen werden können.
Öffnen Sie das Antigravity-Terminal und führen Sie die folgenden Einrichtungsbefehle aus:
git clone https://github.com/GoogleCloudPlatform/devrel-demos.git cd devrel-demos/other/modernizing-expressjs
Öffnen Sie nach dem Klonen den Ordner modernizing-expressjs direkt im Antigravity IDE-Explorer. Sie sehen das folgende isolierte Layout:
/modernizing-expressjs/ ├── .agents/ # Skills metadata and checklists │ └── skills/ ├── docs/ # Target directory for reverse-engineered markdown artifacts ├── legacy-app/ # Read-only root of the legacy Express monolith ├── modern-app/ # Greenfield target repository for the Next.js rewrite ├── GEMINI.md # Project-wide agent constitution └── README.md # Companion documentation
In diesem kurzen Video erfahren Sie, wie Sie Ihre Monorepo-Umgebung deterministisch vorbereiten und isolieren:
3. KI-Agent-Skills-Packs und -Muster entwerfen
Das Erstellen einer robusten Agentenfähigkeit unterscheidet sich grundlegend vom Schreiben eines Standard-Chat-Prompts. Wenn Sie ein Skill Pack erstellen, entwerfen Sie ein modulares Softwarestück, das von einem zugrunde liegenden LLM autonom ausgeführt wird. Um zu verhindern, dass der Agent halluziniert oder unter der "Kontextfenster-Tax" leidet, führen wir das Open-Source Skill Pack für die Greenfield-Orchestrierung als erweiterbare Autorenschaftsvorlage ein, die auf zwei nicht verhandelbaren Prinzipien basiert: Prägnanz und Progressive Disclosure.
Progressive Disclosure mit YAML-Metadaten-Routing
Anstatt alle Zielregeln in einen einzigen monolithischen System-Prompt zu packen, verteilen wir die Anweisungen auf mehrere Verzeichnisse. Jedes Skill-Verzeichnis enthält einen SKILL.md-Einstiegspunkt, der in einen YAML-Routing-Frontmatter-Block eingeschlossen ist.
Öffnen Sie .agents/skills/orchestrating-greenfield-migration/SKILL.md und prüfen Sie die Router-Metadaten:
---
name: orchestrating-greenfield-migration
description: >
Manages the end-to-end modernization of legacy Express
monoliths into Next.js architectures. Orchestrates subagents
for auditing, scaffolding, and verification. Use when starting
or managing a greenfield rewrite project.
---
Das Muster „Planen und Ausführen“ fest codieren
Um zu verhindern, dass ein autonomer Agent abdriftet, sich von interessanter Legacy-Middleware ablenken lässt oder versucht, nicht autorisierte Datenbank-Swaps durchzuführen, überschreiben wir die standardmäßige offene Planung, indem wir das Muster Planen und Ausführen direkt in die Anweisungen fest codieren.
Prüfen Sie die wörtliche Markdown-Checkliste, die in den Haupt-Orchestrator eingebettet ist:
### Phase 1: The AI audit (reverse engineering)
Dispatch subagents to produce specifications while identifying project-specific test scenarios.
* [ ] Init `docs/verification/Verification_Plan.md` to create baseline template.
* [ ] Run `auditing-data-models` -> Append Data Integrity Stress-Tests.
* [ ] Run `auditing-api-contracts` -> Append API Parity & Edge Case Probes.
* [ ] Run `auditing-business-logic` -> Append Logic & Authorization Stress-Tests.
* [ ] Run `auditing-ui-archeology` -> Append Interaction & Layout Targets.
Indem wir den Workflow als explizite Checkliste mit Inline-Skill-Referenzen formatieren, kopiert der Agent diese genaue Roadmap in seinen Aufgabenplan und versetzt sich in einen Modus, in dem er nur Aufgaben ausführt. Dabei werden systematisch Kästchen abgehakt und hochspezialisierte Unteragenten genau dann aufgerufen, wenn sie benötigt werden.
4. Phase 1: Reverse Engineering des Legacy-Monolithen (Audit)
Wir sind bereit, unsere Haupt-Orchestrierungssequenz auszulösen. In der ersten Hauptphase werden die Geschäftsregeln, Datenschemas und API-Nutzlasten aus dem Legacy-Monolithen extrahiert und als saubere Markdown-Artefakte gespeichert. Dabei wird ein Jahrzehnt an imperativen technischen Schulden hinter sich gelassen.
Autonome Refaktorierungssequenz auslösen
Geben Sie im Chatfenster des Antigravity Agent Manager den folgenden benutzerdefinierten Slash-Befehl ein und drücken Sie die Eingabetaste:
/orchestrating-greenfield-migration
Beobachten Sie nun Ihre Terminalkonsole. Sie sehen, wie der Hauptagent seinen System-Prompt liest, Ihre Anfrage mit den Metadaten des Orchestrators abgleicht, die 5-Phasen-Checkliste ausgibt und sofort parallel spezialisierte „Auditor“-Unteragenten entsendet.
Der Anweisungsvertrag für Input/Fähigkeit/Output
In Phase 1 führt der Agent eine strenge Reverse-Engineering-Pipeline aus, die an den folgenden Anweisungsvertrag gebunden ist:
Verwendete Eingaben: Schreibgeschützte Legacy-Quellcodedateien in legacy-app/.
Aufgerufene Fähigkeiten:
Fähigkeit | Beschreibung |
| Verfolgt Legacy-Routen, um genaue JSON-Antwort-Envelopes zu dokumentieren. |
| Zerlegt Mongoose-Schemas, um Beziehungen, Pflichtfelder und Standardwerte zu extrahieren. |
| Dokumentiert implizite Nebeneffekte, Passport-Authentifizierungsabläufe und Middleware-Regeln. |
| Scannt Legacy-Pug-Vorlagen, um die übergeordnete „UI-Absicht“ (Navigationsleisten, Formulare) abzubilden. |
Erstellte Artefakte: Hochstrukturierte Markdown-Spezifikationen, die direkt in Ihrem docs/ Ordner generiert werden
Artefakt | Beschreibung |
| In diesem Dokument wird der per Reverse Engineering analysierte API-Bereich der Legacy-Express-Anwendung beschrieben. Verwenden Sie diesen Katalog, um beim Neuerstellen von Routen in der modernisierten Next.js-Anwendung eine strenge Parität zu gewährleisten. |
| In diesem Dokument werden die verifizierten Verhaltensweisen, Konfigurationen und strengen Regeln der Legacy-Express-Anwendung in Bezug auf Authentifizierung (AuthN), Autorisierung (AuthZ), globale Middleware, Sitzungsverwaltung und Nebeneffekte protokolliert. |
| Dieses Dokument enthält eine umfassende Analyse der Legacy-Mongoose-Schemas aus |
| Dieses Dokument enthält eine detaillierte Analyse der Legacy-Pug-basierten Benutzeroberfläche in |
Sehen Sie sich diese Live-Terminalaufzeichnung an, die den autonomen Reverse-Engineering-Audit in Aktion zeigt:
5. Phase 2 und 3: TDD-Harness und Greenfield-Backend-Scaffolding
Nachdem die Legacy-Anwendung vollständig geprüft und dokumentiert wurde, fährt der Haupt-Orchestrator mit dem Scaffolding des modernen Ziel-Backends fort. In dieser Phase wird das leistungsstärkste agentenbasierte Designmuster in unserem Toolkit eingeführt: die Closed-Loop-Reflexion (Selbstreflexion), die durch strenge testgetriebene Entwicklung (Test-Driven Development, TDD) gesteuert wird.
Selbstheilenden Code mit Reflexionsschleifen erstellen
Das Schreiben von modernem Code ist einfach. Um sicherzustellen, dass er perfekt kompiliert wird und strenge Validierungsbeschränkungen erfüllt, ist eine Closed-Loop-Bewertung erforderlich. Der Orchestrator erledigt dies autonom, indem er die Testausgabe direkt in das Kontextfenster des Unteragenten weiterleitet:
- Phase 2 (TDD-Einrichtung): Der Orchestrator ruft den
generating-api-testsUnteragenten auf, derdocs/API_Contracts.mdliest und umfassende Vitest-Integrationstestsuiten schreibt, die die genauen erforderlichen HTTP-Statuscodes und JSON-Nutzlasten bestätigen. Wie bei TDD erwartet, schlagen diese Tests zunächst fehl. - Phase 3 (Backend-Scaffolding): Scaffolding-Unteragenten beginnen mit dem Schreiben moderner Next.js-Routenhandler und strenger Zod-Validierungsschemas.
- Selbstkorrekturschleife: Wenn das deterministische Vitest-Harness den neuen Code bewertet und einen Fehler zurückgibt (z.B. ein erwarteter
422Validierungsfehler gibt500zurück), stürzt der Agent nicht ab. Er reflektiert die objektive Fehlerausgabe, öffnet den Zielroutenhandler erneut, korrigiert die Zod-Schema-Nutzlaststruktur und führt die Tests noch einmal aus. Er wiederholt den Vorgang autonom, bis ein Exit-Code von0erreicht wird.
Der Anweisungsvertrag für Input/Fähigkeit/Output
Verwendete Eingaben: Per Reverse Engineering analysierte Spezifikationsartefakte (docs/API_Contracts.md, docs/Data_Models.md).
Aufgerufene Fähigkeiten:
Fähigkeit | Beschreibung |
| Generiert fehlgeschlagene Vitest-Integrationssuiten. |
| Initialisiert das grundlegende Next.js-App-Router-Layout. |
| Konfiguriert die lokale Vitest-Testrunner-Umgebung. |
| Übersetzt alte Mongoose-Modelle in MongoDB- und Zod-Schemas. |
| Erstellt Express-Routen neu in Next.js-Routenhandler und modulare Routenguards. |
Erstellte Ausgaben: Erste fehlgeschlagene Vitest-Suiten, vollständig typisierte Zod-Schemas, funktionale Next.js-Routenhandler und saubere, erfolgreiche Testsuitenausführungen.
Beobachten Sie die automatisierte Generierung des TDD-Test-Harness:
Beobachten Sie die Echtzeitausführung der selbstkorrigierenden Reflexionsschleife, die das Ziel-Backend erstellt:
6. Phase 4: Modernes Frontend erstellen (UI-Komponenten)
Nachdem die Backend-Validierungsschicht vollständig gehärtet wurde und die Integrationstests bestanden hat, wechselt der Haupt-Orchestrator den Kontext, um die visuelle Darstellung zu modernisieren. Imperative serverseitig gerenderte Vorlagen werden zugunsten eines hochgradig zugänglichen, Utility-First-Komponentendesignsystems verworfen.
UI-Absicht in zusammensetzbare Ansichten übersetzen
Anstatt eine zeilenweise CSS-Übersetzung zu versuchen, liest der Frontend-Unteragent das extrahierte „UI-Absicht“-Inventar und ordnet strukturelle Elemente direkt modernen Entsprechungen mit hoher Genauigkeit zu.
Der Anweisungsvertrag für Input/Fähigkeit/Output
Verwendete Eingaben: Das per Reverse Engineering analysierte Frontend-Inventarartefakt (docs/UI_Inventory.md).
Aufgerufene Fähigkeiten:
Fähigkeit | Beschreibung |
| Übersetzt ein |
Erstellte Ausgaben: Produktionsbereite Next.js-Frontend-Seiten, die mit hochgradig zugänglichen ShadCN-UI-Komponenten und Tailwind CSS-Utility-Layouts erstellt wurden.
Beobachten Sie die autonome Generierung der modernisierten Frontend-Ansichtsschicht:
7. Phase 5: Überprüfung und Adversarial Auditing
Unsere Refaktorierungs-Pipeline endet mit einer strengen Qualitätsprüfung. Der Haupt-Orchestrator wechselt von der statischen Codeanalyse zu aktiven Tests der Laufzeitumgebung und versucht aktiv, die neue Zielanwendung zu zerstören, um die absolute funktionale Parität mit der Legacy-Baseline nachzuweisen.
Ausführung des Zwei-Tab-Tests und Browseraktivierung
In der Überprüfungsphase werden die integrierten visuellen und DOM-Funktionen von Antigravity genutzt, um den Erfolg autonom nachzuweisen, ohne dass Sie manuell durch Formulare klicken müssen:
- Vergleichende Parität: Der
auditing-parityUnteragent weist den lokalen Runner an, sowohl den Legacy-Express-Monolithen als auch die modernisierte Next.js-Anwendung gleichzeitig zu starten und die identische visuelle Darstellung und das Datenrendering zu überprüfen. - Adversarial Security Probing: Der Orchestrator ruft den
adversarial-verificationUnteragenten auf, der den Antigravity Browser Subagent startet. Dieser spezialisierte Agent aktiviert den Browser direkt, gibt Eingaben ein, sendet Formulare und sucht nach Sicherheitsregressionen, fehlerhaften Sitzungscookies oder nicht behandelten Edge-Cases. - Audit-Trail-Generierung: Der Browser-Unteragent zeichnet automatisch WebP-Videoaufnahmen seiner Sitzungsaktivierungen auf und hängt sie als nachweisbaren "Arbeitsnachweis" direkt an den endgültigen Migrationsbericht an.
Der Anweisungsvertrag für Input/Fähigkeit/Output
Verwendete Eingaben: Sowohl Legacy- als auch moderne Anwendungen, die parallel in lokalen Laufzeitumgebungen ausgeführt werden.
Aufgerufene Fähigkeiten:
Fähigkeit | Beschreibung |
| Führt vergleichende Überprüfungen zur Laufzeit aus. |
| Sucht mithilfe der automatisierten Browseraktivierung nach Logikfehlern und funktionalen Regressionen. |
Erstellte Ausgaben: Ein umfassender Audit-Trail zur funktionalen Parität in Kombination mit aufgezeichneten Browser-Sitzungsvideos, die den vollständigen Erfolg bestätigen.
Beobachten Sie, wie der automatisierte Browser-Unteragent die modernisierte Anwendung aktiv überprüft:
8. Produktionsbereitschaft nach der Migration und nächste Schritte
Glückwunsch! Sie haben erfolgreich eine hochentwickelte, autonome agentenbasierte Refaktorierungs-Pipeline orchestriert, um einen Legacy-Monolithen von Grund auf zu modernisieren. Dabei haben Sie universelle, hochgradig übertragbare Fähigkeiten wie Progressive Disclosure, Checklisten für „Planen und Ausführen“ und selbstheilende Reflexionsschleifen erlernt.
Vorbereitung auf die Produktionsbereitstellung
Nachdem Ihre Next.js-Anwendung vollständig überprüft und geprüft wurde, können Sie mit der Produktionsintegration fortfahren. Erwägen Sie die Implementierung dieser branchenüblichen nächsten Schritte:
- Inkrementelles Routing: Stellen Sie einen Reverseproxy bereit (z.B. das Strangler Fig-Muster), um den Traffic inkrementell von der Legacy-Express-App zum modernen Ziel weiterzuleiten.
- SEO-Beibehaltung: Ordnen Sie Legacy-Express-Routen permanenten Next.js-Weiterleitungen (
_redirects.yaml) zu, um die vorhandene Domainautorität beizubehalten. - Datenstreaming: Wechseln Sie von der statischen Datenbank-Seeding zum Live-Produktionsdatenstreaming, das zur Laufzeit mit strengen Zod-Schemas sicher validiert wird.
- Beobachtbarkeit: Ersetzen Sie imperative Logging-Dienstprogramme durch strukturierte OpenTelemetry-Frameworks.
Modernisierungsexpertise vertiefen
Wenn Sie die vollständigen zugrunde liegenden Codebasen, benutzerdefinierten Skill-Anweisungen und die umfassende theoretische Begründung für diese Pipeline kennenlernen möchten, lesen Sie den vollständigen übergeordneten Artikel:
Der Agentic Builder-Community beitreten
Ich hoffe, diese universellen Refaktorierungsmuster und agentenbasierten Pipelines waren für Sie hilfreich. Wenn Sie über zukünftige Open-Source-Skill Packs, detaillierte technische Inhalte und anstehende Konferenzvorträge auf dem Laufenden bleiben möchten, folgen Sie mir auf den folgenden professionellen Kanälen:
- Auf LinkedIn folgen: linkedin.com/in/jamesor
- Auf X (Twitter) folgen: x.com/JamesOR
Sag uns deine Meinung
Was begeistert Sie am meisten an der agentenbasierten Orchestrierung?
Vielen Dank, dass Sie Google Antigravity nutzen!