Communitygithub.com

Slack-Automatisierung

Interagiere mit Slack-Workspaces mithilfe von Browser-Automation. Nützlich, wenn der Benutzer ungelesene Kanäle prüfen, Nachrichten senden, Daten extrahieren, Informationen finden oder Slack-Aufgaben automatisieren muss.

Was ist Slack-Automatisierung?

Diese Fähigkeit ermöglicht es KI-Agenten wie Claude Code, Cursor oder Codex, programmatisch mit Slack zu interagieren, ohne die offizielle Slack-API zu nutzen. Stattdessen wird eine Browser-Automation (via agent-browser) verwendet, um sich mit einer bestehenden Slack-Browser-Sitzung zu verbinden oder Slack über den Browser zu öffnen. Der Agent kann ungelesene Nachrichten prüfen, in Kanäle navigieren, Nachrichten suchen, Daten aus der Seitenstruktur extrahieren und Screenshots erstellen. Die Automatisierung basiert auf dem Accessibility-Tree des Browsers, um interaktive Elemente zu identifizieren und zu manipulieren. Besonders nützlich ist die Fähigkeit, wenn der Benutzer keine API-Zugangsdaten konfigurieren möchte oder eine schnelle, benutzerspezifische Interaktion mit seinem eigenen Slack-Workspace benötigt. Der Workflow umfasst typischerweise: Verbinden zum Browser, Snapshot der Seite, Navigation und Datenextraktion. Der Agent kann Befehle wie `agent-browser connect`, `snapshot -i`, `click`, `fill` und `screenshot` verwenden. Einschränkungen sind, dass keine API-Funktionen (OAuth, Webhooks) verfügbar sind und die Rate-Limiting von Slack beachtet werden muss.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vercel-labs/agent-browser/tree/main/skill-data/slack
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Was macht Slack-Automatisierung?

Interagiere mit Slack-Workspaces, um Nachrichten zu prüfen, Daten zu extrahieren und allgemeine Aufgaben zu automatisieren.

Schnellstart

Verbinde zu einer bestehenden Slack-Browser-Sitzung oder öffne Slack:

# Verbinde zu bestehender Sitzung auf Port 9222 (typisch für bereits geöffnetes Slack)
agent-browser connect 9222

# Oder öffne Slack, falls nicht bereits ausgeführt
agent-browser open https://app.slack.com

Dann erstelle einen Snapshot, um zu sehen, was verfügbar ist:

agent-browser snapshot -i

Kern-Workflow

  1. Verbinden/Navigieren: Slack öffnen oder verbinden
  2. Snapshot: Interaktive Elemente mit Referenzen (@e1, @e2, usw.) abrufen
  3. Navigieren: Tabs anklicken, Abschnitte erweitern oder zu bestimmten Kanälen navigieren
  4. Extrahieren/Interagieren: Daten auslesen oder Aktionen ausführen
  5. Screenshot: Nachweise der Ergebnisse erfassen
# Beispiel: Ungelesene Kanäle prüfen
agent-browser connect 9222
agent-browser snapshot -i
# Suche nach "Weitere ungelesene"-Button
agent-browser click @e21  # Referenz für "Weitere ungelesene"-Button
agent-browser screenshot slack-unreads.png

Allgemeine Aufgaben

Ungelesene Nachrichten prüfen

# Mit Slack verbinden
agent-browser connect 9222

# Snapshot erstellen, um Ungelesenen-Button zu lokalisieren
agent-browser snapshot -i

# Suche nach:
# - "Weitere ungelesene"-Button (normalerweise oben in der Seitenleiste)
# - "Aktivität"-Tab-Umschalter (zeigt Anzahl ungelesener Nachrichten)
# - Kanalnamen mit Abzeichen/fettem Text, die auf Ungelesene hinweisen

# Zum Aktivität-Tab navigieren, um alle Ungelesene in einer Ansicht zu sehen
agent-browser click @e14  # Aktivität-Tab (Referenz kann variieren)
agent-browser wait 1000
agent-browser screenshot activity-unreads.png

# Oder DM-Tab prüfen
agent-browser click @e13  # DM-Tab
agent-browser screenshot dms.png

# Oder "Weitere ungelesene" in der Seitenleiste erweitern
agent-browser click @e21  # Weitere ungelesene-Button
agent-browser wait 500
agent-browser screenshot expanded-unreads.png

Zu einem Kanal navigieren

# Nach Kanal in der Seitenleiste oder nach Name suchen
agent-browser snapshot -i

# Suche nach Kanalnamen in der Liste (z.B. "entwicklung", "produktdesign")
# Klicke auf die Kanal-Ref vom Typ treeitem
agent-browser click @e94  # Beispiel: Referenz für Entwicklungskanal
# Ersetze `entwicklung` mit dem Namen des angeklickten Kanals, sodass die alte
# Kanalüberschrift die Bedingung nicht erfüllen kann, während der neue Kanal noch rendert.
agent-browser wait --fn "document.querySelector('[data-qa=\"channel_header\"]')?.innerText.includes('entwicklung')"
agent-browser screenshot channel.png

