nützliche Arbeit findet immer noch innerhalb von Webschnittstellen statt.

Um ein Ticket zu lösen, muss das Help-Staff eine Admin-Konsole verwenden. Ein Betriebsteam verlässt sich auf Dashboards, um Alarme im Auge zu behalten. Bevor ein Vertriebsmitarbeiter mit einem Kunden spricht, wird er wahrscheinlich zunächst das CRM überprüfen.

Damit LLM-Agenten in diesen Arbeitsabläufen nützlich sind, müssen sie direkt über den Browser arbeiten.

In diesem Beitrag erstellen wir einen browserbasierten Agenten mit OpenAI Brokers SDK und Playwright MCP. Wir betrachten zunächst den Kreislauf hinter der Browsernutzung und setzen ihn dann anhand einer konkreten Fallstudie in die Praxis um.

---

1. Das mentale Modell

Auf einer höheren Ebene wird ein Browser-verwendender Agent am besten als ein LLM verstanden, der in einer Interaktionsschleife mit einem Browser platziert ist.

Die Schleife läuft folgendermaßen ab: Der Agent startet mit einer Aufgabe und dem aktuellen Standing des Browsers. Der Agent interpretiert dann diesen Zustand, entscheidet, was als nächstes zu tun ist, und sendet eine Aktion zurück an den Browser. Diese Aktion würde einen neuen Browserstatus erzeugen, der als Eingabe für die nächste Entscheidung dient.

Diese Schleife wird fortgesetzt, bis der Agent glaubt, dass die Aufgabe abgeschlossen ist.

Damit die Schleife funktioniert, benötigen wir zwei Verbindungen zwischen dem Agenten und dem Browser:

1. Ein Beobachtungskanaldamit der Agent den aktuellen Browserstatus erhalten kann.
2. Ein Aktionskanaldamit der Agent mit dem Browser interagieren kann.

Zu den gängigen Optionen für den Beobachtungskanal gehören Screenshots, strukturierte Seiteninformationen (z. B. Dokumentobjektmodell oder Barrierefreiheitsbaum) oder eine Kombination aus beidem.

Für den Aktionskanal kann der Agent Maus- und Tastatursteuerungen verwenden, auf bestimmte Seitenelemente abzielen oder übergeordnete Browserbefehle ausgeben.

Die Beobachtungs- und Handlungsentscheidungen sind normalerweise unabhängig voneinander, in der Praxis sind jedoch häufig zwei Paarungen zu beobachten:

1. Screenshot + koordinatenbasierte Maus- und Tastaturaktionen
2. Strukturierter Seitenstatus + elementbezogene Browseraktionen

Die erste Paarung tendiert zum Allgemeinen Computernutzungdie sich über den Browser hinaus auf andere Desktop-Anwendungen erstreckt. Die zweite Möglichkeit ist spezifischer für die Verwendung im Browser, da sie die Struktur nutzt, die bereits in einer Webseite vorhanden ist.

In diesem Beitrag konzentrieren wir uns auf strukturierte Seitenbeobachtungen zusammen mit elementbezogenen Browseraktionen.

---

2. Fallstudie: Lösung einer Kundensupportanfrage

Für unsere Fallstudie erstellen wir einen browserbasierten Agenten, der eine Kundenanfrage über eine webbasierte Supportkonsole löst.

2.1 Vorbereiten der Help-Konsole

Um die Browserumgebung zu erstellen, habe ich eine kleine Kundensupportkonsole mit Vibe-Code versehen. Es handelt sich um eine statische Webanwendung, die mit einfachem HTML, CSS und JavaScript erstellt wurde. Es gibt kein Anwendungs-Backend oder eine Datenbank: Alle Daten befinden sich im Browser.

Wir können die Konsole lokal mit dem integrierten HTTP-Server von Python bereitstellen:

cd toy_app
python -m http.server 8000 --bind 127.0.0.1

Dadurch wird die Konsole unter http://127.0.0.1:8000 verfügbar, unter der wir später den Agenten übergeben APP_URL:

Die linke Seite der Konsole funktioniert wie ein Help-Posteingang. Sobald ein Fall ausgewählt ist, werden im Relaxation der Konsole die zugehörige Bestellung, der Kundenkontext und die Lösungsrichtlinien angezeigt. Von dort aus kann der Fall mit einer internen Notiz geklärt werden. Die Konsole verfügt außerdem über ein Audit-Protokoll, das das Replace verfolgt.

Die Aufgabe des Agenten ist einfach: Untersuchen Sie einen eingehenden Help-Fall und führen Sie ihn bis zur Lösung durch, und zwar vollständig über diese Konsolenschnittstelle.

2.2 Definieren des Browser-verwendenden Agenten

Als nächstes konfigurieren wir den Browser-verwendenden Agenten.

Für den Tech-Stack verwenden wir hier den OpenAI Brokers SDK um die Agent-Laufzeit mit Strom zu versorgen und Dramatiker MCP um den Agenten mit dem Browser zu verbinden.

Unser endgültiger, konfigurierter Agent sieht so aus:

# pip set up openai-agents
from brokers import Agent, ModelSettings
from openai.sorts.shared import Reasoning

agent = Agent(
    title="Help Console Browser Agent",
    mannequin="gpt-5.4",
    model_settings=ModelSettings(
        reasoning=Reasoning(effort="medium"),
    ),
    directions=AGENT_INSTRUCTIONS,
    mcp_servers=(playwright_server),
)

Es gibt drei Teile, die wir hier entpacken müssen, nämlich den LLM-Consumer, die Agentenanweisung und die Browser-Instruments.

Zuerst verbinden wir das Brokers SDK mit Azure OpenAI:

import os
from openai import AsyncAzureOpenAI
from brokers import (
    set_default_openai_api,
    set_default_openai_client,
)

azure_client = AsyncAzureOpenAI(
    api_key=os.environ("OPENAI_API_KEY"),
    api_version=os.environ("OPENAI_API_VERSION"),
    azure_endpoint=os.environ("OPENAI_API_BASE"),
)

set_default_openai_client(azure_client)
set_default_openai_api("responses")

Wir registrieren den Consumer beim Brokers SDK und konfigurieren ihn für die Verwendung der Responses API.

Dann haben wir die folgende Anweisung, die absichtlich minimal ist:

AGENT_INSTRUCTIONS = """
You might be an agent that may work together with an internet browser.
""".strip()

Wir richten lediglich die Rolle des Agenten ein. Die eigentliche Aufgabe kommt später in der Eingabeaufforderung, die an den Agenten gesendet wird.

Als nächstes müssen wir das Playwright MCP einrichten.

Was ist Dramatiker MCP?
Playwright ist eine Browser-Automatisierungsbibliothek. Es steuert in Ihrem Namen einen echten Browser und übernimmt das Klicken, Tippen, Navigieren und Lesen aller Inhalte auf der Seite.

MCP (Mannequin Context Protocol) ist eine Standardmethode, um Instruments einem LLM zur Verfügung zu stellen, damit ein Agent sie direkt aufrufen kann. Playwright MCP ist das, was Sie erhalten, wenn Sie beides zusammenfügen, nämlich die Browserfunktionen von Playwright, die als Instruments zur Verfügung stehen, die ein Agent in die Hand nehmen und verwenden kann.

Das Interessante daran ist, wie es dem Agenten die Seite zeigt. Anstelle eines Screenshots verwendet Playwright MCP standardmäßig einen Schnappschuss der Barrierefreiheitwas im Grunde eine strukturierte Lektüre dessen ist, was auf der Seite steht. Interaktive Elemente wie Hyperlinks, Schaltflächen und Eingabefelder erhalten jeweils eine Referenz-ID, auf die der Agent direkt abzielen kann. Das ist genau die Kombination aus strukturierter Beobachtung und elementbezogener Aktion, über die wir zuvor gesprochen haben.

Playwright MCP läuft über Node.js. So installieren Sie Node.js unter Home windows:

winget set up OpenJS.NodeJS.LTS

Auf macOS:

brew set up node

Und unter Linux:

curl -o- https://uncooked.githubusercontent.com/nvm-sh/nvm/v0.40.5/set up.sh | bash
. "$HOME/.nvm/nvm.sh"
nvm set up --lts

Überprüfen Sie dann die Set up:

node --version
npx --version

Wir können das Brokers SDK folgendermaßen konfigurieren, um den MCP-Server zu starten npx Befehl:

from brokers.mcp import MCPServerStdio

playwright_server = MCPServerStdio(
    title="Playwright MCP",
    params={
        "command": "npx",
        "args": (
            "-y",
            "@playwright/mcp@newest",
            "--browser",
            "chrome",
        ),
    },
)

Hier, npx Ruft das neueste Playwright MCP-Paket ab und führt es aus. Der -y Flag akzeptiert automatisch die npx Bestätigungsaufforderung, während --browser chrome teilt Playwright mit, welcher Browser gestartet werden soll. Chrome ist auch der Standardbrowser von Playwright MCP. Wenn er bereits installiert ist, ist keine separate Browserinstallation erforderlich.

MCPServerStdio konfiguriert das Brokers SDK so, dass Playwright MCP als lokaler Prozess gestartet wird. Wenn der Agent zum ersten Mal ein Browser-Instrument aufruft, öffnet Playwright MCP ein sichtbares Chrome-Fenster und führt die angeforderte Browser-Aktion aus.

