AI-Powered Web App Builder

用自然语言
构建完整 Web 应用

PagePilot 是一个 AI 驱动的 Web 应用构建平台,用户通过自然语言描述需求,系统自动生成、运行、预览并发布完整可运行的 Web 应用。

Next.js 16 Go + Gin FastAPI + LangGraph PostgreSQL Playwright Docker Compose
24
Agent 工具
26
最大迭代轮次
85%+
端到端成功率
6 天
从零到可用
System Architecture

三语言微服务架构

每层用最合适的语言:Go 处理高并发 CRUD,Python 驱动 AI 推理,TypeScript 构建前端体验。

Browser
Nginx :80/443
Frontend :3000
Backend :8080
AI Service :8000
服务详情
Frontend
Next.js 16 / React 19 / TypeScript
  • App Router + BFF 代理层
  • SSE 流式对话渲染
  • 24 个工具卡片 UI
  • 预览 iframe + 代码面板
  • Zustand 状态管理
Backend
Go 1.21 / Gin / GORM
  • JWT 认证 + bcrypt 密码
  • 高并发 CRUD REST API
  • 用户 / 项目管理
  • GORM ORM + PostgreSQL
  • 统一 API 响应格式
AI Service
Python / FastAPI / LangGraph
  • Agent Loop 引擎 (2100+ 行)
  • 24 个工具定义 (2600+ 行)
  • Playwright 视觉工具
  • 沙箱管理 + 端口映射
  • 记忆系统 + 发布 API
🔒
认证链路
Browser → Nginx → Go Backend (登录/JWT) → Token 存入 localStorage。AI Service 回调 Go /auth/me 验证,避免多语言 JWT 库差异。
💬
对话链路
Browser → Next.js BFF /api/chat → FastAPI /api/chat → 回调 Go 验证 JWT → AgentLoop → LLM → 工具调用 → SSE 流式返回。
👁
预览链路
AI 写入沙箱文件 → 启动 Dev Server → Next.js 代理 /api/sandbox-preview/<repoId> → iframe 渲染。
📦
发布链路
复制工作区文件(或 Vite 构建)→ Nginx 静态托管 /p/<publishId>/。支持复用链接和快照存档两种模式。
Interactive Demo

核心流程演示

模拟用户请求"帮我创建一个 React 登录页面"的 Agent Loop 执行过程:

1
智能请求分类
分类器检测到"创建"+"登录页面",判定为构建请求,绑定 24 个工具到 LLM。
classifier: rule_match("创建", "页面") → need_tools=true
2
Planner Node — 结构化构建计划
LLM 输出构建计划:package.json → vite.config.js → index.html → main.jsx → App.jsx → styles.css
plan: ["writeFile:package.json", "writeFile:vite.config.js", "writeFile:index.html", ...]
3
Builder Agent — 代码生成
DirectBuilder 依次调用 writeFileTool 写入 6 个文件,每个文件写入后返回确认。
writeFileTool(path="src/App.jsx", content="import React, { useState }...")
4
Preview Starter — 启动预览
调用 bashTool 执行 npm install,然后 startDevServerTool 启动 Vite Dev Server。
startDevServerTool() → port=31042, url=/api/sandbox-preview/abc-123
5
Preview Verifier — 验证预览
自动截取页面截图、获取 DOM 快照,验证页面是否正常渲染、关键元素是否存在。
takeScreenshotTool() → OK  |  getDomSnapshotTool() → buttons: ["Sign In"], inputs: 2

三级降级策略自动判断用户消息是否需要调用工具:

✓ 需要工具调用
"帮我创建一个 Todo 应用"
"把按钮改成蓝色"
"添加一个导航栏组件"
规则匹配:动作动词 + 目标名词命中
✗ 不需要工具调用
"这段代码是什么意思?"
"React 和 Vue 哪个好?"
"解释下什么是 SSR"
语义打分 < 0.78,LLM 直接回答
分类器配置
# 三级降级策略 FILE_TOOL_CLASSIFIER_MODE="prefer" # off | fallback | always | prefer FILE_TOOL_CLASSIFIER_THRESHOLD=0.78 # 语义打分阈值

ErrorAgent 自动诊断并修复 8 类常见构建错误:

错误类型 典型表现 自动修复 状态
Vite host blocked 页面空白,日志显示 blocked request 自动修补 allowedHosts 已解决
JSX 语法错误 页面空白,控制台报语法错误 自动转义尖括号 已解决
入口文件缺失 页面空白,404 自动补全 index.html 已解决
npm install 失败 依赖安装超时或报错 清缓存 + 换镜像源 已解决
HMR WebSocket 失败 控制台报 WebSocket 错误 禁用 HMR 已解决
样式导入遗漏 页面无样式 自动注入 import 已解决
fastRefresh 失败 React Fast Refresh 报错 设置 fastRefresh: false 已解决
空白预览 页面完全空白 全链路诊断 已解决
PagePilot Agent
24 Tools

