Webprojekte erstellen und deployen direkt über das Smartphone: Vom Text-Prompt zur Live-URL auf GitHub Pages ohne die Tastatur zu berühren

Das Ziel dieses Praxistests war die Überprüfung, wie weit ein lokaler KI-Agent mit einer einzigen Anweisung kommt. Als konkretes Szenario wurde die Erstellung einer vollständigen Website gewählt, ohne selbst eine Tastatur anzufassen.

Nach dem Öffnen von Telegram wurde folgende Nachricht gesendet:

„Hey, baue eine Website für mein Café. Sie soll ästhetisch aussehen. Designe sie zuerst in Figma, extrahiere das HTML, erstelle ein neues GitHub-Repo, deploye es auf GitHub Pages und sende mir den Link.“

Etwa vierzig Minuten später vibrierte das Smartphone: Eine fertige, funktionierende URL, gehostet auf GitHub Pages, basierend auf dem generierten Design.

Dieser Beitrag beschreibt Schritt für Schritt das zugrundeliegende Setup. Drei Integrationen, eine Handvoll Befehle und ein einziger Agent, der die gesamte Pipeline vom Design bis zum Deployment steuert.

Was ist OpenClaw?

Vor dem eigentlichen Setup folgt eine kurze Einordnung der Software.

OpenClaw ist ein Open-Source-KI-Agent, der lokal auf der eigenen Hardware läuft. Es handelt sich weder um eine Web-App noch um einen Cloud-Dienst. OpenClaw ist ein CLI-gesteuerter Agent, der lokal installiert, konfiguriert und vollständig selbst verwaltet wird.

Drei Kernmerkmale zeichnen das Tool aus:

• Freie Modellwahl: Die Logikkomponente lässt sich flexibel wählen. OpenClaw arbeitet mit Claude, GPT, Gemini oder lokalen Ollama-Modellen. Ein Wechsel ist jederzeit möglich.
• Erweiterbarkeit: Neue Fähigkeiten (Skills) lassen sich über das ClawHub installieren. Plugins erweitern den Funktionsumfang. Jede Schnittstelle, die das Model Context Protocol (MCP) unterstützt, kann angebunden werden.
• Datensouveränität: Sensible Daten verbleiben auf dem lokalen System. Zugangsdaten und Kontextinformationen verlassen den Laptop zu keinem Zeitpunkt, es sei denn, dies wird explizit freigegeben.

Für Entwickler-Teams in Deutschland und der gesamten DACH-Region, die einen handlungsfähigen Agenten suchen – der Commits pusht, Nachrichten versendet und APIs anspricht, anstatt nur in einem Browser-Tab zu chatten –, bietet dieser Ansatz eine völlig neue operative Tiefe.

Der Plan

Das Ziel bestand darin, das Potenzial von OpenClaw bei einer einzigen Anweisung zu testen. Als reales Projekt wurde die Erstellung einer Website gewählt.

Drei Integrationen machten die Umsetzung möglich: Stitch (via MCP) für das Design, GitHub für das Code-Management und Telegram für die Steuerung des Agenten von unterwegs. Die Einrichtung der einzelnen Komponenten wird im Folgenden beschrieben.

Schritt 1: OpenClaw installieren

Als Grundvoraussetzung muss Node.js in der Version 22.19 oder höher installiert sein. Die Überprüfung erfolgt mittels:

Bash

node --version

Falls eine Installation erforderlich ist, bietet nodejs.org die passenden Pakete. Anschließend wird OpenClaw global installiert:

Bash

npm install -g openclaw

Danach wird der Onboarding-Assistent gestartet:

Bash

openclaw onboard --install-daemon

Dieser Schritt öffnet ein terminalbasiertes Interface (TUI), das etwa zwei Minuten in Anspruch nimmt. Der Assistent führt durch folgende Punkte:

• Modell & Authentifizierung: Auswahl des KI-Anbieters und Hinterlegung des API-Keys.
• Workspace: Pfadfestlegung für Dateien und Sessions (Standard: ~/.openclaw/workspace).
• Gateway: Einstellungen für Port und Authentifizierung (Standardwerte sind ausreichend).
• Channels: Anbindung von Telegram, Discord, Slack etc. Dieser Schritt kann vorerst übersprungen werden.
• Daemon: Installiert einen Hintergrunddienst, damit der Agent beim Systemstart automatisch lädt.