2.3 Ausführen des Agenten

Jetzt können wir dem Agenten eine konkrete Aufgabe geben:

APP_URL = "http://127.0.0.1:8000"

TASK = f"""
Open {APP_URL} and resolve the help case for order ORD-1042.

The client says they acquired the flawed merchandise. Use the data obtainable within the
utility to find out and apply the suitable decision. Add a concise inside
notice and ensure the decision was efficiently recorded.

Report what you probably did when the duty is full.
""".strip()

In der Aufgabenaufforderung haben wir den Zugriff auf die Anwendung und das gewünschte Ergebnis beschrieben.

Anschließend führen wir den Agenten aus mit:

from brokers import Runner

async with playwright_server:
    end result = await Runner.run(
        agent,
        TASK,
        max_turns=20,
    )

print(end result.final_output)

Der async with Der Block startet den Playwright MCP-Prozess und hält ihn verbunden, während der Agent ausgeführt wird. Wir verwenden max_turns um eine Obergrenze dafür festzulegen, wie viele Runden der Agent ausführen kann.

Nach dem Begin öffnete sich Chrome und wir konnten über die Help-Konsole beobachten, wie der Agent arbeitete.

Die endgültige Antwort fasste das Ergebnis richtig zusammen:

Resolved CASE-4107 for order ORD-1042 with Alternative.

The case now reveals Resolved, the recorded motion is Alternative,
and the audit log comprises the corresponding decision entry.

Wenn Sie möchten, können Sie die Browser-Instrument-Aufrufe und ihre Ausgaben auch auf diese Weise überprüfen:

for merchandise in end result.new_items:
    print(sort(merchandise).__name__, merchandise)

Bei meinem Durchlauf hat der Agent den damit verbundenen Fall gefunden ORD-1042 Außerdem wurden die Bestellung, die Kundenanfrage, der Bestandsstatus und die relevanten Lösungsrichtlinien überprüft. Anschließend kam es zu dem Schluss, dass eine Ersetzung angebracht sei, fügte einen internen Vermerk hinzu und reichte den Beschluss ein. Abschließend überprüfte es das aktualisierte Fall- und Auditprotokoll, um zu bestätigen, dass die Aktion aufgezeichnet wurde.

Das ist genau das Agentenverhalten, das wir wollen.

---

3. Von der Browsernutzung zur Computernutzung

Was wir in dieser Fallstudie erstellt haben, ist ein Browser-verwendender Agent. Dennoch ist das zugrunde liegende Muster, das heißt das beobachten, entscheiden, handeln und wiederholen Schleife, erstreckt sich natürlich auf allgemein Computernutzung.

Was sich ändert, sind die Beobachtungs- und Handlungskanäle.

In unserem Fall versorgt Playwright MCP den Agenten mit strukturierten Seiteninformationen und ermöglicht ihm die gezielte Ausrichtung auf einzelne Webelemente. Ein allgemeinerer Computernutzer könnte stattdessen anhand von Screenshots arbeiten und Maus und Tastatur über Koordinaten steuern.

Das Repo zu unserer Fallstudie finden Sie hier: https://github.com/ShuaiGuo16/llm-browser-agent/tree/most important

Das Besondere an Codierungsagenten ist, dass sie nur zum Codieren oder Programmieren verwendet werden können. Allerdings handelt es sich bei ihnen um wesentlich allgemeinere Agenten, die grundsätzlich alle Büroaufgaben erledigen können, wenn auch mit unterschiedlichem Erfolg.

Ein Bereich, der jedoch große Aufmerksamkeit erhalten hat, ist das Surfen mit Webbrowsern mit Codierungsagenten wie Claude Code und Codex von OpenAI.

Die Agenten sind unglaublich geübt darin, im Web zu navigieren, was für viele verschiedene Aufgaben sehr nützlich ist.

Das Surfen im Web kann natürlich in vielen verschiedenen Situationen nützlich sein, beispielsweise beim Abrufen von Informationen im Web oder beim Ausfüllen von Formularen. Es ist jedoch zu beachten, dass einige Anwendungsfälle gegen die Nutzungsbedingungen verstoßen können. Sie sollten sich dessen additionally unbedingt bewusst sein. Der Hauptnutzungsbereich, den ich heute behandeln werde, ist definitiv völlig authorized und umfasst das Navigieren in Anwendungen, die Sie selbst entwickeln, mit den Codierungsagenten, um Implementierungen zu testen und zu überprüfen.

Zuvor habe ich viel darüber gesprochen, überprüfbare Aufgaben zu erstellen, wenn Sie Programmieragenten bitten, Aktionen für Sie auszuführen. Ein entscheidender Teil dieser Überprüfbarkeit ist es, Programmieragenten Zugriff auf Ihren Browser zu gewähren, um Implementierungen zu testen.

Warum Programmieragenten Ihren Browser verwenden sollten

Zunächst möchte ich erläutern, warum Sie sich für die Ausführung von Browsern mit Ihren Codierungsagenten interessieren sollten. Browser sind eine wichtige Schnittstelle, über die Menschen mit der Welt interagieren. Über Ihren Browser können Sie viele verschiedene Aktionen ausführen, z. B. Informationen nachlesen, Anträge ausfüllen usw.

Da es sich dabei um eine so wichtige Schnittstelle für Menschen zur Interaktion mit der Welt handelt, wurde der effektiven Navigation in Browsern viel Aufmerksamkeit und Forschung gewidmet. Es gibt zahlreiche Unternehmen, die sich auf Browser-Navigation spezialisiert haben, und auch alle Frontier Labs bieten eine solche Integration in ihre Produkte an, beispielsweise Codex von OpenAI und Claude Code von Anthropic.

Stellen Sie sich vor, Sie weisen einen Codierungsagenten an, ein Design anhand einer HTML-Designdatei zu implementieren. Der Coding-Agent ist natürlich intestine im Entrance-Finish-Code und kann sofort mit der Implementierung beginnen; Wenn der Codierungsagent jedoch nicht im Browser navigieren kann, ist es für den Codierungsagenten unmöglich, seine eigene Arbeit zu überprüfen.

Dies erhöht die Wahrscheinlichkeit, dass ein Codierungsagent Fehler macht und nicht genau das Design implementiert, das Sie implementieren wollten, erheblich.

Glücklicherweise gibt es eine sehr einfache Lösung für dieses Downside. Gewähren Sie Ihrem Programmieragenten Zugriff auf den Browser. Lassen Sie es Screenshots des Designs machen, das es selbst implementiert hat, und vergleichen Sie diese mit den Screenshots des Designs, das Sie implementieren wollten. Der Codierungsagent kann dann mit der Iteration fortfahren, bis der implementierte Code genau wie die Designdatei aussieht.

Dies spart Ihnen als Programmierer viel Zeit, da Sie den Codierungsagenten nicht wiederholt überprüfen und über Fehler informieren müssen, die ihm bei der Designimplementierung unterlaufen sind. Dies wiederum ermöglicht es Ihnen, viele andere Aufgaben auszuführen und als Ingenieur produktiver zu sein.

Wie es funktioniert

Bevor ich mit der Navigation in Browsern mit Claude Code fortfahre, möchte ich auch einen einfachen Abschnitt über die Funktionsweise haben.

Theoretisch ist die Navigation im Browser recht einfach. Der Coding-Agent navigiert natürlich, indem er den Browser öffnet und dort Zugriff auf einige Aktionen hat:

• Machen Sie einen Screenshot
• Klicken (koordinatenbasiert)
• Geben Sie Textual content ein

Dies sind die drei Hauptaktionen, die der Codierungsagent ausführt. Dabei handelt es sich im Grunde um alle Aktionen, die Sie für die Interaktion mit einem Browser benötigen:

1. Der Coding-Agent muss Screenshots machen, weil er so herausfindet, was sich auf jeder Seite befindet und wo er klicken muss.
2. Der Codierungsagent muss auch in der Lage sein, auf verschiedene Stellen auf der Web site zu klicken, beispielsweise auf Schaltflächen oder Eingabefelder.

Dies ist koordinatenbasiert.

Wenn der Coding-Agent additionally an einer bestimmten Stelle klicken möchte, gibt er folgenden Textual content aus:

click on(x=0.754, y=0.328)

Es nutzt grundsätzlich die Klickfunktion und gibt die Koordinaten an, wo geklickt werden soll. Die Koordinaten werden normalerweise so normalisiert, dass sie in einem festgelegten Bereich liegen, beispielsweise zwischen 0 und 1.

Sobald der Agent dann auf eine bestimmte Stelle geklickt hat, kann er Textual content eingeben, um alles zu tun, was er im Browser tun möchte. Der Codierungsagent kann natürlich auch verschiedene Arten von Klicks ausführen, z. B. einen Rechtsklick, um weitere Optionen auf der Seite anzuzeigen.

Diese Schleife wird dann wiederholt. Der Coding-Agent macht einen Screenshot, wählt die auszuführende Aktion aus, prüft, ob das Ziel erreicht wurde oder nicht, und wiederholt den Vorgang. Es macht erneut einen Screenshot, wählt eine Aktion aus, prüft, ob ein Ziel erreicht wurde, und fährt fort. Der Agent macht einfach so weiter, bis er sein Ziel im Browser erreicht hat.

