I Built a Vercel for Landing Pages — With a CLI and an MCP Server

Source: Dev.to

How I built Page4U — a platform that lets you deploy landing pages from the terminal or directly from AI assistants like Claude and Cursor

Every freelancer and small‑business owner I know has the same problem: they need a landing page, but the path from “I have an HTML file” to “it’s live on the internet with a contact form” is way too long.

So I built Page4U — a platform where deploying a landing page is one command:

page4u deploy ./my-page.html --name my-bakery

That’s it. You get a live URL, a contact form injected, lead tracking built‑in, and a WhatsApp button ready to go.

Then I thought — if developers can deploy from the terminal, why can’t AI assistants deploy too? So I built an MCP server. Now Claude and Cursor can deploy pages for you mid‑conversation.

The Stack

The platform runs on Next.js with Firebase, but the interesting parts are the two open‑source packages:

• page4u-cli – CLI tool (3 deps: commander, picocolors, adm-zip)
• page4u-mcp – MCP server for AI assistants

Both talk to a REST API (v1) that handles auth, deployment, leads, and analytics.

The CLI

npm install -g page4u-cli

Eight commands, zero config files to write:

page4u login                          # authenticate
page4u deploy ./site --name my-biz    # deploy
page4u list                           # see your pages
page4u leads my-biz                    # view leads
page4u analytics my-biz               # view stats
page4u delete old-page                 # clean up

Deploy Flow

You give it an HTML file or a directory. If it’s a directory, it zips it automatically (skipping .git, node_modules, .DS_Store). The API processes the HTML, injects a contact form, and publishes it.

$ page4u deploy ./bakery-site --name best-bakery --whatsapp 972501234567

✓ Page deployed!
  URL:  https://page4u.ai/pages/best-bakery
  Slug: best-bakery
  Name: Best Bakery

CI/CD Support

Environment variables for pipelines — no interactive prompts:

export PAGE4U_API_KEY=p4u_your_key_here
page4u deploy ./dist --name my-site

JSON Output

Every list command supports --json for scripting:

page4u leads my-biz --json | jq '.data[].email'

The MCP Server

This is the part I’m most excited about. MCP (Model Context Protocol) is a standard that lets AI assistants use external tools. I built a server that exposes seven tools:

Setup in Claude

One command:

claude mcp add page4u --env PAGE4U_API_KEY=p4u_your_key page4u-mcp

Setup in Cursor

Add to .cursor/mcp.json:

{
  "mcpServers": {
    "page4u": {
      "command": "page4u-mcp",
      "env": {
        "PAGE4U_API_KEY": "p4u_your_key_here"
      }
    }
  }
}

What This Enables

Once connected, you can have conversations like:

“Create a landing page for a pizza restaurant called Mario’s Pizza. Include a menu section, a WhatsApp ordering button, and deploy it.”

The AI generates the HTML and deploys it in the same conversation. No copy‑pasting, no switching tabs, no manual upload.

“Show me the leads for mario-pizza from the last week.”
“My phone number changed — update it on all my pages.”

The AI becomes a full page‑management assistant.

The API Design

All responses follow a consistent envelope:

// Success
{ "success": true, "data": { ... } }

// Error
{ "success": false,
  "error": { "code": "SLUG_TAKEN", "message": "..." } }

Every response includes rate‑limit headers:

X-RateLimit-Limit: 60
X-RateLimit-Remaining: 57
X-RateLimit-Reset: 1707400000

Auth is via API keys (p4u_ prefix + 48 hex chars), hashed with SHA‑256 before storage. The key is shown once on creation, never again.

What I Learned

1. Keep the CLI minimal.
   Only three runtime dependencies. No config framework, no fancy prompts library, no ORM. commander for commands, picocolors for colors, adm-zip for zipping directories. That’s it.

2. MCP is surprisingly simple.
   The entire MCP server is a single file — ~280 lines. The SDK handles all the JSON‑RPC plumbing. You just define tools with Zod schemas and async handlers.

3. AI‑first tools need good descriptions.
   The tool descriptions in the MCP server aren’t for humans — they’re for the AI model to understand when and how to use them. Clear, concise, and machine‑readable wording makes a huge difference in reliability.

FormData works natively in Node 18+

No need for node-fetch or form-data packages. Native fetch, FormData, and Blob work great.

Try It

# CLI
npm install -g page4u-cli
page4u login

# MCP (Claude Code)
npm install -g page4u-mcp
claude mcp add page4u -- env PAGE4U_API_KEY=p4u_your_key page4u-mcp

Enter fullscreen mode
Exit fullscreen mode

Get your API key at .

GitHub

• page4u-cli
• page4u-mcp

---

Would love to hear what you think. If you’re building MCP servers or developer tools, happy to chat about the architecture decisions.