MetaBBX - AI-Powered Code Generator & Editor

MetaBBX là một webapp hoàn chỉnh kết hợp giữa AI-powered code generation (sử dụng MetaGPT) và code editor với khả năng thực thi code trực tiếp.

🚀 Tính năng chính

🤖 AI Code Generation

• Tích hợp MetaGPT workflow để tạo code tự động
• Chat interface để tương tác với AI
• Xem và tải xuống các file được tạo bởi AI
• Hỗ trợ nhiều ngôn ngữ lập trình

💻 Code Editor

• Monaco Editor với syntax highlighting
• Hỗ trợ nhiều ngôn ngữ lập trình
• Thực thi code trực tiếp (Python, JavaScript)
• Lưu, copy, và clear code

🔧 Backend API

• Flask API server
• Code execution endpoints
• MetaGPT workflow integration
• File management

📋 Yêu cầu hệ thống

• Python 3.8+
• Node.js 16+
• npm hoặc yarn

🛠️ Cài đặt

1. Clone repository

git clone <repository-url>
cd MetaBBX

2. Cài đặt Python dependencies

pip install -r requirements.txt

3. Cài đặt frontend dependencies

cd frontend
npm install
cd ..

🚀 Khởi động

Cách 1: Sử dụng script tự động (Khuyến nghị)

python start_webapp.py

Script này sẽ:

• Kiểm tra dependencies
• Cài đặt frontend dependencies nếu cần
• Khởi động cả backend và frontend
• Hiển thị thông tin kết nối

Cách 2: Khởi động thủ công

Terminal 1 - Backend:

cd backend
python api_server.py

Terminal 2 - Frontend:

cd frontend
npm start

🌐 Truy cập

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000
• Health Check: http://localhost:5000/api/health

📖 Hướng dẫn sử dụng

1. Code Editor Tab

• Chọn ngôn ngữ lập trình từ dropdown
• Viết code trong editor
• Nhấn nút "Run Code" để thực thi
• Sử dụng các nút Save, Copy, Clear để quản lý code

2. AI Chat Tab

• Nhập mô tả về ứng dụng bạn muốn tạo
• AI sẽ sử dụng MetaGPT workflow để tạo code
• Xem các file được tạo trong accordion
• Nhấn "View File Content" để xem nội dung file

3. AI Workflow Button

• Nhấn nút "Run AI Workflow" (biểu tượng AutoAwesome)
• Code trong editor sẽ được sử dụng làm prompt
• AI sẽ tạo ứng dụng dựa trên mô tả

🔧 API Endpoints

Health Check

GET /api/health

Chat

POST /api/chat
{
  "messages": [{"role": "user", "content": "Build me a todo app"}],
  "language": "python"
}

Code Execution

POST /api/execute/python
{
  "code": "print('Hello World')",
  "input": ""
}

Workflow

POST /api/workflow/run
{
  "prompt": "Build me a todo app",
  "rounds": 1,
  "tokens": 1000
}

Get Results

GET /api/workflow/results

Get File Content

GET /api/files/{filename}

🏗️ Cấu trúc dự án

MetaBBX/
├── backend/                 # Python backend
│   ├── api_server.py       # Flask API server
│   ├── workflow.py         # MetaGPT workflow
│   ├── Utility.py          # Utility functions
│   └── ...
├── frontend/               # React frontend
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── services/       # API services
│   │   └── App.tsx         # Main app component
│   └── ...
├── start_webapp.py         # Startup script
├── requirements.txt        # Python dependencies
└── README.md              # This file

🐛 Troubleshooting

Backend không khởi động

• Kiểm tra Python dependencies: pip install -r requirements.txt
• Kiểm tra port 5000 có đang được sử dụng không
• Xem logs trong terminal backend

Frontend không khởi động

• Kiểm tra Node.js và npm đã cài đặt
• Chạy npm install trong thư mục frontend
• Kiểm tra port 3000 có đang được sử dụng không

CORS errors

• Backend đã được cấu hình CORS
• Kiểm tra URL API trong frontend services

Code execution không hoạt động

• Kiểm tra Node.js đã cài đặt (cho JavaScript execution)
• Kiểm tra Python environment
• Xem logs trong terminal backend

🤝 Đóng góp

1. Fork repository
2. Tạo feature branch
3. Commit changes
4. Push to branch
5. Tạo Pull Request

📄 License

MIT License

📞 Liên hệ

• Email: [your-email]
• GitHub: [your-github]

---

MetaBBX - AI-Powered Code Generator & Editor 🚀