← Blog overview

Building a Website Directly from a Smartphone: From Text Prompt to Live GitHub Pages URL Without Touching a Keyboard

The goal of this practical test was to see how far a local AI agent could go on a single instruction. A concrete scenario was chosen: building a complete website without ever touching a keyboard.

After opening Telegram, the following message was sent:

"Hey, build a website for my cafe. Make it look aesthetic. Design it in Figma first, extract the HTML, create a new GitHub repo, deploy it to GitHub Pages, and send me the link."

About forty minutes later, the smartphone buzzed: a live, working URL, hosted on GitHub Pages, based on the generated design.

This post describes the underlying setup step by step. Three integrations, a handful of commands, and a single agent that controls the entire pipeline from design to deployment.

What is OpenClaw?

Before the actual setup, a brief contextualization of the software.

OpenClaw is an open-source AI agent that runs locally on your machine. It is not a web app. It is not a cloud service. It is a CLI-driven agent that you install, configure, and own, end to end.

Three core features define the tool:

  • Flexible Model Choice: The logic component can be chosen flexibly. OpenClaw works with Claude, GPT, Gemini, or local Ollama models. A swap is possible at any time.
  • Extensibility: New skills can be installed from ClawHub. Plugins extend the functional scope. Any interface that supports the Model Context Protocol (MCP) can plug in.
  • Data Sovereignty: Sensitive data remains on the local system. Credentials and context information never leave the laptop at any point unless explicitly released.

For developer teams looking for a capable agent – one that pushes commits, sends messages, and hits APIs instead of just chatting in a browser tab –, this approach offers a completely new operational depth.

The Plan

The goal was to test the potential of OpenClaw with a single instruction. The creation of a website was chosen as a real-world project.

Three integrations made the implementation possible: Stitch (via MCP) for design, GitHub for code management, and Telegram for controlling the agent on the go. The setup of the individual components is described below.

Step 1: Install OpenClaw

As a prerequisite, Node.js version 22.19 or higher must be installed. Verification is done via:

Bash

node --version

If installation is required, nodejs.org provides the appropriate packages. Then, OpenClaw is installed globally:

Bash

npm install -g openclaw

Next, the onboarding wizard is started:

Bash

openclaw onboard --install-daemon

This step opens a terminal-based interface (TUI) that takes about two minutes. The wizard guides through the following points:

  • Model & Authentication: Selecting the AI provider and storing the API key.
  • Workspace: Determining the path for files and sessions (default: ~/.openclaw/workspace).
  • Gateway: Settings for port and authentication (default values are sufficient).
  • Channels: Connecting Telegram, Discord, Slack, etc. This step can be skipped for now.
  • Daemon: Installs a background service so the agent loads automatically at system startup.

Upon completion, the dashboard can be opened:

Bash

openclaw dashboard

This starts the Control UI at localhost:18789. After sending a test message and receiving a reply, the basis is ready.

Finally, the system health should be checked:

Bash

openclaw doctor

This command detects missing configurations or environment issues before connecting the integrations.

A Quick Word on “Skills”

Before connecting the tools, a basic understanding of how skills work is helpful, as every subsequent integration builds upon them.

A skill in OpenClaw is a Markdown file (SKILL.md) injected into the agent’s system prompt. It teaches the agent when and how to use a specific tool: including constraints, step-by-step logic, and edge cases. These are permanent behavioral rules anchored directly with the agent and not inside the AI model itself.

Skills come from three sources:

  • Bundled: Directly integrated into OpenClaw (file I/O, web search, exec commands, etc.).
  • ClawHub: The public registry at clawhub.ai for community skills (GitHub connections, browser automation, image generation workflows). Installation is done via a single command.
  • Custom Skills: A skill is basically just a folder with a SKILL.md. After dropping it into the ~/.openclaw/workspace/skills/ directory, it is loaded automatically. For recurring workflows, writing custom skills is the most efficient method.

The GitHub connection used in the next step is a bundled skill. It provides the agent with the necessary context to create repositories, push code, and trigger GitHub Pages deployments autonomously.

Step 2: Connect GitHub

The GitHub skill is bundled directly with OpenClaw, no additional installation is needed. It only requires authorizing the gh-CLI, which OpenClaw uses in the background for all operations.

First, ensure that the gh-CLI is installed:

Bash

brew install gh    # macOS

# or: https://cli.github.com for Windows / Linux

Subsequently, authentication takes place via the GitHub token:

Bash

gh auth login

Follow the prompts in the terminal: select GitHub.com, choose HTTPS, and activate Paste an authentication token. A Personal Access Token with the repo and read:org scopes is required for this. Such a token can be generated at github.com/settings/tokens.

The successful connection is verified as follows:

Bash

gh auth status

This completes the preparations. The agent now has access to repositories, PRs, issues, and CI runs.

Step 3: Connect Stitch via MCP

What is Stitch?

Stitch is Google’s AI-native design tool. Desired layouts such as landing pages, dashboards, or components are defined via text description. The tool generates the surfaces including layout structures, design tokens, and an integrated design system. Variants, adjustments, and token exports are also controlled via natural language. A Figma subscription or manual linking of components is not required.

Stitch provides a remote MCP server that is used for the connection to OpenClaw.