Nachrichten/Threads finden

# Slack-Suche verwenden
agent-browser snapshot -i
agent-browser click @e5  # Such-Button (typische Referenz)
agent-browser fill @e_search "Suchbegriff"
agent-browser press Enter
# Gleiche die eingegebene Abfrage ab, damit eine wiederholte Suche die alte Route nicht wiederverwenden kann.
agent-browser wait --fn "location.pathname.includes('/search') && new URL(location.href).searchParams.get('q') === 'Suchbegriff'"
agent-browser screenshot search-results.png

Kanalinformationen extrahieren

# Liste aller sichtbaren Kanäle abrufen
agent-browser snapshot --json > slack-snapshot.json

# Nach Kanalnamen und Metadaten parsen
# Suche nach treeitem-Elementen mit level=2 (Unterkanäle unter Abschnitten)

Kanaldetails prüfen

# Einen Kanal öffnen
agent-browser click @e_channel_ref
agent-browser wait 1000

# Kanalinfo abrufen (Mitglieder, Beschreibung usw.)
agent-browser snapshot -i
agent-browser screenshot channel-details.png

# Durch Nachrichten scrollen
agent-browser scroll down 500
agent-browser screenshot channel-messages.png

Notizen machen/Zustand erfassen

Wenn du Ergebnisse aus Slack dokumentieren musst:

# Annotierten Screenshot erstellen (zeigt Elementnummern)
agent-browser screenshot --annotate slack-state.png

# Vollbild-Screenshot erstellen
agent-browser screenshot --full slack-full.png

# Aktuelle URL als Referenz abrufen
agent-browser get url

# Seitentitel abrufen
agent-browser get title

Seitenleistenstruktur

Das Verständnis der Slack-Seitenleiste hilft dir, effizient zu navigieren:

- Threads
- Huddles
- Entwürfe & gesendet
- Verzeichnisse
- [Abschnittsüberschriften - Externe Verbindungen, Markierte, Kanäle, usw.]
  - [Kanäle als treeitems aufgelistet]
- Direktnachrichten
  - [DMs aufgelistet]
- Apps
  - [App-Verknüpfungen]
- [Weitere ungelesene]-Button (schaltet Liste ungelesener Kanäle um)

Wichtige Referenzen, auf die du achten solltest:

  • @e12 - Home-Tab (normalerweise)
  • @e13 - DM-Tab
  • @e14 - Aktivität-Tab
  • @e5 - Such-Button
  • @e21 - Weitere ungelesene-Button (variiert pro Sitzung)

Tabs in Slack

Nachdem du auf einen Kanal geklickt hast, siehst du Tabs:

  • Nachrichten - Kanalunterhaltung
  • Dateien - Geteilte Dateien
  • Angepinnt - Angepinnte Nachrichten
  • Canvas hinzufügen - Kollaboratives Canvas
  • Andere Tabs je nach Arbeitsbereich-Konfiguration

Klicke auf Tab-Referenzen, um die Ansicht zu wechseln und andere Informationen zu erhalten.

Daten aus Slack extrahieren

Textinhalt abrufen

# Text einer Nachricht oder eines Elements abrufen
agent-browser get text @e_message_ref

Accessibility-Baum parsen

# Vollständigen Snapshot als JSON für programmatisches Parsen
agent-browser snapshot --json > output.json

# Suche nach:
# - Kanalnamen (name-Feld in treeitem)
# - Nachrichteninhalt (in listitem/document-Elementen)
# - Benutzernamen (button-Elemente mit Benutzerinfo)
# - Zeitstempel (link-Elemente mit Uhrzeitinfo)

Ungelesene zählen

# Nach Erweitern des Ungelesenen-Abschnitts:
agent-browser snapshot -i | grep -c "treeitem"
# Jedes treeitem mit einem Kanalnamen im Ungelesenen-Abschnitt ist eine ungelesene Nachricht

Best Practices

  • Verbinde zu bestehenden Sitzungen: Verwende agent-browser connect 9222, wenn Slack bereits geöffnet ist. Das ist schneller als das Öffnen eines neuen Browsers.
  • Snapshots vor dem Klicken machen: Immer snapshot -i verwenden, um Referenzen vor dem Klicken auf Buttons zu identifizieren.
  • Erneuten Snapshot nach Navigation: Nach dem Navigieren zu einem neuen Kanal oder Abschnitt einen neuen Snapshot erstellen, um neue Referenzen zu finden.
  • JSON-Snapshots zum Parsen verwenden: Wenn du strukturierte Daten extrahieren musst, verwende snapshot --json für maschinenlesbare Ausgabe.
  • Interaktionen rhythmisieren: Füge sleep 1 zwischen schnellen Interaktionen ein, damit die UI aktualisiert werden kann.
  • Accessibility-Baum prüfen: Der Accessibility-Baum zeigt, was Screenreader (und deine Automatisierung) sehen können. Wenn ein Element nicht im Snapshot ist, ist es möglicherweise versteckt oder erfordert Scrollen.
  • In der Seitenleiste scrollen: Verwende agent-browser scroll down 300 --selector ".p-sidebar", um in der Slack-Seitenleiste zu scrollen, wenn die Kanalliste lang ist.