Nach Abschluss lässt sich das Dashboard öffnen:

Bash

openclaw dashboard

Dies startet das Control UI unter localhost:18789. Nach dem Senden einer Testnachricht und dem Erhalt einer Antwort ist die Basis einsatzbereit.

Abschließend sollte die Systemgesundheit überprüft werden:

Bash

openclaw doctor

Dieser Befehl erkennt fehlende Konfigurationen oder Umgebungsprobleme, bevor die Integrationen angebunden werden.

Ein kurzes Wort zu den „Skills“

Vor der Anbindung der Tools ist ein grundlegendes Verständnis der Funktionsweise von Skills hilfreich, da jede nachfolgende Integration darauf aufbaut.

Ein Skill in OpenClaw ist eine Markdown-Datei (SKILL.md), die in den System-Prompt des Agenten injiziert wird. Sie vermittelt dem Agenten, wann und wie ein bestimmtes Werkzeug einzusetzen ist: inklusive Einschränkungen, Schritt-by-Schritt-Logik und Edge Cases. Es handelt sich um dauerhafte Verhaltensregeln, die direkt beim Agenten und nicht im KI-Modell selbst verankert sind.

Skills stammen aus drei Quellen:

• Mitgeliefert (Bundled): Direkt in OpenClaw integriert (Datei-I/O, Web-Suche, Exec-Befehle etc.).
• ClawHub: Das öffentliche Verzeichnis unter clawhub.ai für Community-Skills (GitHub-Anbindungen, Browser-Automatisierung, Bildgenerierungs-Workflows). Die Installation erfolgt über einen einzigen Befehl.
• Eigene Skills: Ein Skill ist im Grunde nur ein Ordner mit einer SKILL.md. Nach dem Ablegen im Verzeichnis ~/.openclaw/workspace/skills/ wird er automatisch geladen. Für wiederkehrende Workflows ist das Schreiben eigener Skills die effizienteste Methode.

Die im nächsten Schritt genutzte GitHub-Anbindung ist ein mitgelieferter Skill. Er liefert dem Agenten den nötigen Kontext, um Repositories zu erstellen, Code zu pushen und GitHub-Pages-Deployments autonom zu starten.

Schritt 2: GitHub verbinden

Der GitHub-Skill ist direkt in OpenClaw integriert, eine zusätzliche Installation entfällt. Es muss lediglich das gh-CLI autorisiert werden, welches OpenClaw im Hintergrund für alle Operationen nutzt.

Zunächst muss sichergestellt sein, dass das gh-CLI installiert ist:

Bash

brew install gh    # macOS
# oder: https://cli.github.com für Windows / Linux

Anschließend erfolgt die Authentifizierung über den GitHub-Token:

Bash

gh auth login

Den Anweisungen im Terminal folgen: GitHub.com auswählen, HTTPS wählen und Paste an authentication token aktivieren. Hierfür wird ein Personal Access Token mit den Scopes repo und read:org benötigt. Ein solcher Token lässt sich unter github.com/settings/tokens generieren.

Die erfolgreiche Verbindung wird wie folgt überprüft:

Bash

gh auth status

Damit sind die Vorbereitungen abgeschlossen. Der Agent hat nun Zugriff auf Repositories, PRs, Issues und CI-Runs.

Schritt 3: Stitch via MCP anbinden

Was ist Stitch?

Stitch ist das KI-native Design-Werkzeug von Google. Per Textbeschreibung werden gewünschte Layouts wie Landingpages, Dashboards oder Komponenten definiert. Das Tool generiert die Oberflächen inklusive Layoutstrukturen, Design-Tokens und einem integrierten Design-System. Auch Varianten, Anpassungen und Token-Exporte werden über natürliche Sprache gesteuert. Ein Figma-Abonnement oder manuelles Verknüpfen von Komponenten ist nicht erforderlich.