Agent 工具集

分为四大类:文件操作、预览管理、视觉检查、脚手架与版本控制

readFileTool读取文件内容
writeFileTool写入文件
replaceInFileTool替换文件内容
appendToFileTool追加内容
listFilesTool列出目录文件
searchFilesTool搜索文件内容
makeDirectoryTool创建目录
movePathTool移动/重命名
deletePathTool删除文件
bashTool执行 Shell 命令
startDevServerTool启动开发服务器
getPreviewUrlTool获取预览 URL
restartDevServerTool重启服务器
checkAppTool检查应用状态
devServerLogsTool读取服务器日志
getDomSnapshotToolDOM 快照
takeScreenshotTool页面截图
compareScreenshotsTool截图差异对比
inspectElementsTool检查页面元素
locateElementTool定位元素
interactWithPreviewTool交互操作
diagnosePreviewTool诊断预览
scaffoldReactViteStarterToolReact/Vite 脚手架
commitToolGit 提交
Iteration Roadmap

Agent Loop 迭代路线

从单轮工具调用到多轮智能调度,再到 LangGraph 多 Agent Harness

V1 — 基础阶段
LangChain AgentExecutor
基于 LangChain 的单轮工具调用。LLM 决定调用哪个工具,执行一次后输出结果。只能完成简单任务。
单轮调用 LangChain
V2 — 核心突破
多轮 Agent Loop(26 轮)
while 循环实现多轮工具调用,支持"创建项目 → 写入代码 → 安装依赖 → 启动预览 → 验证结果"完整链路。
多轮迭代 24 个工具 2100+ 行
V3 — 效率优化
智能请求分类器
三级降级策略:规则匹配 → 语义打分(0.78) → LLM 分类器。非构建请求节省约 3000 token/次。
三级降级 省 token
V4 — 稳定性
LLM 输出不稳定性处理
纯文本工具调用检测、原始代码输出检测、503 指数退避重试、<think> 标签过滤。成功率 60% → 85%+。
防御性编程 自动纠正
V5 — 架构升级
LangGraph 多 Agent Harness
Builder / Verifier / ErrorAgent / Planner 职责分离。DirectBuilder 非 LangChain 轻量路径,逐步移除框架依赖。
LangGraph 多 Agent 可扩展
Agent Loop 核心代码
class AgentLoop: async def run(self, messages): llm = llm.bind_tools(tools) # 24 tools while iteration < max_iterations: # max 26 response = await llm.ainvoke(messages) if response.tool_calls: for tool_call in response.tool_calls: result = dispatch_tool( tool_call.name, tool_call.args ) messages.append( ToolMessage(content=result) ) else: yield StreamEvent( type="finish", content=response.content ) return
FNV-1a 确定性端口映射
def _project_id_hash_port(project_id: str) -> int: """同一项目始终映射到相同端口""" h = 2166136261 for ch in project_id.encode(): h ^= ch h = (h * 16777619) & 0xFFFFFFFF return 31000 + (h % 1000)
Visual Feedback Loop

视觉反馈闭环

DOM 快照 + 截图双通道验证,确保生成结果与预期一致

🔍
DOM 快照
结构化元素信息:标题、按钮、链接、输入框的标签、文本、层级。精确定位"那个按钮的 CSS 类名是什么"。
📷
自动截图
Playwright 无头浏览器截取页面截图,LLM 可以"看到"页面的实际渲染效果,判断布局和样式是否正确。
📈
截图差异对比
逐像素计算 RGB 差值,统计变化像素占比和最大变化区域。精确判断"修改是否生效"。
验证流程
代码变更
DOM 快照
页面截图
元素定位
截图对比
验证结果

两者配合:DOM 快照提供结构化信息用于精确定位,截图提供像素级信息用于样式验证。

ErrorAgent

自动诊断与修复

8 类错误分类 + 4 套恢复剧本,将构建失败的用户干预率从 100% 降低到约 15%

