核心方案摘要
本方案旨在解决“如何低成本、自托管地实现类似‘秒搭’的一句话生成应用”的需求。核心思路是利用 LLM（大语言模型） 作为大脑，MCP (Model Context Protocol) 作为标准化工具接口（连接本地文件、数据库、API），并配合 WebContainers 或 Sandpack 实现浏览器端的实时代码预览与运行。
01. 核心交互
Prompt -> 意图识别 -> 工具调度
02. 关键技术
MCP Server, Vercel AI SDK, WebContainers
03. 交付物
可下载的完整 React/Vue 源码包
架构蓝图：原子化生成系统
点击下方节点查看各模块的技术选型与实现逻辑。
INPUT
用户自然语言指令
▼
LLM 编排层 (Orchestrator)
意图分析 & 任务拆解
MCP Client & Servers
文件系统 / 搜索 / API连接
WebContainer 沙箱环境
浏览器内 Node.js 运行时 (实时预览)
System Module
请选择左侧模块
点击架构图中的节点，查看详细技术实现方案和推荐使用的开源库。
Self-Hosted-Builder v1.0
Simulating Environment...
# 等待指令输入...
技术路线对比分析
自建方案 vs SaaS vs 传统开发
结论： 自建 MCP 方案在“数据隐私”和“可定制性”上得分最高，但在“部署简易度”上不及 SaaS 产品 (如 Bolt.new, MiaoDa)。
生成耗时与Token消耗估算
基于单页面应用 (SPA) 场景
注意： 引入 MCP 会增加一次往返交互 (Tool Call)，导致首次生成时间增加约 1.5-2秒，但能显著提升代码准确性。
从零开始的研究与实施路径
1
基础框架搭建 (Day 1-2)
目标：跑通 "Hello World" 的 LLM 调用。
- 选择基础模型：推荐 Claude 3.5 Sonnet (编程能力最强) 或 DeepSeek V3 (性价比)。
- 集成 Vercel AI SDK：处理 Stream 流式响应。
- 配置 LiteLLM：作为统一网关，方便切换模型。
2
MCP 服务集成 (Day 3-5)
目标：让 AI 能够读取本地文件或搜索网络。
- 部署
mcp-server-filesystem：赋予 AI 读写项目文件的能力。 - 实现 Prompt 路由：判断用户是 "问问题" 还是 "写代码"。
3
沙箱预览环境 (Day 6+)
目标：实现 "所见即所得"。
- 集成 WebContainers API (推荐) 或 Sandpack。
- 实现
iframe通信：将生成的 HTML/JS 注入预览窗口。 - 添加 "Download" 功能：将内存中的文件打包为 Zip。