Stitch stellt einen Remote-MCP-Server bereit, der für die Anbindung an OpenClaw genutzt wird.

Warum kann OpenClaw sich nicht direkt mit Stitch verbinden?

Die MCP-Unterstützung von OpenClaw ist primär für lokale Server ausgelegt, die auf dem eigenen System über stdio laufen. Stitch hingegen ist ein entfernter HTTP-Server in der Google-Cloud. OpenClaw verfügt über keine native Möglichkeit, direkt über HTTP mit einem Remote-MCP-Endpunkt zu kommunizieren. Diese Lücke wird durch eine Bridge geschlossen: Sie läuft lokal, nimmt Werkzeugaufrufe von OpenClaw entgegen und leitet sie über authentifiziertes HTTP an Stitch weiter. Sie fungiert als Übersetzungsschicht zwischen lokalem stdio und entferntem HTTP.

Das Plugin @aiwerk/openclaw-mcp-bridge wurde speziell für diesen Zweck entwickelt. Es arbeitet als lokaler Proxy, der Remote-MCP-Server wie Stitch als native Werkzeuge in OpenClaw registriert. Das Plugin übernimmt den HTTP-Transport, fügt die korrekten Autorisierungs-Header hinzu und stellt dem Agenten die Werkzeuge automatisch zur Verfügung. Da Stitch nativ unterstützt wird, ist nach der Konfiguration keine weitere Anpassung erforderlich.

Die Einrichtung erfolgt in wenigen Schritten:

Zuerst wird ein API-Key benötigt. Auf der Stitch-Einstellungsseite im Bereich API Keys auf Create API Key klicken und den Schlüssel sicher kopieren.

Danach wird das MCP-Bridge-Plugin in OpenClaw installiert:

Bash

openclaw plugins install @aiwerk/openclaw-mcp-bridge

Konfiguration des Plugins mit dem kopierten Stitch-API-Key:

Bash

~/.openclaw/extensions/openclaw-mcp-bridge/install-server.sh stitch

Nach der Aufforderung den API-Key einfügen. Dieser wird in der Konfiguration der Bridge hinterlegt und nicht im Workspace, wo der Agent ihn direkt lesen könnte.

Das Gateway muss neu gestartet werden, um die Verbindung zu aktivieren:

Bash

openclaw gateway restart

Ein wichtiger Sicherheitshinweis: Da Stitch ein Remote-MCP-Server ist, wird jeder Werkzeugaufruf des Agenten über das Netzwerk an die Google-Infrastruktur gesendet. Die Anbindung sollte daher nur in Projekten erfolgen, bei denen dies zulässig ist, und es sollten nur die tatsächlich benötigten MCP-Werkzeuge freigegeben werden.

Schritt 4: Telegram verbinden

Dieser Schritt transformiert den Agenten von einem reinen Desktop-Werkzeug zu einem Assistenten für die Hosentasche.

1. Bot über den BotFather erstellen

In Telegram nach dem verifizierten kontakt @BotFather. Den Befehl /newbot, den Anweisungen folgen und den generierten Token sicher aufbewahren.

2. Token in die OpenClaw-Konfiguration einpflegen

Die Datei ~/.openclaw/openclaw.json öffnen und folgende Struktur ergänzen:

JSON

{

  „channels“: {

    „telegram“: {

      „enabled“: true,

      „botToken“: „IHR_BOT_TOKEN“,

      „dmPolicy“: „pairing“

    }

  }

}

• enabled: Aktiviert den Telegram-Kanal.
• botToken: Der Token des BotFather. Dieser muss geheim gehalten und wie ein Passwort behandelt werden.
• „dmPolicy“: „pairing“ — Neue Kontakte, die dem Bot schreiben, müssen explizit im Terminal freigegeben werden, bevor der Agent antwortet. Dies ist die sicherste Standardeinstellung.

3. Gateway neu starten

Bash

openclaw gateway restart

4. Den eigenen Account autorisieren

Eine Nachricht an den neu erstellten Bot in Telegram senden. OpenClaw generiert daraufhin eine Pairing-Anfrage. Die Freigabe erfolgt im Terminal über:

Bash

openclaw pairing list telegram
openclaw pairing approve <id>

