mcptheluxapp (Iboss21)

TheLux MCP应用程序-基于人工智能的网站构建器

Vibe编码的网站构建器 带着一个 AI后端 它使用模型上下文协议（MCP）工具来创建、管理和部署由OpenAI支持的网站。

 ](package.json) 

🚀 TheLux是什么？

TheLux是一个 微型SaaS平台 它将尖端的人工智能与模型上下文协议（MCP）相结合，彻底改变了网站建设：

• 🎨 人工智能网站生成：用自然语言描述你的愿景，获得一个完整的网站
• 🔧 MCP工具集成：语义模板搜索、资产管理、工作流自动化
• 🗄️ 多租户架构：使用子域路由托管不受限制的站点
• ⚡ 实时流媒体：观看AI逐步构建您的网站
• 🎯 生产就绪：在Coolify、Docker或任何Node.js环境中部署

主要特点

• ✅ 自然语言到网站：“创建餐厅主页”→ 完整的网站，包括英雄、菜单、预订CTA
• ✅ 模板发现：AI使用向量嵌入（Qdrant）搜索100个模板
• ✅ 资产存储：将图像、视频、文件上传到MinIO S3兼容存储
• ✅ 页面管理：在PostgreSQL中将页面保存/更新为JSON AST
• ✅ 通知：通过Apprise触发警报（Slack、电子邮件、Discord等）
• ✅ 工作流程自动化：连接到n8n进行复杂的自动化
• ✅ 管理面板：管理网站、用户和页面（即将推出）

📋 目录

• 快速开始
• 建筑
• 安装
• 用法
• API 文档
• 部署
• 发展
• 贡献
• 许可证

⚡ 快速开始

先决条件

• 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：冷却部署

1. 在Coolify中创建两个应用程序：

- 主控程序 （服务，端口8710，仅限内部） - 网络 （Next.js应用程序，公共域）

1. 设置环境变量（请参见 .env.example 文件）

1. 部署！Coolify auto基于git push构建。

阅读更多： 安装.md

🎯 用法

用AI构建网站

1. 导航到应用程序 (http://localhost:3000)

1. 输入提示：

   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

1. 看魔术：

   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!

1. 完成！ 您的网站已保存并准备发布。

管理面板（即将推出）

访问地址： /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应用程序端点

MCP服务端点

完整文档： API毫米

🚢 部署

生产清单

• \[\]设置PostgreSQL数据库
• \[\]配置Qdrant矢量数据库
• \[\]为资产设置MinIO
• \[\]将OPENAI_API_KEY添加到环境中
• \[\]配置域DNS
• \[\]启用HTTPS/SSL
• \[\]添加身份验证（Keycloak、Auth0）
• \[\]设置监控（哨兵、普罗米修斯）
• \[\]配置备份

冷却（推荐）

1. MCP服务

- 姓名： mcp - 端口： 8710 - 仅限内部（无域） - 环境：使用 services/mcp/.env.example

1. 网页应用

- 域名： app.thelux.app - 构建： npm run build - 开始： npm run start - 环境：使用 apps/web/.env.example - 集 MCP_URL=http://mcp:8710

1. 部署：推送到存储库→ 自动部署

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

添加新工具

1. 向MCP服务添加工具 (services/mcp/src/index.js):

   async function my_new_tool({ param }) {
     // Implementation
     return { result: 'data' };
   }

1. 添加工具定义 (apps/web/app/api/ai/route.ts):

   {
     name: 'my_new_tool',
     description: 'Does something cool',
     parameters: { ... }
   }

1. 添加路由处理程序 （MCP服务）：

   if (tool === 'my_new_tool') result = await my_new_tool(body);

🤝 贡献

我们欢迎捐款！拜托：

1. 分叉存储库
2. 创建要素分支： git checkout -b feature/amazing-feature
3. 提交更改： git commit -m 'Add amazing feature'
4. 推送到分支： git push origin feature/amazing-feature
5. 打开拉取请求

看 贡献.md 作为指导方针。

📄 许可证

MIT许可证-请参阅 许可证 文件以获取详细信息。

🆘 支持

• 📖 文档：请参见安装.md、架构.md、API.md
• 🐛 问题:
• 💬 讨论:

🎯 路线图

当前版本（v0.1.0）

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

即将推出

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

未来

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

🙏 致谢

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

______________________________________________________________________

内置于❤️ TheLux团队

网站 • 文档 •