So navigieren Sie mit Claude Code durch Browser

Als nächstes möchte ich genau erläutern, wie man mit Claude Code in Browsern navigiert, und die Prinzipien, die ich hier behandele, gelten grundsätzlich für jeden Codierungsagenten. Ich werde nicht auf Techniken eingehen, die nicht einfach auf andere Programmieragenten übertragen werden können.

Erstens: Wenn Sie Claude Code verwenden, verfügt es über eine integrierte Chrome-Integration, die Sie einfach aktivieren können, indem Sie den folgenden Befehl eingeben, während Sie sich im Claude Code-Fenster befinden.

/chrome

Codex verfügt auch über einen entsprechenden Befehl.

Dies gibt Claude ganz einfach Zugriff, um Chrome auf Ihrem Laptop zu öffnen und es zum Überprüfen von Aufgaben zu verwenden.

Ich denke, die Chrome-Implementierung in Claude funktioniert intestine, aber sie ist nicht optimum.

---

Ich habe eine bessere Erfahrung mit dem Playwright MCP, das Sie einfach in Claude Code installieren können, indem Sie Claude Code anweisen, es zu installieren:

Set up the Playwright MCP to work together with the browser

Nachdem Claude es installiert hat, müssen Sie Claude Code neu starten und Sie haben Zugriff auf das Playwright MCP. Meiner Erfahrung nach kann Claude Aufgaben effektiver erledigen, wenn es das Playwright MCP verwendet, anstatt mit der /chrome-Implementierung zu interagieren, die bereits im Foundation-Claude-Code vorhanden ist.

Wenn Sie über einen anderen Codierungsagenten verfügen, können Sie natürlich genau das Gleiche tun: ihm mitteilen, dass er das Playwright MCP installieren soll. Der Agent installiert das MCP, Sie starten den Agenten neu und er erhält Zugriff auf Playwright.

Wie kann ich meinen Agenten dazu bringen, meine Implementierung zu testen?

Nachdem Sie das Playwright MCP implementiert und Ihrem Agenten Zugriff zur Interaktion mit dem Browser gewährt haben, können Sie es zum Testen Ihrer Implementierungen verwenden.

Wenn Ihr Agent etwas implementiert hat (z. B. ein neues Design aus einer Designdatei implementiert hat), weisen Sie den Agenten einfach an, seine Arbeit durchgängig zu überprüfen, indem er sie in Chrome mit dem Playwright MCP durchgeht und seine eigene Arbeit überprüft.

Es ist auch sinnvoll, dem Agenten mitzuteilen, dass er nicht innehalten und zu Ihnen zurückkommen soll, bevor er seine Arbeit vollständig überprüft hat. Die Finish-to-Finish-Verifizierung der Arbeit bedeutet in diesem Fall buchstäblich, mit dem Browser zu interagieren und zu sehen, ob etwas funktioniert.

Normalerweise verwende ich auch die Funktion „/objective“, die sowohl in Codex als auch in Claude Code verfügbar ist. Dabei handelt es sich im Grunde um eine Möglichkeit, mit der der Agent so lange auf eine Aufgabe hinarbeitet, bis sie erreicht ist. Normalerweise schreibe ich dann so etwas wie:

/objective proceed engaged on the duty, implementing <characteristic> till you've got 
totally carried out it and examined and verified it finish to finish by interacting
with the browser utilizing the playwright MCP, taking screenshots, and
verifying your work, solely come again to me as soon as you've got each carried out 
and totally examined the implementation efficiently. 

Dadurch arbeitet der Agent weiter auf das Ziel hin und überprüft es und meldet sich erst wieder bei Ihnen, wenn er seine Arbeit überprüft hat. Das hat mir unglaublich viel Zeit gespart und ist besonders nützlich, wenn der Agent nur Entwürfe umsetzen soll.

Abschluss

In diesem Artikel habe ich beschrieben, wie Sie Claude Code anwenden, um die Arbeit in Ihrem Browser zu überprüfen. Ich habe zunächst erläutert, warum Codierungsagenten mit Ihrem Browser interagieren können und sollten. Dann habe ich Ihnen gezeigt, wie die Browsernavigation mit Codierungsagenten tatsächlich funktioniert, was eigentlich ein ziemlich einfaches Konzept ist. Abschließend ging ich speziell darauf ein, wie Sie mit Claude Code oder anderen Codierungsagenten in Browsern navigieren können.

Ich glaube, dass die Browsernavigation weiterhin wichtig bleiben wird, da Menschen mit der Welt häufig über einen Browser interagieren. Es ist jedoch anzumerken, dass Codierungsagenten APIs und MCPs immer noch weitaus effektiver nutzen. Wenn Sie additionally stattdessen über diese Mittel mit einem Dienst interagieren können, sollten Sie dies grundsätzlich immer tun.

Nehmen Sie Kontakt auf

Mein kostenloses E-E book und Webinar:

Verzehnfachen Sie Ihr Engineering mit LLMs (kostenloser 3-tägiger E-Mail-Kurs)

Holen Sie sich mein kostenloses E-E book „Imaginative and prescient Language Fashions“.

Mein Webinar zu Imaginative and prescient Language Fashions

Finden Sie mich in den sozialen Netzwerken:

Unterstapel

LinkedIn

X / Twitter

Bild vom Autor

# Einführung

Große Sprachmodelle (LLMs) haben die Artwork und Weise verändert, wie wir künstliche Intelligenz (KI) nutzen, aber der Versuch, sie auszuprobieren, erfordert oft kostenpflichtige APIs, Cloud-Server oder komplizierte Setups. Jetzt können Sie LLMs kostenlos direkt in Ihrem Browser testen und ausführen. Mit diesen browserbasierten Instruments können Sie Modelle lokal ausführen, Ergebnisse vergleichen und sogar autonome Agenten erstellen, ohne dass Backend-Einrichtungs- oder Serverkosten anfallen. Hier sind fünf Instruments, die Sie ausprobieren sollten, wenn Sie Eingabeaufforderungen testen, KI-Funktionen prototypisieren oder einfach nur erkunden möchten, wie moderne LLMs funktionieren.

# 1. WebLLM

WebLLM ist eine Open-Supply-Engine, die LLMs in Ihrem Browser ohne Server oder Cloud-GPUs ausführt. Es verwendet WebGPU für eine schnelle Ausführung oder WebAssembly als Fallback. Es unterstützt beliebte Modelle wie Llama, Mistral, Phi, Gemma und Qwen sowie benutzerdefinierte MLC-Modelle (Machine Studying Compilation). WebLLM arbeitet mit der OpenAI-API für Chat-Abschlüsse, Streaming, JSON-Modus und Funktionsaufrufe. Wenn alles clientseitig ausgeführt wird, bleiben die Daten privat, die Serverkosten werden gesenkt und die Bereitstellung als statische Webseite wird vereinfacht. Es eignet sich für browserbasierte Chatbots, persönliche Assistenten und eingebettete KI-Funktionen.

# 2. Kostenloser LLM-Spielplatz

Kostenloser LLM-Spielplatz ist eine webbasierte Sandbox, die keine Einrichtung erfordert. Sie können Modelle von OpenAI, Anthropic, Google/Gemini und anderen Open-Weight-Modellen testen und vergleichen. Es ermöglicht 50 kostenlose Chats professional Tag und ermöglicht Ihnen die Anpassung von Parametern wie Temperatur, Anweisungen und Strafen. Vorlagen mit Variablen werden unterstützt und Sie können Chats über öffentliche URLs oder Code-Snippets teilen oder exportieren. Eingaben sind standardmäßig privat. Dieses Software eignet sich supreme für schnelle Assessments, schnelle Prototypenerstellung oder den Vergleich von Modellergebnissen.

# 3. BrowserAI

BrowserAI ist eine Open-Supply-JavaScript-Bibliothek, mit der Sie LLMs direkt in Ihrem Browser ausführen können. Es verwendet WebGPU und greift auf WebAssembly zurück, um schnelle und lokale Schlussfolgerungen zu ziehen. Es funktioniert mit kleinen bis mittleren Modellen und verfügt über Funktionen wie Textgenerierung, Chat, Spracherkennung und Textual content-to-Speech. Sie können es mit installieren npm oder yarn und beginnen Sie mit ein paar Zeilen Code. Sobald das Modell geladen ist, läuft es vollständig auf Ihrem Gerät, auch offline, und eignet sich daher intestine für datenschutzorientierte Apps und schnelles KI-Prototyping.

# 4. Genspark.ai

Genspark.ai ist eine Such- und Wissensmaschine, die von mehreren KI-Agenten betrieben wird. Es wandelt Suchanfragen in generierte Webseiten namens Sparkpages um, anstatt normale Suchergebnisse anzuzeigen. Die Agenten durchsuchen zuverlässige Quellen, sammeln Informationen und fassen diese in Echtzeit zusammen. Benutzer können einem KI-Copiloten weitere Fragen stellen oder weitere Einblicke erhalten. Es liefert saubere, spam- und werbefreie Inhalte und spart Zeit, da Sie nicht manuell suchen müssen. Es ist ein nützliches Werkzeug zum Recherchieren, Lernen und zum schnellen Abrufen relevanter Informationen.

