If you landed here you probably typed something like “OpenClaw vibe coding setup building apps from phone conversations”. This guide shows, step-by-step, how I turned a Telegram chat with myself into an assembly line that ships working web sites, CLIs and small SaaS stubs. No laptop required until review time.

What exactly is “vibe coding”?

The term popped up in the OpenClaw Discord early this year. It means: you describe what you feel like building (“a tiny Gatsby blog that pulls my Strava feed”) in plain language. The agent breaks that intent into tasks, calls Claude Code for generation, runs the code, and pushes a preview. You stay on your phone, thumbs-typing voice notes, while the pipeline does the mechanical work.

It is not magic. It is a bunch of glued-together services:

  • Telegram bot or WhatsApp hook for conversation
  • OpenClaw gateway receiving messages
  • Claude Code (or GPT-4o, Mixtral, etc.) for synthesis
  • Composio tools for GitHub, Vercel/Render, AWS, bash, browser
  • A cheap EC2 t3.micro running the daemon 24/7

Latency from request to preview link: ~40-90 s on average builds. Enough for weekend hacks and internal tools.

Quick architecture diagram (text edition)

Telegram ⟶ Webhook ⟶ OpenClaw Gateway (Node 22) ⟶ Task Router ⟶ Claude Code ⟶ Tools (shell, git, deploy) ⟶ Result back to Telegram

Everything lives in a single docker-compose.yml. Claude runs via the Anthropic API, Git pushes over a deploy key, and previews come from Vercel’s preview deployments.

Prerequisites you cannot skip

These are the boring bits, but skipping them is what makes 80 % of support threads in the repo:

  • Node 22.6+ (n 22.6.0 works fine). Earlier versions leak workers.
  • Docker 24 if you want the all-in-one stack. Otherwise install openclaw@latest globally.
  • API keys: Telegram Bot, Anthropic, GitHub PAT (public_repo), Vercel token.
  • A throwaway GitHub org. The agent will create repos, branches, pull requests.
  • Basic git hygiene: branch protection off, required checks off. Saves headaches.

One-liner install

On a fresh Ubuntu box:

curl -fsSL https://raw.githubusercontent.com/openclaw/install/main/vibe.sh | bash

The script:

  1. Installs Node 22 using n.
  2. npm i -g openclaw@latest.
  3. Clones openclaw/examples and brings up Docker with Redis + Claude proxy.

You then drop a .env next to docker-compose.yml:

TELEGRAM_TOKEN=123:abc ANTHROPIC_KEY=sk-ant-... GITHUB_TOKEN=ghp_... VERCEL_TOKEN=vercel_... DEFAULT_MODEL=claude-3-opus-20240229

Registering the Telegram command set

Telegram allows a slash command manifest. Mine looks like:

/start - bootstrap an empty repo auto - turn autonomous mode on/off spec - current spec summary deploy - force redeploy shell - run a shell command unit - run tests

Upload it with:

openclaw telegram:set-commands ./telegram.commands.txt --token $TELEGRAM_TOKEN

The agent parses natural text as well, but explicit commands keep the chat log readable.

Workflow: from phone vibe to running code

  1. You describe intention. Example: “Build a CLI that fetches my GitHub notifications and reads them aloud via macOS say.”
  2. OpenClaw turns that into tasks. It creates tasks/000_draft_spec.yaml, asks Claude for a technical spec, and posts a summary back.
  3. You approve or tweak. “Swap macOS say with espeak so it works on Linux.”
  4. Claude writes code. Usually multiple file patches in a PR-like internal structure.
  5. Agent runs unit tests. If green, it pushes to GitHub v0.1.0 tag.
  6. Deploy. For CLIs the deploy step just uploads an artifact to the repo Releases tab. For web it triggers Vercel.
  7. Link appears in Telegram.

The loop repeats for feature requests or bug reports. “/shell rm ‑rf” is blocked by a simple allow list; yes, someone already tried.

Prompt patterns that work (and those that blow up)

After ~60 hours of usage, these heuristics help:

  • Concrete nouns beat adjectives. “Tailwind, dark mode, Airtable API v0” is better than “slick modern design”.
  • Prefer examples. Drop a link: “Like https://statuspage.io/ but only uptime & response time”. The agent feeds that HTML to Claude’s context.
  • Specify env. “Target Node 20, Heroku dyno, Postgres 15” avoids mismatched driver versions.
  • One ask at a time. Multi-paragraph feature dumps exceed Claude’s context window (200k tokens is still not free and the proxy truncates).

Things that fail:

  • “Make it cooler.” Claude will hand back CSS rearrangements forever.
  • Ambiguous data schema. If you don’t define tables up front, migrations spiral.
  • Asking for large binaries (images, videos). The GitHub API chokes, and OpenClaw doesn’t chunk uploads yet.

Real example #1 – static site in 12 messages