剧本 1:Vite host blocked
async def fix_vite_host_blocked(project_dir): vite_config = read_file(project_dir, "vite.config.js") if "allowedHosts" not in vite_config: inject_allowed_hosts(vite_config) restart_dev_server(project_dir)
剧本 2:JSX 语法错误
async def fix_jsx_syntax_error(project_dir, error_msg): file_path, line = parse_error_location(error_msg) content = read_file(project_dir, file_path) fixed = escape_angle_brackets(content) write_file(project_dir, file_path, fixed)
剧本 3:npm install 失败
async def fix_npm_install(project_dir): run_command("npm cache clean --force") run_command( "npm install --registry=" "https://registry.npmmirror.com" )
剧本 4:空白预览全链路诊断
async def diagnose_blank_preview(dir): checks = [ check_entry_file(dir), # index.html? check_main_imports(dir), # main.jsx? check_deps_installed(dir),# node_modules? check_server_running(dir),# dev server? check_port_available(dir),# port free? ] return [c for c in checks if not c.passed]
Sandbox & Preview

沙箱与预览稳定性

FNV-1a 确定性端口映射 + Docker 环境下 Vite 预览的 5 个稳定性问题自动修复

确定性端口映射
基于 FNV-1a 哈希,同一项目每次启动映射到相同端口(31000-31999)。Python 和 TypeScript 双端实现一致。
1000
端口槽位
0
冲突概率
2
双端一致
Vite 预览稳定性(5 个问题)
allowedHosts 阻塞 allowedHosts: true
HMR WebSocket 失败 hmr: false
fastRefresh preamble fastRefresh: false
index.html 缺失 auto补全
样式导入遗漏 auto inject
bashTool 安全隔离(三层防护)
🛡
命令白名单
只允许 cat, echo, find, git, grep, ls, node, npm, npx, pip, python, sed
🚫
元字符屏蔽
拒绝 |, &&, ||, ;, $, `, >, < 等 Shell 元字符
🔒
路径隔离
所有操作限制在项目目录内,.. 遍历被检测并拒绝
Memory & Publish

记忆系统与一键发布

三级记忆系统

👤
用户级记忆
跨项目的个人偏好,如"我喜欢用 Tailwind"、"我偏好函数式组件"
📂
项目级记忆
项目专属上下文,如"这个项目用了 shadcn/ui"、"数据库是 PostgreSQL"
💬
会话级记忆
单次对话的临时记忆,如"刚才把按钮改成了红色"
/remember
/forget
/memory
斜杠命令管理

一键发布

两种发布模式
复用链接
每次发布覆盖同一个目录,URL 不变,适合持续迭代
快照存档
每次发布创建新目录,不可变,适合版本存档
发布流程
源文件
Vite Build
URL 重写
Nginx 托管
# URL 重写:适配子路径部署 /assets/index.js → /p/<id>/assets/index.js # 自动清理策略 MAX_PER_WORKSPACE=20 TTL_DAYS=30
Project Results

项目成果

52
Git 提交
6 天开发周期
4700+
核心代码行数
Agent Loop + 工具定义
100+
变更文档
完整开发历程
6
Docker 服务
容器编排部署
85%+
端到端成功率
ErrorAgent 自动修复
40%
Token 节省
智能请求分类器
95%+
Vite 预览稳定性
5 个问题自动修复
FAQ

常见问题

技术选型是根据各层的核心需求决定的:Go 的 goroutine 天然适合高并发无状态请求;Python 的 AI/ML 生态最成熟(LangChain、Playwright、FastAPI);TypeScript 的 Next.js App Router 是目前 React 生态最先进的 SSR/BFF 框架。三语言微服务让每层用最合适的工具。
经验值上限:React/Vite 项目从脚手架到可预览通常需要 package.json → vite.config → index.html → main.jsx → App.jsx → styles.css → npm install → start dev server,加上可能的修复迭代,20 轮左右可以覆盖绝大多数场景。设置上限是为了防止 LLM 陷入死循环,同时保留足够的修复余量。
Go 用 dgrijalva/jwt-go,Python 用 PyJWT,两个库对 HS256 的边界处理有细微差异。回调方案下,AI Service 收到请求后调用 Go Backend 的 /auth/me 接口,由 Go 统一验证。虽然多一次网络调用(内网延迟 < 1ms),但认证逻辑完全集中在 Go 层。
遇到过三种不稳定场景:纯文本工具调用(正则检测 + 系统消息重试)、原始代码输出(检测后重试)、上游 503 错误(指数退避重试最多 3 次)。本质上是把 LLM 当作一个"不可靠的执行器",用确定性的控制流去约束不确定性的生成过程。
每个项目已经在独立的 Docker 容器中运行,容器本身就是隔离边界。bashTool 的命令白名单 + 元字符屏蔽 + 路径隔离是额外的纵深防御。如果用 DinD 或 gVisor,安全性更高但复杂度和资源消耗也更高,当前方案在安全性和简单性之间取得了平衡。
四点改进方向:(1) 工具定义用 JSON Schema 而不是 Python 函数签名,可以自动生成前端工具卡片 UI;(2) 引入 streaming tool calls,更快开始执行;(3) 沙箱用 gVisor 或 Firecracker,安全性更高;(4) 数据库用事件溯源,完整回放 agent 的决策过程。

从"写代码"到"说需求"

AI 驱动的 Web 应用构建平台,让每个人都能创建完整的 Web 应用

Next.js 16 Go + Gin FastAPI + LangGraph Playwright Docker Compose