An end-to-end automation skill for building, managing, and deploying Next.js applications integrated with Instant and Vercel.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install app-builder
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install app-builder using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is App Builder?
The App Builder skill is a comprehensive automation engine designed for AI agents to handle the entire lifecycle of modern web applications. By integrating powerful tools like npx instant-cli, create-instant-app, and the Vercel CLI, this skill allows developers to move from a concept to a live URL in minutes. It operates within the Openclaw Skills framework to ensure that every project is properly scaffolded, version-controlled via GitHub, and hosted on a production-ready environment.
This skill is built for developers who want to leverage the Codex template and Next.js for high-performance frontend development while delegating the repetitive tasks of backend initialization and deployment orchestration. By centralizing all projects in a dedicated directory and following strict architectural rules, it provides a reliable foundation for scaling AI-driven development workflows within the Openclaw Skills ecosystem.
App Builder Use Cases
- Rapidly scaffolding new full-stack Next.js projects with Instant database backends.
- Automating the creation of private or public GitHub repositories and initial pushes.
- Streamlining production deployments to Vercel via command-line automation.
- Managing iterative code changes and bug fixes in existing applications within the apps directory.
- Synchronizing environment variables from local .env files to cloud hosting providers.
How App Builder Works
- The agent selects or creates a target project folder within the standard apps directory.
- It initializes the backend by generating an Instant appId and token using the instant-cli tool.
- A Next.js application is generated using create-instant-app, incorporating the Codex template and linking it to the newly created backend.
- Local git initialization is performed, followed by the creation of a remote GitHub repository using the gh CLI within the Openclaw Skills workflow.
- The project is linked to a Vercel account, and a production build is triggered using vercel --prod.
- For existing projects, the agent pulls the latest changes from the main branch, implements requested features, and redeploys the updated version.
App Builder Setup
To use this component of Openclaw Skills, ensure that you have the necessary CLI tools installed and that you are logged into each service.
# Install required CLIs
npm install -g instant-cli vercel
# Note: GitHub CLI (gh) should also be installed via your system package manager.
# Ensure the apps directory exists
mkdir -p ~/apps
The agent will automatically verify your login status for GitHub and Vercel before proceeding with any deployment tasks.
App Builder Data Schema & Taxonomy
The skill organizes its operations around a structured file system and metadata strategy within Openclaw Skills:
| Component | Location / Format | Purpose |
|---|---|---|
| Project Root | ~/apps/<app-name> |
Primary workspace for the application source code. |
| Agent Instructions | AGENTS.md |
Specific guidelines for the AI coding agent to follow within the repo. |
| Backend Config | instant.schema.ts |
Defines the Instant database schema and permissions. |
| Deployment | .vercel |
Local cache and configuration for Vercel project linking. |
| Environment | .env |
Local storage for appId, tokens, and secret keys used during development. |
App Builder Advanced Features
- Context-aware development using AGENTS.md files at both the root and project level.
- Full support for the Codex template system within the Next.js ecosystem for rapid prototyping.
- Integrated GitHub repository management for both public and private project visibility.
- Automated environment variable synchronization to ensure Vercel production environments match local settings.
- Robust error handling that prompts users for missing CLI installations or authentication within the Openclaw Skills framework.
SKILL.md
Loading
Related Openclaw Skills
Drip Director
A deterministic 8-stage image production pipeline designed for high-fidelity streetwear and fashion content creation.
Clawearn
A modular prediction market trading platform for OpenClaw bots to automate Polymarket trades and wallet management.
Voice Reply
A high-performance, 100% offline text-to-speech skill for generating natural voice replies without API keys or internet dependencies.
Market Oracle
A professional financial analysis agent that provides real-time market data tracking and structured three-layer impact predictions for global economic events.
OCFT: OpenClaw File Transfer Protocol
OCFT is a peer-to-peer file transfer protocol enabling AI agents to exchange data and large files directly through text-based message channels.
OpenClaw TikTok Downloader
A professional-grade TikTok downloader and metadata extractor powered by yt-dlp for automated content archiving.
Featured*
