Blashnikov pro

Posted on Feb 8

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

#webdev #opensource #ai #cli

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. Live URL, contact form injected, lead tracking built in, WhatsApp button ready.

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 7 tools:

Tool	What it does
`list_pages`	List your landing pages
`deploy_page`	Deploy HTML as a live page
`update_page`	Update page metadata
`delete_page`	Delete a page
`get_page`	Get page details
`get_leads`	View contact form submissions
`get_analytics`	View page stats

Setup in Claude Code

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

The API follows 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. 3 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 each tool. I spent more time writing those descriptions than the actual implementation.

4. 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