# 5. AgentLLM

AgentLLM ist ein browserbasiertes Open-Supply-Software zum Ausführen autonomer KI-Agenten. Es führt lokale LLM-Inferenzen aus, sodass Agenten direkt im Browser Aufgaben erstellen, Maßnahmen ergreifen und diese iterieren können. Es übernimmt Ideen von Frameworks wie AgentGPT, verwendet jedoch lokale Modelle anstelle von Cloud-Aufrufen für Datenschutz und Dezentralisierung. Die Plattform läuft vollständig clientseitig und ist unter der Basic Public License (GPL) lizenziert. Auch wenn es sich um einen Proof-of-Idea handelt und noch nicht für die Produktion bereit ist, eignet sich AgentLLM hervorragend für die Prototypenerstellung, Forschung und das Testen autonomer Agenten im Browser.

# Zusammenfassung

Diese Instruments erleichtern das Experimentieren mit LLMs in Ihrem Browser. Sie können ohne Einrichtung oder Kosten Eingabeaufforderungen testen, Prototypen erstellen oder autonome Agenten ausführen. Sie bieten eine schnelle und praktische Möglichkeit, KI-Modelle zu erkunden und zu sehen, was sie leisten können.

Kanwal Mehreen ist ein Ingenieur für maschinelles Lernen und ein technischer Redakteur mit einer großen Leidenschaft für Datenwissenschaft und die Schnittstelle zwischen KI und Medizin. Sie ist Mitautorin des E-Books „Maximizing Productiveness with ChatGPT“. Als Google Technology Scholar 2022 für APAC setzt sie sich für Vielfalt und akademische Exzellenz ein. Sie ist außerdem als Teradata Range in Tech Scholar, Mitacs Globalink Analysis Scholar und Harvard WeCode Scholar anerkannt. Kanwal ist ein leidenschaftlicher Verfechter von Veränderungen und hat FEMCodes gegründet, um Frauen in MINT-Bereichen zu stärken.

OpenAI ist gerade gestartet ChatGPT-Atlas, ein neuer KI-Browser, der ChatGPT in den Kern der Navigation, Suche und On-Web page-Unterstützung einbettet. Atlas ist ab sofort für Free-, Plus-, Professional- und Go-Benutzer mit einer Enterprise-Beta und Enterprise/Edu-Decide-in verfügbar; Home windows-, iOS- und Android-Builds sind „bald verfügbar“.

Was ist ChatGPT Atlas?

Atlas ist ein Chromium-basierter Browser, der eine dauerhafte ChatGPT-Schnittstelle auf der neuen Registerkarte und als „Ask ChatGPT“-Seitenleiste auf jeder Web site bereithält. Benutzer können Seiten zusammenfassen, Produkte vergleichen, Daten extrahieren und Textual content direkt bearbeiten (Unterstützung auf Cursorebene in Formularfeldern). Atlas führt außerdem optionale „Browser-Speicher“ ein, die datenschutzgefilterte Zusammenfassungen der von Ihnen besuchten Seiten speichern, um spätere Unterstützung zu personalisieren.

In einem Vorschau-„Agentenmodus“ kann ChatGPT Aktionen in Ihrem Browser ausführen: Tabs öffnen, klicken und mehrstufige Aufgaben (z. B. Recherche + Einkaufen) mit expliziten Prüfpunkten für die Benutzergenehmigung erledigen. Der Agent läuft mit harten Grenzen: Er kann keinen Code im Browser ausführen, Dateien herunterladen, Erweiterungen installieren, auf Ihr Dateisystem zugreifen oder gespeicherte Passwörter/Autofill lesen; Seiten, die im Agentenmodus besucht werden, werden nicht zum Verlauf hinzugefügt.

Wichtige Fakten zur Markteinführung

• Motor und Foundation: Atlas ist „auf Chrom gebaut“.
• Plattform: zuerst macOS (Apple Silicon, macOS 12+), weitere Plattformen geplant.
• Importieren: Passwörter, Lesezeichen und Verlauf können aus anderen Browsern importiert werden.
• Datenschutzstandards: Inhalte, die Sie durchsuchen, sind nicht Wird zum Trainieren von Modellen verwendet, es sei denn, Sie entscheiden sich dafür. Ein separater Schalter („Helfen Sie dabei, das Surfen und die Suche zu verbessern“) teilt Diagnosen und ist An standardmäßig. Inkognito meldet Sie von ChatGPT ab; Abgemeldete Chats werden 30 Tage lang separat aufbewahrt, um Missbrauch zu verhindern.

Vergleich von Atlas mit Google Chrome

Was ist (Stand jetzt) ​​besser als Chrome?

• Nativer KI-Agent und Seitenleiste: ChatGPT ist erstklassig. Die Seitenleiste und die Bearbeitung im Feld funktionieren auf jeder Seite; Im Agentenmodus können Aufgaben tabellarübergreifend mit für den Benutzer sichtbaren Steuerelementen ausgeführt werden. Chrome erfordert Add-ons oder externe Apps für gleichwertiges Agentenverhalten.
• Aufgabenzentrierter neuer Tab und einheitliche Ergebnisse: Der neue Tab von Atlas verbindet Chat mit Suchlinks, Bildern, Movies und Nachrichten und reduziert so den Kontextwechsel.
• Browserspeicher (non-obligatory): datenschutzgefilterte, zeitbegrenzte Zusammenfassungen, die die zukünftige Unterstützung verbessern; Die Zusammenfassung auf dem Gerät ist in neueren macOS-Builds verfügbar. Chrome verfügt nicht über eine entsprechende Funktion, die in ein Konversationsmodell integriert ist.
• Sicherheitsgeländer für Agenten klar dokumentiert: explizite Verbote (keine Codeausführung, keine Dateidownloads, keine Erweiterungsinstallationen, kein Passwort-/Autofill-Zugriff) und der „abgemeldete“ Agentenmodus verringern den Explosionsradius beim Delegieren von Aufgaben. Chrome verfügt über keinen integrierten Net-Agenten, der solche Leitplanken erfordert.

Was ist das Gleiche wie Chrome??

• Rendering-Stack und Kern-UX: Atlas basiert auf Chromium und verfügt über moderne Webkompatibilität, Tab-Looking, Passwort-/Passkey-Supervisor und vertraute Einstellungen/Menüs; Lesezeichen und Datenimport spiegeln die Chromium-Konventionen wider.
• Inkognito-Semantik: Non-public Fenster schließen Aktivitäten aus dem Verlauf und dem ChatGPT-Kontokontext aus (Atlas meldet Sie im Inkognito-Modus ab), analog zur Trennung des privaten Modus von Chrome.

Was ist schlimmer als Chrome (beim Begin)?

• Plattformabdeckung: Atlas ist heute nur für macOS verfügbar; Chrome ist plattformübergreifend (Desktop/Mobil). Home windows/iOS/Android für Atlas sind geplant, aber noch nicht lieferbar.
• Unternehmensreife: Geschäft ist Beta; Für Enterprise/Edu ist eine Administratorfreigabe erforderlich. Die Enterprise-Steuerelemente von Chrome sind seit langem vorhanden.
• Erweiterungen/Devtools-Standing: Dokumentation tut es nicht Geben Sie die Kompatibilität mit dem Chrome Net Retailer an, und der Agent von Atlas kann ausdrücklich keine Erweiterungen installieren. OpenAI listet „verbesserte Entwicklertools“ auf der Roadmap auf, was auf Paritätslücken zum ausgereiften DevTools-Ökosystem von Chrome hindeutet. Behandeln Sie die Erweiterungsunterstützung beim Begin als unbestätigt.
• Telemetrie-Normal: Die Diagnose „Helfen Sie dabei, das Surfen und die Suche zu verbessern“ ist standardmäßig aktiviert (getrennt von der Schulungs-Decide-in-Funktion). Chrome sammelt standardmäßig auch Diagnosedaten, aber die Atlas-Einstellung ist eine neue Oberfläche, die Groups prüfen müssen.

ChatGPT Atlas wertet den Browser sinnvoll in einen KI-nativen Arbeitsbereich auf: Permanente ChatGPT-Oberflächen (neue Registerkarte, Seitenleiste, Feldbearbeitungen) reduzieren Kontextwechsel für Zusammenfassung, Vergleich und Extraktion; ein Vorschau-Agent-Modus koordiniert mehrstufige Aufgaben über Registerkarten hinweg; und optionale Browserspeicher und klare Datenkontrollen (Trainings-Decide-in aus; Diagnose einschalten) sind dokumentiert.

• Intestine: Kompatibilität auf Chromium-Ebene und einfache Migration (Import von Passwörtern, Lesezeichen, Verlauf) sowie explizite Sicherheitsgrenzen für den Agenten.
• Schlecht: Beim Begin nur für macOS verfügbar, die Erweiterungs-/Devtools-Parität mit Chrome wird nicht angegeben und der Agent kann keine Erweiterungen installieren oder Dateien herunterladen – was den Automatisierungsumfang im Vergleich zum erweiterten Ökosystem von Chrome einschränkt.

