我为着陆页打造了一个 Vercel —— 配备 CLI 和 MCP 服务器
Source: Dev.to
我是如何构建 Page4U 的 — 一个可以从终端或直接从 Claude、Cursor 等 AI 助手部署着陆页的平台
我认识的每位自由职业者和小企业主都有同样的问题：他们需要一个着陆页，但从“我有一个 HTML 文件”到“它已经在互联网上上线并带有联系表单”的过程实在太繁琐。
于是我创建了 Page4U — 一个只需一条命令即可部署着陆页的平台：
page4u deploy ./my-page.html --name my-bakery就这么简单。你会得到一个实时 URL，自动注入的联系表单，内置的潜在客户跟踪，以及可直接使用的 WhatsApp 按钮。
随后我想到 — 如果开发者可以从终端部署，为什么 AI 助手不能也这么做呢？于是我构建了一个 MCP 服务器。现在 Claude 和 Cursor 可以在对话过程中为你部署页面。
堆栈
平台基于 Next.js 与 Firebase，但有趣的部分是两个开源包：
- page4u-cli – CLI 工具（3 个依赖：
commander、picocolors、adm-zip） - page4u-mcp – AI 助手的 MCP 服务器
两者都通过 REST API（v1）进行通信，该 API 处理身份验证、部署、潜在客户和分析。
命令行界面
npm install -g page4u-cli八个命令，无需编写配置文件：
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部署流程
您可以提供一个 HTML 文件 或 一个目录。如果是目录，它会自动压缩（跳过 .git、node_modules、.DS_Store）。API 会处理 HTML，注入联系表单并发布。
$ page4u deploy ./bakery-site --name best-bakery --whatsapp 972501234567
✓ Page deployed!
URL: https://page4u.ai/pages/best-bakery
Slug: best-bakery
Name: Best BakeryCI/CD 支持
用于流水线的环境变量 — 无交互提示：
export PAGE4U_API_KEY=p4u_your_key_here
page4u deploy ./dist --name my-siteJSON 输出
每个列表命令都支持 --json 用于脚本：
page4u leads my-biz --json | jq '.data[].email'MCP 服务器
这是我最感兴趣的部分。MCP（模型上下文协议） 是一个标准，使 AI 助手能够使用外部工具。我构建了一个服务器，提供七个工具：
| Tool | 功能描述 |
|---|---|
list_pages | 列出您的落地页 |
deploy_page | 将 HTML 部署为实时页面 |
update_page | 更新页面元数据 |
delete_page | 删除页面 |
get_page | 获取页面详情 |
get_leads | 查看联系表单提交 |
get_analytics | 查看页面统计 |
在 Claude 中的设置
一条命令：
claude mcp add page4u --env PAGE4U_API_KEY=p4u_your_key page4u-mcp在 Cursor 中设置
将以下内容添加到 .cursor/mcp.json：
{
"mcpServers": {
"page4u": {
"command": "page4u-mcp",
"env": {
"PAGE4U_API_KEY": "p4u_your_key_here"
}
}
}
}这能实现什么
“为一家名为 Mario’s Pizza 的披萨店创建一个登陆页面。包括菜单栏目、WhatsApp 订餐按钮，并将其部署。”
AI 会在同一对话中生成 HTML 并完成部署。无需复制粘贴、切换标签页或手动上传。
“显示
mario-pizza上周的潜在客户。”
“我的电话号码变了——请在所有页面上更新它。”
AI 成为完整的页面管理助理。
API 设计
所有响应遵循统一的封装结构：
// Success
{ "success": true, "data": { ... } }
// Error
{ "success": false,
"error": { "code": "SLUG_TAKEN", "message": "..." } }每个响应都包含速率限制头部：
X-RateLimit-Limit: 60
X-RateLimit-Remaining: 57
X-RateLimit-Reset: 1707400000认证通过 API 密钥（p4u_ 前缀 + 48 个十六进制字符）进行，存储前使用 SHA‑256 哈希。密钥在创建时仅显示一次，此后不再显示。
我的收获
-
保持 CLI 简洁。
只有三个运行时依赖。没有配置框架，没有花哨的提示库，也没有 ORM。commander用于命令，picocolors用于颜色，adm-zip用于压缩目录。仅此而已。 -
MCP 出乎意料地简单。
整个 MCP 服务器只有一个文件——约 280 行。SDK 处理所有 JSON‑RPC 的底层工作。你只需使用 Zod schema 和异步处理函数来定义工具。 -
AI‑优先的工具需要好的描述。
MCP 服务器中的工具描述不是给人看的——而是给 AI 模型理解何时以及如何使用它们的。清晰、简洁且机器可读的表述对可靠性有巨大影响。
FormData 在 Node 18+ 中原生支持
无需 node-fetch 或 form-data 包。原生的 fetch、FormData 和 Blob 都能很好地工作。
试一试
# 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进入全屏模式
退出全屏模式
在此获取您的 API 密钥。
GitHub
很期待听到你的想法。如果你正在构建 MCP 服务器或开发者工具，欢迎聊聊架构决策。