00:00:00Aufgrund des Arbeitsumfangs und der verschiedenen beteiligten Rollen war Engineering schon immer ein sehr kollaborativer Prozess.
00:00:05Dies hat sich durch KI geändert, bringt aber gleichzeitig neue Wege der Zusammenarbeit mit sich.
00:00:09Verschiedene Modelle haben unterschiedliche Stärken, entweder in ihren Rollen oder bei den Kosten.
00:00:13Nehmen wir ein Beispiel.
00:00:14Es ist eine bekannte Tatsache, dass die neuesten Gemini-Modelle wirklich großartig im Designen sind.
00:00:18Sie sind weitaus kreativer als jedes Claude-Modell, besonders wenn man ihnen weniger Anweisungen gibt.
00:00:23Aber insgesamt ist Opus 4.6 ein herausragendes Modell,
00:00:26besonders mit Claude Code als Tooling drumherum, was ein viel stabileres Werkzeug als das Gemini CLI ist.
00:00:31Aber es gibt keinen effizienten Weg, diese gemeinsam in einem geteilten Workflow zu nutzen.
00:00:35Selbst wenn man es versucht, muss man vieles manuell erledigen,
00:00:38und es gibt keine Möglichkeit, diese Agenten autonom arbeiten zu lassen.
00:00:41Kürzlich sind wir auf ein Tool gestoßen, das dieses Kommunikationsproblem löst, indem es verschiedene
00:00:46Agenten mit unterschiedlichen Modellen miteinander chatten lässt und uns aus der Mitte entfernt.
00:00:50Agent Chatter ist ein Chat-Interface zur Echtzeit-Koordination von KI-Agenten.
00:00:55Es unterstützt die drei beliebtesten Agenten wie Claude Code, das Gemini CLI und Codex,
00:01:00sowie Open-Source-Modelle wie Kimi, Qwen und weitere.
00:01:03Man kann es auch zur Kostensenkung nutzen, indem man teure Agenten wie Claude die Planung überlässt
00:01:07und Kimi oder GLM die Implementierung ausführen lässt.
00:01:10Es nutzt einen gemeinsamen Chat mit mehreren Kanälen und lässt die Agenten miteinander sprechen,
00:01:14um Features koordiniert zu implementieren.
00:01:16Unser erster Eindruck von dem Tool war, dass die Standard-UI nicht besonders ausgefeilt wirkte.
00:01:20Da es sich um ein Open-Source-Projekt handelt, haben wir das Original-Repo geforkt und eine
00:01:24visuelle Ebene darübergelegt, die für uns viel besser aussieht und einfacher zu bedienen ist,
00:01:28mit bestimmten Änderungen, die unseren Bedürfnissen entsprechen.
00:01:31Wir haben diese Version in unser geforktes Repo hochgeladen, während die ursprüngliche Funktionalität intakt blieb.
00:01:35Aber die ganze Anerkennung für die zugrunde liegende Architektur dieser Plattform gebührt dem ursprünglichen Ersteller.
00:01:40Dieses Projekt enthält eigentlich eine Reihe von Skripten,
00:01:43die man einmal ausführen muss, um die Agenten für dieses Tool zu initialisieren.
00:01:46Diese Skripte sind die Einstiegspunkte zum Betrieb des Systems,
00:01:49und ohne sie kann man keinen Agenten starten.
00:01:51Um auf diese Skripte zuzugreifen, müssen Sie das gesamte Repo klonen.
00:01:54Das Repo enthält so ziemlich Skripte, um alle Agenten separat zu initialisieren.
00:01:58Bevor Sie die Skripte nutzen, müssen Sie unter macOS oder Linux TMUX installiert haben.
00:02:02TMUX ist im Grunde ein Terminal-Multiplexer.
00:02:05Er ermöglicht es, mehrere Terminal-Sitzungen zu erstellen und alle von einem einzigen Punkt aus zu steuern.
00:02:09Das ist es, was der Agenten-Chat im Hintergrund nutzt,
00:02:11um Aufgaben an jeden laufenden Terminal-Agenten zu senden.
00:02:14Windows-Nutzer können die Skripte direkt ausführen, das wird bei euch funktionieren.
00:02:18Sie haben alle Befehle zum Ausführen der Skripte jedes Agenten aufgelistet.
00:02:21Wenn Sie zum Beispiel Claude Code und das Gemini CLI zusammen verwenden wollen,
00:02:26kopieren Sie die Befehle und fügen sie im Terminal in dem Ordner ein, in dem Sie das Repo geklont haben.
00:02:31Sie können die Befehle für die Agenten auswählen, die Sie ausführen möchten.
00:02:34Sobald Sie den Befehl einfügen, wird eine Agenten-Sitzung in der TMUX-Session gestartet.
00:02:38Sie können so viele Agenten in Ihrem Setup verwenden, wie Sie möchten.
00:02:40Zum Beispiel könnten Sie vier Agenten einrichten: drei Claude-Sitzungen und eine Gemini-Sitzung.
00:02:44Aber egal wie viele Agenten Sie nutzen, jeder muss in einem eigenen Terminal laufen.
00:02:49Wenn Sie also vier Sitzungen betreiben, benötigen Sie vier Terminals, die nebeneinander laufen,
00:02:53und Sie können alle über die einzelne Chat-Sitzung im Tool steuern.
00:02:56Sobald alles installiert ist und Sie zu "localhost" navigieren,
00:03:00sollten Sie alle gestarteten Agenten im Chat-Panel sehen.
00:03:03Um das Beste aus diesem Tool herauszuholen,
00:03:06gibt es bestimmte Schritte, die Ihnen helfen, effizienter zu arbeiten.
00:03:09Es wird empfohlen, das Framework, mit dem Sie Ihre App bauen, vor der Nutzung des Tools zu initialisieren,
00:03:14da dies ein Punkt ist, der oft zu Konflikten zwischen Agenten führt, selbst wenn sie unterschiedliche Rollen haben.
00:03:20Stellen Sie also sicher, dass Ihre Next.js-App oder welches Framework auch immer bereits initialisiert ist.
00:03:25Erstens: Da jeder Agent als separate Claude- oder Gemini-Sitzung läuft,
00:03:29müssen Sie die Berechtigungen für jeden einzelnen manuell bestätigen.
00:03:33Es werden zwar Skripte angeboten, um den Modus zum Überspringen der Berechtigungen zu nutzen,
00:03:36dies ist jedoch nicht empfehlenswert, da bei mehreren Agenten das Risiko, dass einer die Arbeit eines anderen löscht, viel höher ist.
00:03:42Sie müssen also die settings.json für Claude Code und das Gemini CLI mit den entsprechenden Berechtigungen konfigurieren.
00:03:48So muss das Tool bei einer Dateibearbeitung oder einem Build-Befehl nicht auf Ihre manuelle Freigabe warten,
00:03:53während Sie gleichzeitig die Kontrolle über gefährliche Befehle behalten.
00:03:56Wichtig ist auch, dass die MCP-Tools ebenfalls in der Datei konfiguriert sind,
00:04:01da Sie diese sonst auch einzeln genehmigen müssten.
00:04:03Sie sollten außerdem eine "agents.md" Datei erstellen.
00:04:05Diese dient derzeit als Vorlage mit einer optimierten Struktur für die Agenten,
00:04:09die später von ihnen befüllt wird.
00:04:11Sie enthält die Rollenregeln, Verhaltensweisen und alle Prinzipien, denen die Agenten folgen müssen.
00:04:15Sie benötigen auch Planungsdateien wie ein PRD, sowie Vorlagen für Backend- und UI-Spezifikationen,
00:04:20die wir aktuell als Templates nutzen und die später vom Planungs-Agenten ausgefüllt werden.
00:04:24Der Zweck dieser Vorlagen ist es, Struktur zu geben, damit die Agenten keine unnötigen Inhalte hinzufügen.
00:04:30Alle diese Vorlagen sind auf AI Labs Pro verfügbar, von wo aus Sie sie herunterladen und selbst nutzen können.
00:04:35Wenn Sie unsere Arbeit wertvoll finden und den Kanal unterstützen möchten,
00:04:38ist AI Labs Pro der beste Weg dafür.
00:04:40Der Link dazu befindet sich in der Beschreibung.
00:04:42Eine weitere Funktion dieses Tools ist, dass man jedem Agenten einen Namen geben und eine spezifische Rolle zuweisen kann.
00:04:47Das macht es einfacher, den Agenten zu identifizieren und ihn nach einer speziell auf ihn zugeschnittenen Rolle arbeiten zu lassen.
00:04:52Wenn Sie zum Beispiel Gemini für das UI-Design nutzen,
00:04:55können Sie ihn entsprechend umbenennen und ihm die benutzerdefinierte Rolle eines UI/UX-Experten zuweisen.
00:04:59Sie weisen jedem Agenten Namen und Rollen zu, damit sie gemäß der für sie festgelegten Persona agieren.
00:05:04Und schließlich müssen Sie bestimmte Regeln aufstellen, damit die Agenten die Aufgaben ordnungsgemäß ausführen.
00:05:09Wie bereits erwähnt, sollten Sie die "agents.md" verwenden.
00:05:12Aber Claude nutzt standardmäßig "Claude.md" und Gemini nutzt "Gemini.md",
00:05:16und keiner von beiden nutzt die Datei des anderen als primäre Anweisungsquelle.
00:05:19Um sie zu koordinieren, nutzen Sie "agents.md" und fügen eine Regel hinzu, damit sich beide darauf als zentrale Leitdatei beziehen.
00:05:25Sie können mehrere Regeln nach Ihren Bedürfnissen einrichten und so viele hinzufügen, wie Sie möchten.
00:05:29Aber wenn Sie eine Regel erstellen, befindet sie sich zuerst im Entwurfsstatus
00:05:31und Sie müssen sie manuell auf "aktiv" setzen, damit die Agenten sie erkennen.
00:05:35Regeln werden alle 10 Chat-Trigger aktualisiert, was Sie nach Ihren Wünschen anpassen können.
00:05:39Ein weiterer Punkt ist der Loop-Guard, der standardmäßig auf 4 eingestellt ist.
00:05:43Der Loop-Guard ist die maximale Anzahl von Agent-zu-Agent-Interaktionen (Hops),
00:05:46bevor die Agenten ihre Aufgaben pausieren und auf eine Eingabe warten.
00:05:49Er wurde hinzugefügt, um zu verhindern, dass Agenten zu lange in einer Endlosschleife aus Rückfragen stecken bleiben.
00:05:53Sobald der Loop-Guard erreicht ist, stoppen die Agenten die Kommunikation,
00:05:56und Sie müssen einen Fortsetzungsbefehl senden, um weiterzumachen.
00:05:59Sie sollten ihn erhöhen, wenn die Agenten über längere Zeit besser miteinander koordinieren sollen.
00:06:03Aber bevor wir die Implementierung planen, ein Wort von unserem Sponsor Airtop.
00:06:06Wenn Sie jede Woche Stunden damit verbringen, Daten manuell zu scrapen
00:06:10oder sich durch Dutzende von Browser-Tabs zu klicken, gibt es einen viel besseren Weg.
00:06:13Airtop ist eine cloudbasierte Plattform, die KI-Agenten wie einen Menschen mit dem Web interagieren lässt,
00:06:19unter Verwendung benutzerdefinierter oder vorgefertigter Vorlagen, die nervige Routineaufgaben lösen.
00:06:23Stellen Sie es sich wie einen Cloud-Browser vor, der die ganze Fleißarbeit für Sie erledigt.
00:06:27Ich nutze zum Beispiel ein Template, um die Preise der Konkurrenz zu recherchieren.
00:06:30Ich gebe dem Agenten einfach Anweisungen in normalem Englisch, kein Code erforderlich,
00:06:33und er navigiert auf der Seite, erledigt den Login und extrahiert genau das, was ich brauche, in ein sauberes Format.
00:06:39Mein Lieblingsteil ist, dass er frustrierende Anti-Bot-Maßnahmen und
00:06:43CAPTCHAs umgeht, an denen traditionelle Automatisierungen normalerweise scheitern,
00:06:46was ihn unglaublich zuverlässig für Aufgaben mit hohem Volumen macht.
00:06:48Erstellen Sie zuverlässige Automatisierungen in Minuten und melden Sie sich jetzt kostenlos bei Airtop an.
00:06:53Klicken Sie auf den Link im angepinnten Kommentar und fangen Sie noch heute an.
00:06:56Sobald alle Schritte abgeschlossen sind, ist es Zeit für die Implementierung.
00:07:00Da wir immer betonen, wie wichtig Planung vor der Umsetzung ist,
00:07:03sollten Sie auch hier mit der Planung beginnen.
00:07:05Ähnlich wie Slack-Channels funktionieren, können Sie auch hier verschiedene Kanäle erstellen.
00:07:09Sie sollten separate Kanäle für das Frontend und das Backend einrichten.
00:07:12Sobald Sie die App-Idee eingeben, sendet das Tool eine Anfrage an die TMUX-Sitzung
00:07:16und fordert sie auf, die Nachricht zu prüfen, da sie erwähnt wurde.
00:07:18Der Planungs-Agent erstellt einen kompletten Plan, benachrichtigt Sie und bittet um Freigabe oder Änderungen.
00:07:23Er dokumentiert den Plan im PRD direkt auf Basis der Vorlage, die Sie anfangs hinzugefügt haben.
00:07:28Sie können Änderungen nach Belieben vornehmen, und das PRD wird entsprechend aktualisiert.
00:07:32Dieses Tool nutzt MCP, damit Claude Antworten senden und Chats im Interface lesen kann,
00:07:37was eine Zwei-Wege-Kommunikation ermöglicht.
00:07:39Sobald der Plan bestätigt ist, bitten Sie ihn fortzufahren.
00:07:41Nachdem das PRD genehmigt wurde, alarmiert er Gemini selbstständig
00:07:44und bittet darum, die UI-Spezifikationsdokumente zu implementieren.
00:07:47Dann beginnen der UI-Designer und der Planungs-Agent sich abzustimmen,
00:07:51wobei der Planer Details vorschlägt,
00:07:54der UI-Designer diese in den Plan einarbeitet und der Review-Prozess hin und her geht.
00:07:59Ein Hinweis: Obwohl wir den Loop-Guard auf 8 gesetzt hatten,
00:08:02wurde das aus irgendeinem Grund nicht registriert.
00:08:04So erreichten wir das Limit nach nur 4 Iterationen und wurden aufgefordert, das Gespräch fortzusetzen.
00:08:08Nun wird der Builder vom UI-Designer informiert, dass die Pläne bereit zur Umsetzung sind,
00:08:13und der Builder bestätigt den Erhalt und wartet auf die Freigabe zum Weitermachen.
00:08:18Der Designer-Agent signalisiert ebenfalls, dass er mit der UI-Implementierung beginnen möchte,
00:08:22womit Sie jedoch warten sollten, bis Sie die Pläne selbst geprüft haben.
00:08:25Im Backend-Kanal können Sie den Builder-Agenten und den Planer bitten, die "backend.md" zu prüfen,
00:08:30die vom Planer während der PRD-Umsetzung erstellt wird.
00:08:33Sie nutzen diese zur gegenseitigen Abstimmung, um die Dokumente zu validieren,
00:08:37da jeder von ihnen Lücken in der Implementierung finden könnte.
00:08:40Sie koordinieren sich also alle untereinander und beziehen den UI-Designer für die UI-Specs mit ein,
00:08:44um gemeinsam Probleme zu beheben.
00:08:47Sie können den Planer dann um eine abschließende Prüfung bitten, wenn alles implementiert wurde.
00:08:50In unserem Fall fanden sie beim finalen Review noch einige zusätzliche Probleme.
00:08:54Nachdem diese behoben waren, bestätigten alle Agenten,
00:08:56dass die Fehler gelöst waren und die App bereit für den Build-Prozess sei.
00:08:59Aber bauen Sie sie noch nicht direkt. Es gibt noch einen weiteren Schritt.
00:09:02Sie sollten sie die Pläne gegenseitig prüfen lassen.
00:09:04Dieses Tool bietet verschiedene Modi zum Testen, und Sie sollten den Planer-Modus ausprobieren.
00:09:08Sie können verschiedene Modi für Design-Review, Code-Kritik und mehr testen.
00:09:12Diese Modi arbeiten in 3 Phasen, in denen verschiedene Modelle unterschiedliche Rollen einnehmen.
00:09:16Sie legen den Planer-Agenten als "Präsentator" fest, der darlegt, was zuvor getan wurde,
00:09:20und den Review-Agenten als "Herausforderer", der die Aussagen des Präsentators kritisch hinterfragt.
00:09:24Der Planungs-Agent agiert als "Synthesizer", der die Ergebnisse beider Seiten zusammenführt.
00:09:28Die Sitzung beginnt mit der Präsentation, wonach der Herausforderer die Ergebnisse
00:09:32kritisch analysiert, die Dokumente stresstestet und viele Lücken identifiziert.
00:09:36Da die Agenten sich gegenseitig befragen,
00:09:38können sie viele Probleme finden und beheben, die sonst übersehen worden wären.
00:09:42Danach erhalten Sie den finalen Plan, was das Ende der dreiphasigen Sitzung markiert.
00:09:46Wenn Ihnen unser Content gefällt, drücken Sie bitte den Hype-Button,
00:09:50denn das hilft uns, mehr solcher Inhalte zu erstellen und mehr Menschen zu erreichen.
00:09:54Sobald das Review fertig ist, bitten Sie den Planer, als Orchestrator zu fungieren und
00:09:58mit allen anderen Agenten die Umsetzung zu koordinieren, wobei die jeweiligen Modelle für ihre Aufgaben genutzt werden.
00:10:03Er bestätigt dies und lässt den Designer und den Builder parallel arbeiten.
00:10:06Er sendet Nachrichten an den Backend- und den Frontend-Kanal und gibt dem Builder
00:10:10grünes Licht für den Start, während er den Frontend-Engineer deblockiert, damit das Design implementiert werden kann.
00:10:15Die Arbeit damit ist wirklich interessant, da man die Aufgabe im Grunde nur dem
00:10:18Planungs-Agenten übergibt und ihn lediglich nach Updates fragen muss.
00:10:22Es ist faszinierend zu sehen, wie die Agenten zusammenarbeiten, da sie sich gegenseitig auf Fehler hinweisen.
00:10:26In unserem Fall versuchte der UI-Designer zum Beispiel versehentlich einen Fehler zu beheben,
00:10:30der eigentlich in den Verantwortungsbereich des Builders fiel.
00:10:32Sowohl der Planer als auch der Builder merkten an, dass er diesen Fix nicht implementieren sollte,
00:10:37da er die Datei überschrieb, an welcher der Builder gerade arbeitete.
00:10:39Dieser Workflow wäre noch reibungsloser, wenn man die Agenten in dedizierten Worktrees arbeiten ließe,
00:10:44wobei ein Agent alles zusammenführt und als Ganzes prüft,
00:10:47da dies das Problem des gegenseitigen Überschreibens eliminieren würde.
00:10:50Das sollte man also für komplexere Setups im Hinterkopf behalten.
00:10:53Der Planer triggert dann den Review-Agenten, welcher Probleme im Detail identifiziert,
00:10:57einen gründlichen Bericht erstellt und den Agenten Aufgaben zuweist.
00:11:01Da wir bereits die Regel festgelegt hatten, dass ein Agent den anderen einfach um Hilfe bitten soll,
00:11:04wenn er etwas benötigt, fragte der UI-Designer nach Zugriff auf eine Variable des Builders,
00:11:09und der Builder gewährte diesen.
00:11:10Sobald das Review ihrerseits abgeschlossen ist, bittet der Planer Sie um das finale Frontend-Review.
00:11:15Wenn Sie zum Development-Server navigieren,
00:11:17werden Sie feststellen, dass die UI genau der gamifizierten Version entspricht, die Sie wollten.
00:11:20Die Landingpage hat hohe Kontraste, was ihr einen Spiele-Look verleiht,
00:11:23und nutzt motivierende Begriffe und Referenzen, die Lust auf das Ausprobieren machen.
00:11:26Nach dem Tipptest erhalten Sie einen Performance-Bericht.
00:11:29Die Ergebnisse werden auf dem Dashboard angezeigt und zeigen die bisher beste Geschwindigkeit,
00:11:33zusammen mit aktuellen Leveln und Fortschritten, was das Design-Erlebnis sehr immersiv macht.
00:11:37Damit sind wir am Ende dieses Videos angelangt. Wenn Sie den Kanal unterstützen
00:11:40und uns helfen möchten, weiterhin solche Videos zu machen, können Sie das über den "Super Thanks"-Button unten tun.
00:11:45Wie immer, danke fürs Zuschauen und wir sehen uns im nächsten Video.