Google hat gerade seinen neuen agentenbasierten Webbrowser von Google DeepMind vorgestellt, der auf Gemini 2.5 Professional basiert. Basierend auf der Gemini-API kann es Net- und App-Schnittstellen „sehen“ und mit ihnen interagieren: Klicken, Tippen und Scrollen wie ein Mensch. Dieses neue KI-Webautomatisierungsmodell schließt die Lücke zwischen Verstehen und Handeln. In diesem Artikel werden wir die wichtigsten Funktionen von Gemini Laptop Use, seine Fähigkeiten und die Integration in Ihr System untersuchen Agentische KI-Workflows.

Was ist Gemini 2.5 Computernutzung?

Gemini 2.5 Laptop Use ist ein KI-Assistent, der einen Browser mithilfe natürlicher Sprache steuern kann. Sie beschreiben ein Ziel und es führt die Schritte aus, die zu seiner Verwirklichung erforderlich sind. Basierend auf dem neuen computer_use-Instrument in der Gemini-API analysiert es Screenshots einer Webseite oder App und generiert dann Aktionen wie „Klicken“, „Eingeben“ oder „Scrollen“. Ein Consumer wie Playwright führt diese Aktionen aus und gibt den nächsten Bildschirm zurück, bis die Aufgabe erledigt ist.

Das Modell interpretiert Schaltflächen, Textfelder und andere Elemente der Benutzeroberfläche, um zu entscheiden, wie es vorgehen soll. Im Rahmen Gemini 2.5 Professionalverfügt es über ein starkes visuelles Denken, das es ihm ermöglicht, komplexe Aufgaben auf dem Bildschirm mit minimalem menschlichen Aufwand zu erledigen. Derzeit konzentriert es sich auf Browserumgebungen und steuert keine Desktop-Apps außerhalb des Browsers.

Schlüsselfunktionen

• Automatisieren Sie die Dateneingabe und das Ausfüllen von Formularen auf Web sites. Der Agent wird in der Lage sein, Felder zu finden, Textual content einzugeben und ggf. Formulare einzureichen.
• Führen Sie Exams von Webanwendungen und Benutzerflüssen durch, indem Sie auf Seiten klicken, Ereignisse auslösen und sicherstellen, dass Elemente korrekt angezeigt werden.
• Führen Sie Recherchen auf mehreren Web sites durch. Es kann beispielsweise Informationen zu Produkten, Preisen oder Bewertungen auf mehreren E-Commerce-Seiten sammeln und die Ergebnisse zusammenfassen.

Wie greife ich auf die Computernutzung von Gemini 2.5 zu?

Die experimentellen Funktionen von Gemini 2.5 Laptop Use sind jetzt für jeden Entwickler zum Spielen öffentlich verfügbar. Entwickler müssen sich lediglich über für die Gemini-API anmelden AI Studio oder Vertex AI und fordern Sie dann Zugriff auf das Computernutzungsmodell an. Google stellt Dokumentation, ausführbare Codebeispiele und Referenzimplementierungen bereit, die Sie ausprobieren können. Die Gemini-API-Dokumente bieten beispielsweise ein Beispiel für die vierstufige Agentenschleife, komplett mit Beispielen in Python unter Verwendung von Google Cloud GenAI SDK und Dramatiker.

Sie würden hierfür entweder eine Browser-Automatisierungsumgebung wie Playwright einrichten und die folgenden Schritte ausführen:

• Melden Sie sich über AI Studio oder Vertex AI für die Gemini-API an.
• Fordern Sie Zugriff auf das Computernutzungsmodell an.
• Sehen Sie sich die Dokumentation von Google, ausführbare Codebeispiele und Referenzimplementierungen an.

Als Beispiel gibt es ein Beispiel für eine Agentenschleife, bei der vier Schritte in Python verwendet werden, die von Google mit dem GenAI SDK und Playwright bereitgestellt werden, um den Browser zu automatisieren.

Lesen Sie auch: Wie kann ich auf die Gemini-API zugreifen und sie verwenden?

Einrichten der Umgebung

Hier ist das allgemeine Beispiel dafür, wie das Setup mit Ihrem Code aussieht:

Erstkonfiguration und Gemini-Consumer

# Load setting variables 

from dotenv import load_dotenv 

load_dotenv() 

# Initialize Gemini API consumer 

from google import genai 

consumer = genai.Consumer() 

# Set display screen dimensions (really useful by Google) 

SCREEN_WIDTH = 1440 

SCREEN_HEIGHT = 900 

Wir beginnen mit der Einrichtung der Umgebungsvariablen, dem Laden der API-Anmeldeinformationen und der Initialisierung des Gemini-Shoppers. Die von Google empfohlenen Bildschirmabmessungen werden definiert und später verwendet, um normalisierte Koordinaten in die tatsächlichen Pixelwerte umzuwandeln, die für Aktionen in der Benutzeroberfläche erforderlich sind.

Browser-Automatisierung mit Playwright

Als Nächstes richtet der Code Playwright für die Browser-Automatisierung ein:

from playwright.sync_api import sync_playwright 

playwright = sync_playwright().begin() 

browser = playwright.chromium.launch( 

headless=False, 

args=( 

'--disable-blink-features=AutomationControlled', 

'--disable-dev-shm-usage', 

'--no-sandbox', 

) 

) 

context = browser.new_context( 

viewport={"width": SCREEN_WIDTH, "peak": SCREEN_HEIGHT}, 

user_agent="Mozilla/5.0 (Home windows NT 10.0; Win64; x64) AppleWebKit/537.36 Chrome/131.0.0.0 Safari/537.36", 

) 

web page = context.new_page() 

Definieren der Aufgaben- und Modellkonfiguration

Hier starten wir einen Chromium-Browser und nutzen die Anti-Erkennungs-Flags, um zu verhindern, dass Webseiten die Automatisierung erkennen. Dann definieren wir ein realistisches Ansichtsfenster und einen Benutzeragenten, um einen normalen Benutzer zu emulieren und eine neue Seite zu erstellen, um zu navigieren und die Interaktion zu automatisieren.

Nachdem der Browser eingerichtet und einsatzbereit ist, wird das Modell mit dem Ziel des Benutzers und dem ersten Screenshot versehen:

from google.genai.varieties import Content material, Half 

USER_PROMPT = "Go to BBC Information and discover at the moment's prime expertise headlines" 

initial_screenshot = web page.screenshot(kind="png") 

contents = ( 

Content material(position="person", elements=( 

Half(textual content=USER_PROMPT), 

Half.from_bytes(information=initial_screenshot, mime_type="picture/png") 

)) 

) 

USER_PROMPT definiert, welche Aufgabe in natürlicher Sprache der Agent ausführen wird. Es erfasst einen ersten Screenshot des Standing der Browserseite, der dann zusammen mit der Eingabeaufforderung an das Modell gesendet wird. Sie werden mit dem Content material-Objekt gekapselt, das später auch an das Gemini-Modell übergeben wird.

Schließlich wird die Agentenschleife ausgeführt, indem sie den Standing an das Modell sendet und die von ihm zurückgegebenen Aktionen ausführt:

Das Instrument computer_use fordert das Modell auf, Funktionsaufrufe zu erstellen, die dann in der Browserumgebung ausgeführt werden. think_config enthält die Zwischenschritte der Argumentation, um dem Benutzer Transparenz zu bieten, was für die spätere Fehlerbehebung oder das Verständnis des Entscheidungsprozesses des Agenten nützlich sein kann.

from google.genai.varieties import varieties 

config = varieties.GenerateContentConfig( 

instruments=(varieties.Instrument( 

computer_use=varieties.ComputerUse( 

setting=varieties.Surroundings.ENVIRONMENT_BROWSER 

) 

)), 

thinking_config=varieties.ThinkingConfig(include_thoughts=True), 

)

Wie funktioniert es?

Gemini 2.5 Laptop Use läuft als Closed-Loop-Agent. Sie geben ihm ein Ziel und einen Screenshot vor, er sagt die nächste Aktion voraus, führt sie über den Consumer aus und überprüft dann den aktualisierten Bildschirm, um zu entscheiden, was als nächstes zu tun ist. Diese Rückkopplungsschleife ermöglicht es Zwillingen, ähnlich wie ein Mensch, der in einem Browser navigiert, zu sehen, zu denken und zu handeln. Der gesamte Prozess wird von der angetrieben computer_use Instrument in der Gemini-API.

Die Kern-Suggestions-Schleife

Der Agent arbeitet in einem kontinuierlichen Zyklus, bis die Aufgabe abgeschlossen ist:

1. Eingabeziel und Screenshot: Das Modell erhält die Anweisung des Benutzers (z. B. „High-Tech-Schlagzeilen finden“) und den Screenshot des aktuellen Standing des Browsers.
2. Generieren Sie Aktionen: Das Modell schlägt einen oder mehrere Funktionsaufrufe vor, die UI-Aktionen mit dem computer_use-Instrument entsprechen.
3. Aktionen ausführen: Das Consumer-Programm führt diese Funktionsaufrufe im Browser aus.
4. Erfassen Sie Suggestions: Ein neuer Screenshot und eine neue URL werden erfasst und an das Modell zurückgesendet.

