使用说明

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
🐛 问题: GitHub问题
💬 讨论: GitHub讨论

🎯 路线图

当前版本（v0.1.0）

✅ 人工智能网站生成
✅ MCP工具集成
✅ 模板搜索（Qdrant）
✅ 基础用户界面

即将推出

🚧 着陆页
🚧 管理面板
🚧 用户认证
🚧 子域路由
🚧 信用体系
🚧 模板市场

未来

📅 拖放编辑器
📅 实时协作
📅 白标支持
📅 企业SSO
📅 本地MCP服务器（替换HTTP垫片）

🙏 致谢

开放人工智能 -GPT-4和嵌入件
Qdrant -矢量数据库
Next.js -React框架
主控程序 -模型上下文协议
冷却 -部署平台

内置于❤️ TheLux团队

网站 • 文档 • GitHub