Einschränkungen

  • Kein Zugriff auf Slack-API: Dies verwendet Browser-Automation, nicht die Slack-API. Kein OAuth, Webhooks oder Bot-Tokens erforderlich.
  • Sitzungsabhängig: Screenshots und Snapshots sind an die aktuelle Browser-Sitzung gebunden.
  • Ratenbegrenzung: Slack kann schnelle Interaktionen ratenbegrenzen. Füge bei Bedarf Verzögerungen zwischen Befehlen ein.
  • Arbeitsbereich-spezifisch: Du interagierst mit deinem eigenen Arbeitsbereich – keine arbeitsbereichsübergreifende Automatisierung.

Fehlerbehebung

Konsole auf Fehler prüfen

agent-browser console
agent-browser errors

Aktuellen Seitenstatus abrufen

agent-browser get url
agent-browser get title
agent-browser screenshot page-state.png

Beispiel: Vollständige Überprüfung ungelesener Nachrichten

#!/bin/bash

# Mit Slack verbinden
agent-browser connect 9222

# Ersten Snapshot erstellen
echo "=== Slack-Ungelesene überprüfen ==="
agent-browser snapshot -i > snapshot.txt

# Aktivität-Tab auf Ungelesene prüfen
agent-browser click @e14  # Aktivität-Tab
agent-browser wait 1000
agent-browser screenshot activity.png
ACTIVITY_RESULT=$(agent-browser get text @e_main_area)
echo "Aktivität: $ACTIVITY_RESULT"

# DMs prüfen
agent-browser click @e13  # DM-Tab
agent-browser wait 1000
agent-browser screenshot dms.png

# Ungelesene Kanäle in der Seitenleiste prüfen
agent-browser click @e21  # Weitere ungelesene-Button
agent-browser wait 500
agent-browser snapshot -i > unreads-expanded.txt
agent-browser screenshot unreads.png

# Zusammenfassung
echo "=== Zusammenfassung ==="
echo "Details siehe activity.png, dms.png und unreads.png"

Referenzen

Individual skills in this repo

This repo contains 8 individual skills — each has its own dedicated page.

agent-browser

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to

vercel-labs/agentcore

Run agent-browser on AWS Bedrock AgentCore cloud browsers. Use when the user wants to use AgentCore, run browser automation on AWS, use a cloud browser with AWS credentials, or needs a managed browser session backed by AWS infrastructure. Triggers include "use agentcore", "run on AWS", "cloud browser with AWS", "bedrock browser", "agentcore session", or any task requiring AWS-hosted browser automation.

vercel-labs/derive-client

Reverse-engineer a website's internal API by recording browser traffic into a HAR file, then generate a standalone client or CLI that calls the endpoints directly, with no browser needed after the first recording. Use when asked to "derive a client", "build a CLI for <site>", "reverse engineer this site's API", "record network requests", "turn this site into an API", or when the same site will be automated repeatedly and direct HTTP calls would beat driving the browser every time.

vercel-labs/dogfood

Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.

vercel-labs/electron

Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.

vercel-labs/protected-vercel-deployments

Access and test Vercel deployments protected by Vercel Authentication, SSO, or Deployment Protection with agent-browser. Use when a preview or production URL redirects to a Vercel login page, returns a protection 401 or 403, or needs short-lived Trusted Sources OIDC authentication instead of a static bypass secret or public exception.

vercel-labs/vercel-sandbox

Run agent-browser + Chrome inside Vercel Sandbox microVMs for browser automation from any Vercel-deployed app. Use when the user needs browser automation in a Vercel app (Next.js, SvelteKit, Nuxt, Remix, Astro, etc.), wants to run headless Chrome without binary size limits, needs persistent browser sessions across commands, or wants ephemeral isolated browser environments. Triggers include "Vercel Sandbox browser", "microVM Chrome", "agent-browser in sandbox", "browser automation on Vercel", or any task requiring Chrome in a Vercel Sandbox.

vercel-labs/webmcp-gen

Build and validate experimental WebMCP tools for an existing web page. Use when an agent needs to expose a site's real workflows as page tools, create webmcp.init.js, define deterministic checks, or compare WebMCP with accessibility-tree automation.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community