Was das Modell in jeder Iteration sieht

Bei jeder Iteration erhält das Modell drei Schlüsselinformationen:

• Benutzeranfrage: Das Ziel oder die Anweisung in natürlicher Sprache (Beispiel: „Finden Sie die High-Schlagzeilen“)
• Aktueller Screenshot: Ein Bild Ihres Browser- oder App-Fensters und seines aktuellen Standing
• Aktionsgeschichte: Eine Aufzeichnung der bisher ergriffenen Maßnahmen (für den Kontext)

Das Modell analysiert den Screenshot und das Ziel des Benutzers und generiert dann einen oder mehrere Funktionsaufrufe– jeweils eine UI-Aktion darstellend. Zum Beispiel:

{"identify": "click_at", "args": {"x": 400, "y": 600}}

Dies würde den Agenten anweisen, auf diese Koordinaten zu klicken.

Aktionen im Browser ausführen

Das Consumer-Programm (unter Verwendung der Maus- und Tastatur-APIs von Playwright) führt diese Aktionen im Browser aus. Hier ist ein Beispiel, wie Funktionsaufrufe ausgeführt werden:

def execute_function_calls(candidate, web page, screen_width, screen_height):
    for half in candidate.content material.elements:
        if half.function_call:
            fname = half.function_call.identify
            args = half.function_call.args
            if fname == "click_at":
                actual_x = int(args("x") / 1000 * screen_width)
                actual_y = int(args("y") / 1000 * screen_height)
                web page.mouse.click on(actual_x, actual_y)
            elif fname == "type_text_at":
                actual_x = int(args("x") / 1000 * screen_width)
                actual_y = int(args("y") / 1000 * screen_height)
                web page.mouse.click on(actual_x, actual_y)
                web page.keyboard.kind(args("textual content"))
            # ...different supported actions...

Die Funktion analysiert die FunctionCall vom Modell zurückgegebenen Einträge und führt jede Aktion im Browser aus. Es wandelt normalisierte Koordinaten (0–1000) basierend auf der Bildschirmgröße in tatsächliche Pixelwerte um.

Erfassen von Suggestions für den nächsten Zyklus

Nach der Ausführung von Aktionen erfasst das System den neuen Zustand und sendet ihn an das Modell zurück:

def get_function_responses(web page, outcomes):
    screenshot_bytes = web page.screenshot(kind="png")
    current_url = web page.url
    function_responses = ()
    
    for identify, consequence, extra_fields in outcomes:
        response_data = {"url": current_url}
        response_data.replace(consequence)
        response_data.replace(extra_fields)
        function_responses.append(
            varieties.FunctionResponse(
                identify=identify,
                response=response_data,
                elements=(varieties.FunctionResponsePart(
                    inline_data=varieties.FunctionResponseBlob(
                        mime_type="picture/png",
                        information=screenshot_bytes
                    )
                ))
            )
        )
    return function_responses

Der neue Standing des Browsers wird eingepackt FunctionResponse Objekte, anhand derer das Modell darüber nachdenkt, was als nächstes zu tun ist. Die Schleife wird fortgesetzt, bis das Modell keine Funktionsaufrufe mehr zurückgibt oder bis die Aufgabe abgeschlossen ist.

Lesen Sie auch: High 7 Laptop Use Brokers

Schritte der Agentenschleife

Nach dem Laden des Instruments computer_use folgt eine typische Agentenschleife diesen Schritten:

1. Senden Sie eine Anfrage an das Modell: Fügen Sie das Ziel des Benutzers und einen Screenshot des aktuellen Browserstatus in den API-Aufruf ein
2. Modellantwort erhalten: Das Modell gibt eine Antwort zurück, die Textual content und/oder einen oder mehrere FunctionCall-Einträge enthält.
3. Führen Sie die Aktionen aus: Der Clientcode analysiert jeden Funktionsaufruf und führt die Aktion im Browser aus.
4. Suggestions erfassen und senden: Nach der Ausführung erstellt der Consumer einen neuen Screenshot und notiert die aktuelle URL. Diese werden in eine FunctionResponse verpackt und als nächste Benutzernachricht an das Modell zurückgesendet. Dadurch wird dem Modell das Ergebnis seiner Aktion mitgeteilt, sodass es den nächsten Schritt planen kann.

Dieser Vorgang läuft automatisch in einer Schleife ab. Wenn das Modell keine neuen Funktionsaufrufe mehr generiert, signalisiert es, dass die Aufgabe abgeschlossen ist. An diesem Punkt wird die endgültige Textausgabe zurückgegeben, beispielsweise eine Zusammenfassung der erreichten Ergebnisse. In den meisten Fällen durchläuft der Agent mehrere Zyklen, bevor er entweder das Ziel erreicht oder das festgelegte Zuglimit erreicht.

Weitere unterstützte Aktionen

Das Computernutzungstool von Gemini verfügt über Dutzende integrierter UI-Aktionen. Das Basisset umfasst Aktionen, die für webbasierte Anwendungen typisch sind, darunter:

• open_web_browser: Initialisiert den Browser, bevor die Agentenschleife beginnt (normalerweise vom Consumer verarbeitet).
• click_at: Klickt auf eine bestimmte (x, y)-Koordinate auf der Seite.
• type_text_at: Klicken Sie auf eine Stelle und geben Sie eine bestimmte Zeichenfolge ein. Drücken Sie optionally available die Eingabetaste.
• navigieren: Öffnet eine neue URL im Browser.
• go_back / go_forward: Geht im Browserverlauf vorwärts oder rückwärts.
• hover_at: Bewegt die Maus an einen bestimmten Punkt, um Hover-Effekte auszulösen.
• scroll_document / scroll_at: Scrollt die gesamte Seite oder einen bestimmten Abschnitt.
• Schlüsselkombination: Simuliert das Drücken von Tastaturkürzeln.
• wait_5_seconds: Hält die Ausführung an, nützlich zum Warten auf Animationen oder Seitenladevorgänge.
• Drag_and_Drop: Klicken Sie auf ein Aspect und ziehen Sie es an eine andere Place auf der Seite.

In der Dokumentation von Google wird erwähnt, dass die Beispielimplementierung die drei häufigsten Aktionen umfasst: open_web_browser, click_at und type_text_at. Sie können dies erweitern, indem Sie weitere benötigte Aktionen hinzufügen oder solche ausschließen, die für Ihren Workflow nicht related sind.

Leistung und Benchmarks

Gemini 2.5 Laptop Use bietet eine starke Leistung bei UI-Steuerungsaufgaben. In Googles Exams erreichte es eine Genauigkeit von über 70 % mit einer Latenz von etwa 225 ms und übertraf damit andere Modelle bei Net- und mobilen Benchmarks wie dem Durchsuchen von Web sites und dem Abschließen von App-Workflows.

In der Praxis kann der Agent Aufgaben wie das Ausfüllen von Formularen und das Abrufen von Daten zuverlässig erledigen. Unabhängige Benchmarks stufen es als das genaueste und schnellste öffentliche KI-Modell für die einfache Browserautomatisierung ein. Seine starke Leistung beruht auf der visuellen Argumentation von Gemini 2.5 Professional und einer optimierten API-Pipeline. Da es sich noch in der Vorschau befindet, sollten Sie seine Aktionen überwachen, da gelegentlich Fehler auftreten können.

Lesen Sie auch:

Abschluss

Die Gemini 2.5-Computernutzung ist eine bedeutende Entwicklung in der KI-gestützten Automatisierung, die es Agenten ermöglicht, effektiv und effizient mit realen Schnittstellen zu interagieren. Damit können Entwickler Aufgaben wie Webbrowsing, Dateneingabe oder Datenextraktion mit großer Genauigkeit und Geschwindigkeit automatisieren.

Im öffentlich zugänglichen Zustand können wir Entwicklern eine Möglichkeit bieten, sicher mit den Funktionen von Gemini 2.5 Laptop Use zu experimentieren und es in ihre eigenen Arbeitsabläufe zu integrieren. Insgesamt stellt es einen flexiblen Rahmen dar, mit dem intelligente Assistenten der nächsten Era oder leistungsstarke Automatisierungsworkflows für eine Vielzahl von Anwendungen und Bereichen erstellt werden können.

AI Search Startup Verwirrung macht seinen Comet -Browser allen Benutzern kostenlos zur Verfügung und positioniert das Produkt, um mit großen Suchmaschinen und Browsern zu konkurrieren. Um den kostenlosen Begin zu begleiten, hat das Unternehmen auch einen neuen „Hintergrundassistenten“ für seine Premium -Abonnenten eingeführt und eine Partnerschaft mit Chess.com zur Förderung der Adoption angekündigt.

Der Verwirrung Comet Browserdas vor drei Monaten exklusiv für Abonnenten des MAX-Plans von Verwirrung von 200 US-Greenback professional Monat gestartet wurde, bietet einen Sidecar-Assistenten, der den Benutzern hilft, Inhalte zusammenzufassen, Fragen zu Webseiten zu beantworten und deren Browser zu verwalten.

