TheLux MCP应用程序-基于人工智能的网站构建器
Vibe编码的网站构建器 带着一个 AI后端 它使用模型上下文协议（MCP）工具来创建、管理和部署由OpenAI支持的网站。
🚀 TheLux是什么？
TheLux是一个 微型SaaS平台 它将尖端的人工智能与模型上下文协议（MCP）相结合，彻底改变了网站建设：
- 🎨 人工智能网站生成：用自然语言描述你的愿景，获得一个完整的网站
- 🔧 MCP工具集成：语义模板搜索、资产管理、工作流自动化
- 🗄️ 多租户架构：使用子域路由托管不受限制的站点
- ⚡ 实时流媒体：观看AI逐步构建您的网站
- 🎯 生产就绪：在Coolify、Docker或任何Node.js环境中部署
主要特点
- ✅ 自然语言到网站：“创建餐厅主页”→ 完整的网站，包括英雄、菜单、预订CTA
- ✅ 模板发现：AI使用向量嵌入（Qdrant）搜索100个模板
- ✅ 资产存储：将图像、视频、文件上传到MinIO S3兼容存储
- ✅ 页面管理：在PostgreSQL中将页面保存/更新为JSON AST
- ✅ 通知：通过Apprise触发警报（Slack、电子邮件、Discord等）
- ✅ 工作流程自动化：连接到n8n进行复杂的自动化
- ✅ 管理面板：管理网站、用户和页面（即将推出）
📋 目录
⚡ 快速开始
先决条件
- Node.js 20+
- Docker和Docker Compose（用于依赖关系）
- OpenAI API密钥
1分钟设置
# Clone repository
git clone https://github.com/iboss21/mcptheluxapp.git
cd mcptheluxapp
# Start dependencies
docker-compose up -d
# Set up MCP service
cd services/mcp
cp .env.example .env
# Add your OPENAI_API_KEY to .env
npm install
npm run dev
# In another terminal, set up Web app
cd apps/web
cp .env.example .env
# Add your OPENAI_API_KEY to .env
npm install
npm run dev打开http://localhost:3000开始建设！ 🎉
🏗️ 建筑
TheLux包括两项主要服务：
┌─────────────────────────────────────────┐
│ User Browser │
│ (Landing, Chat, Admin Panel) │
└──────────────┬──────────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ Web App (Next.js) │
│ • API Routes │
│ • AI Orchestration │
│ • UI Components │
└──────────────┬──────────────────────────┘
│
▼
┌─────────────────────────────────────────┐
│ MCP Service (HTTP Shim) │
│ • search_templates │
│ • save_page │
│ • put_asset │
│ • notify, trigger_flow │
└──────┬──────┬──────┬──────┬─────────────┘
│ │ │ │
▼ ▼ ▼ ▼
Postgres Qdrant MinIO n8n/Apprise阅读更多： 建筑.md
📦 安装
选项1:Docker Compose（推荐）
# Clone repo
git clone https://github.com/iboss21/mcptheluxapp.git
cd mcptheluxapp
# Create .env file
echo "OPENAI_API_KEY=sk-your-key-here" > .env
# Start everything
docker-compose up访问地址：http://localhost:3000
选项2：手动设置
看 安装.md 详细说明包括：
- PostgreSQL设置
- Qdrant配置
- MinIO设置
- 环境变量
选项3：冷却部署
- 在Coolify中创建两个应用程序：
- 主控程序 （服务，端口8710，仅限内部） - 网络 （Next.js应用程序，公共域）
- 设置环境变量（请参见
.env.example文件）
- 部署！Coolify auto基于git push构建。
阅读更多： 安装.md
🎯 用法
用AI构建网站
- 导航到应用程序 (http://localhost:3000)
- 输入提示：
Create a modern restaurant homepage with:
- Hero section with dark overlay and booking button
- Featured menu items in 3 columns
- Customer testimonials
- Contact section with Google Maps- 看魔术：
TOOL_CALL: search_templates({"query":"restaurant hero dark"})
TOOL_RESULT: Found 5 templates (score: 0.92)
ASSISTANT: I found a perfect dark restaurant template...
TOOL_CALL: save_page({"subdomain":"my-restaurant"...})
TOOL_RESULT: {"ok":true}
ASSISTANT: Your restaurant homepage is ready!- 完成！ 您的网站已保存并准备发布。
管理面板（即将推出）
访问地址： /admin:
- 📊 仪表盘：分析、网站统计
- 🌐 现场经理：列出所有网站，编辑页面
- 👥 用户：管理账户、信用
- ⚙️ 设置：配置域、集成
API使用
// Generate a site programmatically
const response = await fetch('/api/ai', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
prompt: 'Modern SaaS landing page with pricing table'
})
});
// Stream responses
const reader = response.body.getReader();
const decoder = new TextDecoder();
while (true) {
const { done, value } = await reader.read();
if (done) break;
console.log(decoder.decode(value));
}阅读更多： API毫米
📚 API 文档
Web应用程序端点
| 端点 | 方法 | 描述 |
|---|---|---|
/api/ai | POST | 使用AI生成网站（流媒体） |
/admin/* | GET/POST | 管理面板路由 |
MCP服务端点
| 端点 | 方法 | 描述 |
|---|---|---|
/health | GET | 健康检查 |
/tool/search_templates | POST | 语义模板搜索 |
/tool/save_page | POST | 将页面AST保存到数据库 |
/tool/put_asset | POST | 将文件上传到MinIO |
/tool/notify | POST | 通过Apprise发送通知 |
/tool/trigger_flow | POST | 触发n8n工作流 |
完整文档： API毫米
🚢 部署
生产清单
- \[\]设置PostgreSQL数据库
- \[\]配置Qdrant矢量数据库
- \[\]为资产设置MinIO
- \[\]将OPENAI_API_KEY添加到环境中
- \[\]配置域DNS
- \[\]启用HTTPS/SSL
- \[\]添加身份验证（Keycloak、Auth0）
- \[\]设置监控（哨兵、普罗米修斯）
- \[\]配置备份
冷却（推荐）
- MCP服务
- 姓名： mcp - 端口： 8710 - 仅限内部（无域） - 环境：使用 services/mcp/.env.example
- 网页应用
- 域名： app.thelux.app - 构建： npm run build - 开始： npm run start - 环境：使用 apps/web/.env.example - 集 MCP_URL=http://mcp:8710
- 部署：推送到存储库→ 自动部署
Docker Compose
# See docker-compose.yml in repo
services:
postgres:
image: postgres:16-alpine
qdrant:
image: qdrant/qdrant
minio:
image: minio/minio
mcp:
build: ./services/mcp
web:
build: ./apps/web运行： docker-compose up -d
🛠️ 发展
项目结构
mcptheluxapp/
├── apps/
│ └── web/ # Next.js web application
│ ├── app/ # App Router pages
│ ├── api/ # API routes
│ └── components/ # React components
├── services/
│ └── mcp/ # MCP HTTP shim service
│ └── src/ # Tool implementations
├── sql/
│ └── 001_init.sql # Database schema
├── INSTALLATION.md # Setup guide
├── ARCHITECTURE.md # System design
└── API.md # API documentation本地运行
# Terminal 1: MCP Service
cd services/mcp
npm run dev
# Terminal 2: Web App
cd apps/web
npm run dev
# Terminal 3: Dependencies
docker-compose up postgres qdrant minio林与建筑
# Lint
cd apps/web && npm run lint
# Build
cd apps/web && npm run build
# Start production
cd apps/web && npm run start添加新工具
- 向MCP服务添加工具 (
services/mcp/src/index.js):
async function my_new_tool({ param }) {
// Implementation
return { result: 'data' };
}- 添加工具定义 (
apps/web/app/api/ai/route.ts):
{
name: 'my_new_tool',
description: 'Does something cool',
parameters: { ... }
}- 添加路由处理程序 （MCP服务）：
if (tool === 'my_new_tool') result = await my_new_tool(body);🤝 贡献
我们欢迎捐款！拜托：
- 分叉存储库
- 创建要素分支：
git checkout -b feature/amazing-feature - 提交更改：
git commit -m 'Add amazing feature' - 推送到分支：
git push origin feature/amazing-feature - 打开拉取请求
看 贡献.md 作为指导方针。
📄 许可证
MIT许可证-请参阅 许可证 文件以获取详细信息。
🆘 支持
- 📖 文档：请参见安装.md、架构.md、API.md
- 🐛 问题:
- 💬 讨论:
🎯 路线图
当前版本（v0.1.0）
- ✅ 人工智能网站生成
- ✅ MCP工具集成
- ✅ 模板搜索（Qdrant）
- ✅ 基础用户界面
即将推出
- 🚧 着陆页
- 🚧 管理面板
- 🚧 用户认证
- 🚧 子域路由
- 🚧 信用体系
- 🚧 模板市场
未来
- 📅 拖放编辑器
- 📅 实时协作
- 📅 白标支持
- 📅 企业SSO
- 📅 本地MCP服务器（替换HTTP垫片）
🙏 致谢
- 开放人工智能 -GPT-4和嵌入件
- Qdrant -矢量数据库
- Next.js -React框架
- 主控程序 -模型上下文协议
- 冷却 -部署平台
______________________________________________________________________
内置于❤️ TheLux团队