Why can’t OpenClaw connect to Stitch natively?

OpenClaw’s MCP support is primarily designed for local servers running on the own system over stdio. Stitch, on the other hand, is a remote HTTP server in the Google Cloud. OpenClaw has no native way to communicate directly over HTTP with a remote MCP endpoint. This gap is closed by a bridge: it runs locally, accepts tool calls from OpenClaw, and forwards them to Stitch over authenticated HTTP. It acts as a translation layer between local stdio and remote HTTP.

The @aiwerk/openclaw-mcp-bridge plugin was developed specifically for this purpose. It works as a local proxy that registers remote MCP servers like Stitch as native tools inside OpenClaw. The plugin handles HTTP transport, adds the correct authorization headers, and automatically makes the tools available to the agent. Since Stitch is natively supported, no further adjustments are required after configuration.

The setup is done in a few simple steps:

First, an API key is required. On the Stitch settings page under API Keys, click Create API Key and copy the key safely.

Then, the MCP bridge plugin is installed in OpenClaw:

Bash

openclaw plugins install @aiwerk/openclaw-mcp-bridge

Configuration of the plugin with the copied Stitch API key:

Bash

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

When prompted, paste the API key. This is stored in the bridge configuration and not in the workspace, where the agent could read it directly.

The gateway must be restarted to activate the connection:

Bash

openclaw gateway restart

An important safety note: Since Stitch is a remote MCP server, every tool call the agent makes is sent over the network to the Google infrastructure. The connection should therefore only be made in projects where this is permissible, and only the actually required MCP tools should be released.

Step 4: Connect Telegram

This step transforms the agent from a pure desktop tool into an assistant for the pocket.

1. Create a bot via BotFather

Search for the verified contact @BotFather in Telegram. Send the /newbot command, follow the instructions, and keep the generated token safe.

2. Insert the token into the OpenClaw configuration

Open the file ~/.openclaw/openclaw.json and complement the following structure:

JSON

{

  “channels”: {

    “telegram”: {

      “enabled”: true,

      “botToken”: “YOUR_BOT_TOKEN”,

      “dmPolicy”: “pairing”

    }

  }

}

  • enabled: Turns the Telegram channel on
  • botToken: The token from the BotFather. This must be kept secret and treated like a password.
  • “dmPolicy”: “pairing” — New contacts messaging the bot must be explicitly approved in the terminal before the agent responds. This is the safest default setting.

3. Restart the gateway

Bash

openclaw gateway restart

4. Authorize your own account

Send a message to the newly created bot in Telegram. OpenClaw then generates a pairing request. Release is granted in the terminal via:

Bash

openclaw pairing list telegram
openclaw pairing approve <id>

After approval, every message to the bot is forwarded directly to the local OpenClaw instance and answered in the same thread.

Security Note: This bot has direct access to all connected systems (GitHub, Stitch, local file system). The bot token must be treated with absolute confidentiality. In the event of a security incident, the token can be invalidated immediately via the BotFather using /revoke. Dedicated service emails should be used for the authentication of connected services instead of the main private account.

The Decisive Practical Test

After completing the setup, the following instruction was sent via the smartphone:

“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”

The agent’s reply followed a short time later:

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

Behind the scenes, the following processes were executed autonomously by the agent:

  1. Generation of a cafe landing page design in Stitch based on the text prompt.
  2. Extraction of HTML and CSS files from the design.
  3. Creation of a local project folder and initialization of a Git repository.
  4. Creation of a public GitHub repository via the gh-CLI.
  5. Pushing the code into the repository and activating GitHub Pages.
  6. Monitoring the deployment status until live activation.
  7. Returning the final URL into the Telegram chat.

No opening of Stitch, no manual Git command, and no login to GitHub was required. One message, one reply, a finished website.

The Conclusion

The way of working changes fundamentally. Thinking in individual work steps gives way to thinking in concrete outcomes. The technical implementation is completely delegated to the agent.

Local execution is essential here. A cloud-based agent with extensive access to GitHub, design tools, and messenger channels represents a significant security risk. Through local operation, all sensitive access data remains on the own hardware, whereby full control is maintained.

The strength of the system lies in the integrations. OpenClaw itself is minimally structured – only the Model Context Protocol (MCP) provides the necessary leverage. If the right tools are provided, the promise of an automated pipeline transforms from a marketing phrase to productive reality.

Outlook and Next Steps

The entry succeeds best via the openclaw doctor command, followed by the step-by-step connection of the individual integrations. As soon as the GitHub interface runs stably and automates smaller tasks, Stitch and Telegram can be supplemented. For later adjustments to the model or rotating keys, the openclaw configure command is available – a new run through the onboarding wizard is not necessary.

The central question ultimately concerns not the technical setup, but the concrete application in everyday life: whether solo founders during product development, designers during the automated deployment of web interfaces, or developers who want to generate code directly from the problem description without context switching.

The limits of the system primarily depend on the defined workflows.


Comments

One response to “Building a Website Directly from a Smartphone: From Text Prompt to Live GitHub Pages URL Without Touching a Keyboard”

  1. HIMANSHU JOSHI avatar
    HIMANSHU JOSHI

    Great information on building apps with less friction using AI

Leave a Reply

Your email address will not be published. Required fields are marked *