Der Umzug zu einem kostenlosen Modellposition, der Comet in den Wettbewerb mit etablierten Browsern wie Google Chrome, Newcomern wie DIA und dem erwarteten AI-angetriebenen Browser von OpenAI konkurriert. Um erfolgreich zu sein, muss die Verwirrung nachweisen, dass die Agentenfunktionen des Comet zuverlässige Produktivitätsgewinne bieten, die die Benutzer dazu ermutigen, aus ihren aktuellen Browsern zu wechseln.

Neuer „Hintergrundassistent“ für Max -Abonnenten

Für Benutzer seines obersten maximalen Plans führt die Verwirrung einen neuen „Hintergrundassistenten“ ein. Ein Unternehmenssprecher beschrieb es als „ein Staff von Assistenten, die für Sie arbeiten“, das aus einem zentralen „Mission Management“ -Reshboard verwaltet werden kann.

https://www.youtube.com/watch?v=yeldj4Uezdq

Der Assistent wurde entwickelt, um mehrere Aufgaben auf einem Pc im Hintergrund auszuführen, während sich der Benutzer auf andere Arbeiten konzentriert. Beispielsweise könnte ein Benutzer den Assistenten anweisen, eine E -Mail zu senden, die günstigsten Tickets für ein Konzert in einen Einkaufswagen hinzuzufügen und den besten direkten Flug an einem bestimmten Datum zu finden. Der Benutzer kann den Fortschritt im Dashboard überwachen und eingreifen oder an jedem Punkt übernehmen. Der Hintergrundassistent verfügt außerdem über „bessere Anschlüsse“, sodass er auf andere Anwendungen auf dem Pc des Benutzers zugreifen kann.

Partnerschaft mit Chess.com, um die Adoption voranzutreiben

Um Benutzer zum Herunterladen des neuen kostenlosen Browsers zu ermutigen, hat sich die Verwirrung mit schess.com zusammengetan. Vom 2. Oktober bis zum 1. November erhält jeder, der sich mit dem Comet -Browser in sein Schachkonto anmeldet, besondere Leistungen.

• 30 Tage Schach.com Premium: Benutzer erhalten einen vollen Monat exklusiver Funktionen, einschließlich Anzeigenfreiheit, unbegrenzten Spielbewertungen, unbegrenzten Rätseln und Zugriff auf alle Lektionen.
• Eintritt zum 2025 Comet Open: Die Partnerschaft umfasst ein neues Turnier mit einem Preis von 200.000 US -Greenback, der allen Spielern offen ist, die mit dem Comet -Browser teilnehmen. Das Turnier findet vom 11. bis 12. Oktober und vom 18. bis 19. Oktober statt.

„Die Group von Chess.com umfasst Strategie, Neugier und kontinuierliches Lernen – Qualitäten, die auch definieren, wie Menschen Verwirrung verwenden. Diese Partnerschaft ist eine natürliche Passform, insbesondere wenn wir unseren Comet -Browser vorstellen.“

sagte Ryan Foutty, Verwirrungs -Vizepräsident von Enterprise.

Abonnements und Funktionen

Während der Kernbrowser jetzt kostenlos ist, bietet die Verwirrung weiterhin mehrere bezahlte Ebenen mit zusätzlichen Funktionen an.

• Kostenlose Benutzer: Erhalten Sie mit seinem SIDECAR -Assistenten sowie Instruments wie Uncover für personalisierte Inhalte, Räume für die Projektorganisation und Assistenten für Einkaufen, Reisen, Finanzen und Sport zu Zugang zum Comet -Browser.
• Comet Plus ($ 5/Monat): Ein bevorstehendes eigenständiges Abonnement, das eine AI-verbesserte Different zu Apple Information bietet.
• Professional -Benutzer (20 USD/Monat): Erhalten Sie Zugriff auf erweiterte KI -Modelle, Bild- und Videogenerierung sowie Datei -Add- und Analysefunktionen. Professional -Benutzer erhalten auch Zugriff auf Comet Plus.
• Max -Benutzer ($ 200/Monat): Erhalten Sie Zugriff auf die höchsten KI-Modelle, den E-Mail-Assistenten, den frühen Zugriff auf neue Funktionen und den neuen Hintergrundassistenten. Max -Benutzer erhalten außerdem Zugriff auf Comet Plus.

---

Ausgewähltes Bildnachweis

In den letzten Jahren ist Python zu einer der am häufigsten verwendeten Programmiersprachen geworden. Python hat jedoch bisher keine große Rolle bei der Webentwicklung gespielt. Pyscript ist hier, um das zu ändern. Es ist ein neues Framework, mit dem Sie Python -Code direkt in Ihrem Webbrowser mit nur HTML- und Python -Code ausführen können. Unabhängig von Ihrer Erfahrungsstufe ist es wirklich einfach, Pyscript zu verwenden, um interaktive Internet -Apps zu entwickeln, ohne JavaScript zu kennen. In diesem Tutorial erfahren Sie, wie es ist, wie es funktioniert und wie Sie Ihre erste in Browser-basierte Python-App erstellen.

Was ist pyskript

Pyscript ist ein Open-Supply-Framework, das die Lücke zwischen den Python und das Internet. Damit können Sie den Python -Code direkt in Ihrem Webbrowser ausführen. Ermöglichen, interaktive Python -Anwendungen zu schreiben, die vollständig auf der Consumer -Seite ausgeführt werden, ohne einen Backend -Server zu benötigen. Pyscript ist wie das Schreiben einer Internet -App mit Python anstelle von JavaScript. Sie können einfache interaktive Internet -Instruments, Dashboards und mehr mit Python erstellen.

Schlüsselmerkmale von Pyscript

1. Python im Browser: Sie können Python -Code darin schreiben <py-script> Tags in Ihrer HTML -Datei
2. Kein Umgebungsaufbau: Es ist nicht erforderlich, zusätzliche Bibliotheken oder Instruments zu installieren. Es läuft im Browser.
3. Interaktivität mit HTML: Integriert Python einfach in HTML, CSS und JavaScript.
4. Durch WebAssembly betrieben: Verwendung Pyodid(Python, kompiliert für WebAssembly), um Python im Browser auszuführen.

Wie benutze ich Pyscript für Ihre WebApp?

Schritt 1: Besuchen Sie die offizielle Web site

Besuchen Sie die offizielle Web site. Hier können Sie Demos, Dokumentation und selbst ausprobieren.

Schritt 2: Richten Sie eine grundlegende HTML-Datei ein

Um Pyscript auszuführen, benötigen Sie eine einfache HTML -Datei mit dem erforderlichen Framework.

Beispielcode:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <title>My First PyScript App</title>

    <hyperlink rel="stylesheet" href="https://pyscript.web/newest/pyscript.css" />

    <script defer src="https://pyscript.web/newest/pyscript.js"></script>

  </head>

  <physique>

    <h1>Good day from PyScript!</h1>

    <py-script>

      identify = "PyScript"

      print(f"Good day, {identify}! You might be operating Python within the browser.")

    </py-script>

  </physique>

</html>

Schritt 3: Öffnen Sie die HTML -Datei in einem Browser.

Standardmäßig gibt es 3 Dateien:

fundamental.py: Your Python code.
Index.html: The principle net web page that features PyScript.
pyscript.toml: A configuration file itemizing any additional Python packages you
wish to use.

Aktualisieren Sie die Codedateien mit den entsprechenden Codes und beginnen Sie mit dem Experimentieren:

Sie können den Pyscript -Spielplatz unter ausprobieren Pyskript -Beispiele Um Code -Snippets direkt in Ihrem Browser zu testen.

Praktisch mit Pyscript

Nachdem Sie mit der Funktionsweise der Pyscript-Schnittstelle vertraut sind, lassen Sie uns einige praktische Informationen damit ausführen.

Wir werden ein Zwei-Spieler-Tic-Tac-Toe-Spiel bauen.

Schritt 1: Replace fundamental.py

Fügen Sie die hinzu fundamental.py Datei mit der TicTacToe Klasse, die die Spiellogik, die Benutzerinteraktionen und die UI -Updates enthält. Es wird PyWeb verwenden, um Python mit HTML zu verbinden, wodurch das Spiel im Browser vollständig interaktiv ist.

Code:

from pyweb import pydom

class TicTacToe:

    def __init__(self):

        self.board = pydom("desk#board")

        self.standing = pydom("h2#standing")

        self.console = pydom("script#console")(0)

        self.init_cells()

        self.init_winning_combos()

        self.new_game(...)

    def set_status(self, textual content):

        self.standing.html = textual content

    def init_cells(self):

        self.cells = ()

        for i in (0, 1, 2):

            row = ()

            for j in (0, 1, 2):

                cell = pydom(f"div#cell{i}{j}")(0)

                assert cell

                row.append(cell)

            self.cells.append(row)

    def init_winning_combos(self):

        self.winning_combos = ()

        # profitable columns

        for i in (0, 1, 2):

            combo = ()

            for j in (0, 1, 2):

                combo.append((i, j))

            self.winning_combos.append(combo)

        # profitable rows

        for j in (0, 1, 2):

            combo = ()

            for i in (0, 1, 2):

                combo.append((i, j))

            self.winning_combos.append(combo)

        # profitable diagonals

        self.winning_combos.append(((0, 0), (1, 1), (2, 2)))

        self.winning_combos.append(((0, 2), (1, 1), (2, 0)))

    def new_game(self, occasion):

        self.clear_terminal()

        print('=================')

        print('NEW GAME STARTING')

        print()

        for i in (0, 1, 2):

            for j in (0, 1, 2):

                self.set_cell(i, j, "")

        self.current_player = "x"

