danielclopez0/web-agent-demo

Was macht web-agent-demo?

Demo von KI-Agenten, die Unternehmenssoftware über Browsersteuerung via Playwright MCP bedienen – bringen Sie Ihre eigene Website mit, der Agent führt die Aktionen durch.

Überblick

Dieses Projekt demonstriert, wie KI-Assistenten (z. B. Claude Code, Cursor, Codex) eine Webanwendung autonom steuern können, indem sie das Playwright MCP (Model Context Protocol) verwenden. Stellen Sie eine Ziel-URL bereit – der Agent übernimmt die Navigation, Klicks, Texteingaben und andere Interaktionen.

Funktionsweise

1. Playwright MCP stellt dem Agenten Werkzeuge zur Verfügung, um Browser zu öffnen, zu navigieren, Elemente zu finden (z. B. über CSS-Selektoren) und Aktionen auszuführen (klicken, tippen, scrollen).
2. Der Agent interpretiert Ihre Anweisungen (z. B. „Melde dich im CRM an und exportiere die Kundenliste“) und setzt sie in konkrete Browserschritte um.
3. Der Benutzer bringt seine eigene Website mit – keine speziellen APIs oder Hooks nötig. Der Agent arbeitet mit der Web-Oberfläche, wie ein menschlicher Benutzer.

Voraussetzungen

• Node.js (Version 18 oder höher)
• Playwright (wird automatisch installiert)
• Ein KI-Assistent, der MCP unterstützt (z. B. Claude Code)

Schnellstart

# Repository klonen
git clone https://github.com/danielclopez0/web-agent-demo.git
cd web-agent-demo

# Abhängigkeiten installieren
npm install

# Playwright-Browser installieren (falls nicht vorhanden)
npx playwright install chromium

# Konfiguration: Ziel-URL in .env setzen
cp .env.example .env
# Bearbeiten Sie .env und setzen Sie TARGET_URL=https://ihre-seite.com

# Agent starten (Beispiel mit Claude Code)
claude code --tool web-agent-demo

Konfiguration

Variable	Beschreibung	Standard
TARGET_URL	Die Webseite, die der Agent steuern soll	– (erforderlich)
PLAYWRIGHT_HEADLESS	Browser im Headless-Modus ausführen	true
MCP_PORT	Port für den MCP-Server	3000

Verwendung mit Claude Code

{
  "tools": [
    {
      "name": "danielclopez0/web-agent-demo",
      "url": "https://github.com/danielclopez0/web-agent-demo"
    }
  ]
}

Fügen Sie diesen Eintrag in Ihrer ~/.claude/config.json (oder projektbasierten Konfiguration) hinzu. Danach kann Claude die Webaktionen über Playwright ausführen.

Beispielsitzung

Stellen Sie sich vor, Sie möchten automatisch einen Einkauf in Ihrem ERP-System anlegen. Sie sagen dem Agenten:

„Öffne das ERP-Panel, logge dich mit Benutzer admin und Passwort geheim ein, navigiere zu „Aufträge → Neu“ und fülle das Formular mit den Daten aus der Datei auftrag.csv.“

Der Agent verbindet sich über Playwright mit Ihrer angegebenen URL, führt die Schritte aus und gibt das Ergebnis zurück (z. B. Bestätigungsmeldung oder Screenshot).

Lizenz

MIT – siehe LICENSE