Browser per Sprache steuern: KI geht in Sekunden durch Webseiten

Ich sage “geh auf youtube”, und die Seite ist da. Ich sage “suche nach claude code tutorial”, und der Text steht im Suchfeld, Enter inklusive. Ich sage “klick auf das zweite Video”, und es läuft. Dazwischen liegt jeweils weniger als eine Sekunde.

Das Projekt dahinter heißt jev-automation und liegt offen auf GitHub. Unten steht das komplette Setup, so wie es bei mir läuft, inklusive der zwei Stellen, an denen aus einem englischen Projekt eine deutsche Sprachsteuerung wird.

Warum das kein Sprachbefehl-Skript ist

Sprachsteuerung im Browser gibt es seit Jahren. Sie war nur immer starr. Du hinterlegst “öffne Youtube”, und genau dieser Satz funktioniert. Ein Wort daneben, und nichts passiert.

Hier ist es anders herum. Der Server macht einen Schnappschuss von allem, was auf der aktuellen Seite anklickbar ist, und schickt deinen Satz zusammen mit dieser Liste an ein Modell namens Jev. Jev schreibt keinen Text, es wählt aus: Was willst du tun, welches Element ist gemeint, soll nach dem Tippen abgeschickt werden, ist die Aktion heikel. Danach führt Playwright den Klick aus.

Das heißt für dich: Die Seite muss nicht vorbereitet sein. Du redest genauso mit einem Shop, mit einem Formular oder mit dem Fahrplan deiner Stadt.

Wenn Jev sich nicht sicher ist, klickt die Anwendung nicht blind, sondern fragt zurück, welches Element du meintest. Du antwortest dann per Sprache mit “das zweite” oder klickst die Auswahl an.

Was du brauchst

• Node in Version 20 oder neuer
• Chrome oder Edge, denn die Spracherkennung läuft über die Web Speech API des Browsers
• Ein Mikrofon
• Einen Schlüssel von console.typesafe.ai. Optional für den ersten Test, aber ohne ihn bleibt es Stichwort-Erkennung statt echter Entscheidung.

Setup in vier Befehlen

git clone https://github.com/yatharth1706/jev-automation
cd jev-automation
npm install
npx playwright install chromium

Der letzte Befehl lädt das Chromium, das später ferngesteuert wird. Wenn du Playwright schon benutzt, ist es vermutlich da und der Schritt geht in zwei Sekunden durch.

Danach die Konfiguration anlegen:

cp .env.example .env

In der .env trägst du deinen Schlüssel ein und stellst zwei Werte um:

TYPESAFE_API_KEY=dein-schluessel
HEADLESS=false      # zeigt das gesteuerte Chromium als eigenes Fenster
PORT=3210           # nur nötig, wenn auf 3000 schon etwas läuft

HEADLESS=false ist der Schalter, der aus dem Ganzen eine vorzeigbare Sache macht: Du siehst das ferngesteuerte Fenster neben deinem eigenen und kannst zuschauen, wie es arbeitet. Im Web-Fenster läuft ohnehin ein Livebild mit.

Starten:

set -a && . ./.env && set +a
npm start

Dann http://localhost:3210 im Chrome öffnen, das Mikrofon erlauben, Leertaste drücken und reden. Die Erlaubnis fürs Mikrofon gibt Chrome nur auf localhost oder über https, deshalb funktioniert der Umweg über die IP-Adresse des Rechners nicht.

Erst ohne Schlüssel ausprobieren

Wenn du nur sehen willst, ob dein Mikrofon sauber erkannt wird, lass TYPESAFE_API_KEY leer. Die Anwendung startet trotzdem und entscheidet dann über einfache Stichwörter. Oben im Fenster zeigt eine Anzeige, in welchem Modus du gerade bist.

Ohne Schlüssel läuft nur, was wörtlich passt. Mit Schlüssel sagst du “mach mal das Video da auf, das zweite von oben”, und es klappt trotzdem.

Auf Deutsch umstellen

Zwei Stellen entscheiden darüber, ob das Ding dich versteht.

Stelle 1: die Spracherkennung. Im Original steht in client/src/hooks/useSpeechRecognition.ts:

rec.lang = navigator.language || "en-US";

Wenn dein Chrome auf Deutsch steht, bist du damit schon versorgt. Ich habe es trotzdem festgesetzt, weil die Browsersprache auf Reisen gern umspringt:

rec.lang = new URLSearchParams(location.search).get("lang") ?? "de-DE";

Damit läuft die Erkennung immer auf Deutsch, und ?lang=en-US hinter der Adresse schaltet für einen Test zurück.

Stelle 2: die Befehlswörter. In server/commands.ts steht pro Aktion ein Muster mit allen Wörtern, die sie auslösen. Im Original sind das englische Wörter. Du ergänzt die deutschen dazu, zum Beispiel beim Öffnen einer Seite:

/^(?:go to|open|visit|öffne|öffnen|mach auf|geh zu|geh auf|zeig mir|ruf auf|lade)\s+...

Dasselbe machst du für Klicken (klick auf, drück auf, wähl), Tippen (tippe ... ins suchfeld), Scrollen (scroll nach unten, scroll nach oben) und Zurück (zurück). Der Rest der Kette braucht keine Übersetzung, weil die eigentliche Entscheidung beim Modell liegt und das versteht deinen Satz ohnehin.

Wenn du unsicher bist, ob dein Muster sitzt: Das Projekt bringt Tests mit, npm test sagt dir in ein paar Sekunden Bescheid.

Die Befehle, mit denen ich anfangen würde

Diese laufen bei mir zuverlässig und sind eine gute erste Runde:

• “geh auf youtube”
• “suche nach claude code tutorial”
• “klick auf das zweite Video”
• “scroll nach unten”
• “zurück”
• “tippe hallo welt ins suchfeld und drück enter”

Sprich dabei ganz normal. Du musst weder langsam noch besonders deutlich reden, und Pausen mitten im Satz sind kein Problem.

Wenn etwas klemmt

Der Browser lädt nichts und meldet, dass die Verbindung abgelehnt wurde. Dann startest du den Server aus einer Shell, die kein Netz nach außen hat, zum Beispiel aus einer Sandbox heraus. Terminal direkt aufmachen und dort starten.

Port 3000 ist belegt. PORT=3210 in die .env, Seite unter der neuen Nummer öffnen.

Das Mikrofon taucht nicht auf. Nur Chrome und Edge können die Web Speech API. In Safari und Firefox bleibt der Knopf grau.

Es klickt das Falsche. Sag “zurück” und formuliere den Satz konkreter. Statt “klick auf das Video” lieber “klick auf das zweite Video”. Je genauer du beschreibst, desto klarer ist die Auswahl, unter der das Modell entscheidet.

Womit du anfängst

Starte es einmal, sag “geh auf youtube” und schau dem Fenster zu. Das reicht als erster Abend. Alles Weitere ergibt sich, sobald du merkst, wo du sonst überall klickst, ohne nachzudenken.

Wenn du vorher wissen willst, was Jev eigentlich ist, warum es keinen Text schreibt und was Leute sonst damit bauen, steht das im Einstieg zu Jev.