experimenting        self.set_status(f'{self.current_player} enjoying...')

    def next_turn(self):

        winner = self.check_winner()

        if winner == "tie":

            self.set_status("It is a tie!")

            self.current_player = "" # i.e., recreation ended

            return

        elif winner is just not None:

            self.set_status(f'{winner} wins')

            self.current_player = "" # i.e., recreation ended

            return

        if self.current_player == "x":

            self.current_player = "o"

        else:

            self.current_player = "x"

        self.set_status(f'{self.current_player} enjoying...')

    def check_winner(self):

        """

        Verify whether or not the sport as any winner.

        Return "x", "o", "tie" or None. None implies that the sport continues to be enjoying.

        """

        # verify whether or not we've a winner

        for combo in self.winning_combos:

            winner = self.get_winner(combo)

            if winner:

                # spotlight the profitable cells

                for i, j in combo:

                    self.cells(i)(j).add_class("win")

                return winner

        # verify whether or not it is a tie

        for i in (0, 1, 2):

            for j in (0, 1, 2):

                if self.get_cell(i, j) == "":

                    # there's at the very least an empty cell, it is not a tie

                    return None # recreation nonetheless enjoying

        return "tie"

    def get_winner(self, combo):

        """

        If all of the cells on the given factors have the identical worth, return it.

        Else return "".

        Every level is a tuple of (i, j) coordinates.

        Instance:

            self.get_winner(((0, 0), (1, 1), (2, 2)))

        """

        assert len(combo) == 3

        values = (self.get_cell(i, j) for i, j in combo)

        if values(0) == values(1) == values(2) and values(0) != "":

            return values(0)

        return ""

    def set_cell(self, i, j, worth):

        assert worth in ("", "x", "o")

        cell = self.cells(i)(j)

        cell.html = worth

        if "x" in cell.lessons:

            cell.remove_class("x")

        if "o" in cell.lessons:

            cell.remove_class("o")

        if "win" in cell.lessons:

            cell.remove_class("win")

        if worth != "":

            cell.add_class(worth)

    def get_cell(self, i, j):

        cell = self.cells(i)(j)

        worth = cell.html

        assert worth in ("", "x", "o")

        return worth

    def click on(self, occasion):

        i = int(occasion.goal.getAttribute('data-x'))

        j = int(occasion.goal.getAttribute('data-y'))

        print(f'Cell {i}, {j} clicked: ', finish='')

        if self.current_player == "":

            print('recreation ended, nothing to do')

            return

        #

        worth = self.get_cell(i, j)

        if worth == "":

            print('cell empty, setting it')

            self.set_cell(i, j, self.current_player)

            self.next_turn()

        else:

            print(f'cell already full, can't set it')

    def clear_terminal(self):

        self.console._js.terminal.clear()

    def toggle_terminal(self, occasion):

        hidden = self.console.mum or dad._js.getAttribute("hidden")

        if hidden:

            self.console.mum or dad._js.removeAttribute("hidden")

        else:

            self.console.mum or dad._js.setAttribute("hidden", "hidden")

GAME = TicTacToe()

Schritt 2: Erstellen Sie eine CSS -Datei

Erstellen a model.css Datei innerhalb der neu erstellten Vermögenswerte Ordner zum Definieren des Layouts und des Stils für das Tic-Tac-Toe-Spiel. Dies wird mit dem Styling der Platine, den Zellen und allen Statusnachrichten zu tun.

Code:

h1, h2 {

    font-family: 'Indie Flower', 'Comedian Sans', cursive;

    text-align: middle;

}

#board {

    font-family: 'Indie Flower', 'Comedian Sans', cursive;

    place: relative;

    font-size: 120px;

    margin: 1% auto;

    border-collapse: collapse;

}

#board td {

    border: 4px stable rgb(60, 60, 60);

    width: 90px;

    top: 90px;

    vertical-align: center;

    text-align: middle;

    cursor: pointer;

}

#board td div {

    width: 90px;

    top: 90px;

    line-height: 90px;

    show: block;

    overflow: hidden;

    cursor: pointer;

}

.x {

    colour: darksalmon;

    place: relative;

    font-size: 1.2em;

    cursor: default;

}

.o {

    colour: aquamarine;

    place: relative;

    font-size: 1.0em;

    cursor: default;

}

.win {

    background-color: beige;

}

Schritt 3: Replace index.html

Ändern der index.html Datei, um auf das Pyscript -Setup zu verweisen, laden Sie fundamental.pyDefinieren Sie die Spielbrettstruktur und verweisen Sie auf die model.css (aus Ihrem Vermögensordner) für das Styling.

Code:

<!doctype html>

<html>

    <head>

        <!-- Advisable meta tags -->

        <meta charset="UTF-8">

        <meta identify="viewport" content material="width=device-width,initial-scale=1.0">

        <!-- PyScript CSS -->

        <hyperlink rel="stylesheet" href="https://pyscript.web/releases/2024.1.1/core.css">

        <!-- CSS for examples -->

        <hyperlink rel="stylesheet" href="./belongings/css/examples.css" />

        <!-- This script tag bootstraps PyScript -->

        <script sort="module" src="https://pyscript.web/releases/2024.1.1/core.js"></script>

        <!-- Customized CSS -->

        <hyperlink href="https://fonts.googleapis.com/css?household=Indie+Flower" rel="stylesheet">

        <hyperlink rel="stylesheet" href="./belongings/css/tictactoe.css" />

        <!-- for splashscreen -->

        <model>

            #loading { define: none; border: none; background: clear }

        </model>

        <script sort="module">

            const loading = doc.getElementById('loading');

            addEventListener('py:prepared', () => loading.shut());

            loading.showModal();

        </script>

        <title>Tic Tac Toe</title>

        <hyperlink rel="icon" sort="picture/png" href="./belongings/favicon.png" />

    </head>

    <physique>

        <dialog id="loading">

            <h1>Loading...</h1>

        </dialog>

        <nav class="navbar" model="background-color: #000000">

            <div class="app-header">

                <a href="/">

                    <img src="./belongings/emblem.png" class="emblem" />

                </a>

                <a category="title" href="" model="colour: #f0ab3c">Tic Tac Toe</a>

            </div>

        </nav>

        <part class="pyscript">

            <h1>Tic-Tac-Toe</h1>

            <script sort="py" src="./fundamental.py" config="./pyscript.toml"></script>

            <desk id="board">

                <tr>

                    <td><div id="cell00" data-x="0" data-y="0" class="cell" py-click="GAME.click on"></div></td>

                    <td><div id="cell01" data-x="0" data-y="1" class="cell" py-click="GAME.click on"></div></td>

                    <td><div id="cell02" data-x="0" data-y="2" class="cell" py-click="GAME.click on"></div></td>

                <tr>

                    <td><div id="cell10" data-x="1" data-y="0" class="cell" py-click="GAME.click on"></div></td>

                    <td><div id="cell11" data-x="1" data-y="1" class="cell" py-click="GAME.click on"></div></td>

                    <td><div id="cell12" data-x="1" data-y="2" class="cell" py-click="GAME.click on"></div></td>

                </tr>

                <tr>

                    <td><div id="cell20" data-x="2" data-y="0" class="cell" py-click="GAME.click on"></div></td>

                    <td><div id="cell21" data-x="2" data-y="1" class="cell" py-click="GAME.click on"></div></td>

                    <td><div id="cell22" data-x="2" data-y="2" class="cell" py-click="GAME.click on"></div></td>

                </tr>

            </desk>

            <h2 id="standing"></h2>

            <button id="btn-new-game" py-click="GAME.new_game">New recreation</button>

            <button id="btn-toggle-terminal" py-click="GAME.toggle_terminal">Disguise/present terminal</button>

            <div id="terminal" hidden="hidden">

                <script id="console" sort="py" terminal></script>

            </div>

        </part>

    </physique>

</html>

Schritt 4: Replace pyscript.toml

Aktualisieren der pyscript.toml Datei mit der erforderlichen Konfiguration, die von der App benötigt wird, einschließlich Abhängigkeiten, Dateipfade usw. Dies stellt sicher, dass Pyscript weiß, wie man den Python -Code ordnungsgemäß laden und ausführt. Hier sind der Inhalt der pyscript.toml Datei für unsere Tic-Tac-Toe-Anwendung:

Konfiguration:

identify = "Tic Tac Toe"

description = "A Tic-Tac-Toe recreation written in PyScript that permits individuals to take turns."

Ausgabe:

Hier gehen Sie mit Ihrem ersten Projekt auf Pyscript.

Abschluss

Python wird in verwendet DatenwissenschaftAnwesend AiAutomatisierung und in Bildung wie nie zuvor. Bisher gab es im Web jedoch noch kein Heimathaus für Python. Pyscript ist angekommen und vereint die Einfachheit von Python mit der Zugänglichkeit des Webs. Es reift immer noch, aber es hat bereits viele Möglichkeiten für Entwickler, Pädagogen und Lernende geschaffen.