Nach der Freigabe wird jede Nachricht an den Bot direkt an die lokale OpenClaw-Instanz weitergeleitet und im selben Chat-Verlauf beantwortet.

Sicherheitshinweis: Dieser Bot besitzt direkten Zugriff auf alle angebundenen Systeme (GitHub, Stitch, lokales Dateisystem). Der Bot-Token muss absolut vertraulich behandelt werden. Bei einem Sicherheitsvorfall lässt sich der Token über den BotFather mittels /revoke umgehend ungültig machen. Für die Authentifizierung angebundener Dienste sollten zudem dedizierte Service-E-Mails statt des privaten Haupt-Accounts genutzt werden.

Der entscheidende Praxistest

Nach Abschluss des Setups wurde folgende Anweisung über das Smartphone gesendet:

„Lets create a new screen on stitch, we have to create a portfolio page for a cafe, it should look aesthetic. Once design is ready, extract the html file and create a new github repo that should be public and deploy it on github pages and send me the link“

Die Antwort des Agenten folgte kurze Zeit später:

Done. Everything is deployed. GitHub Pages: https://pikachucodecool-del.github.io/cafe-portfolio-aurora/ Repo: https://github.com/pikachucodecool-del/cafe-portfolio-aurora

Hinter den Kulissen wurden folgende Prozesse autonom vom Agenten ausgeführt:

1. Generierung eines Café-Landingpage-Designs in Stitch basierend auf dem Text-Prompt.
2. Extraktion der HTML- und CSS-Dateien aus dem Design.
3. Erstellung eines lokalen Projektordners und Initialisierung eines Git-Repositories.
4. Erstellung eines öffentlichen GitHub-Repositories über das gh-CLI.
5. Push des Codes in das Repository und Aktivierung von GitHub Pages.
6. Überwachung des Deployment-Status bis zur Live-Schaltung.
7. Rücksendung der finalen URL in den Telegram-Chat.

Es war kein Öffnen von Stitch, kein manueller Git-Befehl und kein Login bei GitHub erforderlich. Eine Nachricht, eine Antwort, eine fertige Website.

Das Fazit

Die Arbeitsweise verändert sich grundlegend. Das Denken in einzelnen Arbeitsschritten weicht dem Denken in konkreten Ergebnissen. Die technische Umsetzung wird vollständig an den Agenten delegiert.

Die lokale Ausführung ist hierbei essenziell. Ein cloudbasierter Agent mit weitreichendem Zugriff auf GitHub, Design-Tools und Messenger-Kanäle stellt ein erhebliches Sicherheitsrisiko dar. Durch den lokalen Betrieb verbleiben alle sensiblen Zugangsdaten auf der eigenen Hardware, wodurch die volle Kontrolle gewahrt bleibt.

Die Stärke des Systems liegt in den Integrationen. OpenClaw selbst ist minimalistisch aufgebaut – erst das Model Context Protocol (MCP) sorgt für die nötige Hebelwirkung. Werden die passenden Werkzeuge bereitgestellt, wandelt sich das Versprechen einer automatisierten Pipeline von einer Marketingfloskel zur produktiven Realität.

Ausblick und nächste Schritte

Der Einstieg gelingt am besten über den Befehl openclaw doctor, gefolgt von der schrittweisen Anbindung der einzelnen Integrationen. Sobald die GitHub-Schnittstelle stabil läuft und kleinere Aufgaben automatisiert umsetzt, können Stitch und Telegram ergänzt werden. Für spätere Anpassungen des Modells oder das Rotieren von Schlüsseln steht der Befehl openclaw configure bereit – ein erneutes Durchlaufen des Onboarding-Assistenten ist nicht notwendig.

Die zentrale Fragestellung betrifft am Ende nicht die technische Einrichtung, sondern die konkrete Anwendung im Alltag: Ob Solo-Gründer bei der Produktentwicklung, Designer beim automatisierten Deployment von Web-Schnittstellen oder Entwickler, die ohne Kontextwechsel direkt aus der Problembeschreibung heraus Code erzeugen möchten.

Die Grenzen des Systems hängen primär von den definierten Workflows ab.