I wanted a landing page for an internal hackathon. Conversation excerpt:

me: New project "hack-leaderboard". Static Next.js page that lists top 10 scorers. Use Tailwind. claw: Spec attached. Approve? me: yes. Data from /api/leaderboard (mock json for now).

Behind the curtain:

  • Creates repo hack-leaderboard
  • npx create-next-app@14, installs Tailwind
  • Adds pages/api/leaderboard.ts with hardcoded JSON
  • Commits, pushes, triggers Vercel preview
  • Sends me the link

Total time: 68 s. I updated the color palette from my phone. That commit went green on CI too.

Real example #2 – CLI tool shipped to npm

Goal: “cli-emoji-grep — search codebase for TODOs and prepend an emoji matching the owner’s GitHub avatar.”

The agent:

  1. Generated a Node 22 project with commander
  2. Added GitHub API call, grabbed the user’s avatar, hashed to an emoji
  3. Packed with npm pack, published with my npm token (scoped package)
  4. Posted npm i @me/cli-emoji-grep as the command

It failed first because the avatar retrieval hit rate limits. I replied “Cache avatar for 24 h using ~/.cache”. Second run passed. Time from idea to npm install: 14 minutes, 27 messages total, all on phone.

Real example #3 – small PWA with push notifications

I tried something larger: a PWA that pings /train API every 5 min and notifies when the Austrian railway has delay >5 min. The agent handled service workers, local storage, and push credentials, but failed to generate the VAPID keys. I invoked:

/shell ./node_modules/.bin/web-push generate-vapid-keys

and pasted the result. From there deployment worked. Lesson: agent code generation is good, but credential bootstrapping still needs human hand-holding.

Iteration pattern that keeps you sane

I treat the chat like a low-friction PR review:

  • Every major request starts with “Spec vN: …”
  • Minor tweak? “Patch vN.N: …”
  • Bug report? “Issue: reproduction steps …”
  • Use /deploy staging before /deploy prod
  • Pin important answers so you don’t scroll forever

The agent labels GitHub commits accordingly, so later archaeology is possible.

Managing expectations: what vibe coding is not

OpenClaw + Claude is fast for glue code, UI scaffolding, docs, tests. It is bad at:

  • Novel algorithms (you will still open the laptop for that DP optimisation)
  • Heavy data migrations (risk of zero-day production wipe)
  • Long-running chats (>3 h). Context drift increases hallucination rate ≈30 %
  • Anything requiring private API quotas unless you proxy them yourself

Know the limits, and hand-off to humans early.

Security & governance quick checks

Running code from an LLM feels like giving rm -rf to a toddler. Mitigations:

  • OpenClaw’s daemon runs inside Docker with readOnlyRootFilesystem
  • GitHub token is repo-scoped, no org-admin rights
  • Shell tool has an allow list: git, npm, pnpm, esbuild, web-push
  • Outbound HTTP goes through curlwrapper that logs full URLs for audit
  • Claude’s generation is post-processed with regex filters for rm, shutdown, :(){ :|:& };: classics

Still, don’t run vibe coding on a prod cluster. Use a sandboxed AWS account.

Maintenance: keeping the stack healthy

  • Weekly: npm outdated -g, bump OpenClaw. Mismatched agent/tool versions cause silent 500s.
  • Monthly: Rotate tokens. Telegram bots get hijacked often.
  • When Claude releases: update DEFAULT_MODEL and re-benchmark. Opus → Haiku may save you $.
  • Disk: Clean Docker volumes; Claude’s proxy caches 3–5 GB quickly.

Cost snapshot (June 2024)

My side-project usage for 30 days:

  • Anthropic API: 1.1 M input tokens, 0.8 M output → ~$42
  • EC2 t3.micro (Spot): $4.11
  • Vercel Hobby: free (three projects)
  • Telegram: free

Total <$50. The bottleneck is text generation, not compute.

Community tips that saved me hours

Collected from GitHub Discussions #238-#261:

  • Use CLAUDE_JSON_MODE=1 to get structured patches instead of markdown blobs.
  • Set GIT_COMMIT_SIGN=0 or the GPG prompt blocks automation.
  • If Telegram messages exceed 4096 chars, OpenClaw auto-uploads to a GitHub Gist and links it. Good to know when logs vanish.
  • To pause the daemon without killing Docker: /autopause 60 (minutes).

Next step: a 30-minute weekend challenge

Spin up a fresh repo called weekend-timer. From your phone, tell OpenClaw:

"I want a Pomodoro web app with a start/stop button, dark mode, and local notification when cycle ends. De-couple the timer so it survives tab reloads."

Watch the agent draft the spec, code it, and deploy to Vercel. Spend the remaining 20 minutes testing, then post your result to the Discord #show-your-vibes channel. That’s a more useful tutorial than any blog post—including this one.