Một workspace. Bốn AI mode. Không giới hạn khả năng.
_{Agent • Vscode • Chat • Sns — tất cả trong một dark UI cực đỉnh}

   

         

---

✦ Tại sao Sandbox.ai?

ChatGPT Plus $20 + GitHub Copilot $10 + Midjourney $10 = $40+/tháng cho 3 tool rời rạc.
Sandbox.ai làm cả 4 mode trong một workspace — giao diện tối, streaming thời gian thực, lịch sử vĩnh viễn.

---

⚡ Bốn AI Mode

Mode	Model	Mô tả	Màu sắc
💬 Chat	GPT-5.2	Lý luận sâu, multi-turn context, streaming thời gian thực. Deep Think mode dùng o4-mini
⌨️ Code	GPT-5.3 Codex	Syntax highlight tự động, copy 1-click, code block với language tag chính xác
🎨 Image	gpt-image-1	Tạo ảnh HD 1024×1024 từ mô tả. Lưu vĩnh viễn vào lịch sử hội thoại
📱 Flutter NEW	GPT-5.2 Expert	MVVM + Riverpod · Firebase · ASO 2026 · Android Vitals · RevenueCat monetization

---

🏗️ Kiến trúc hệ thống

┌─────────────────────────────────────────────────────────────┐
│                        SANDBOX.AI                           │
│                    pnpm Monorepo (TS)                       │
└─────────────────────────────────────────────────────────────┘
          │                              │
    ┌─────▼─────────┐            ┌───────▼──────────┐
    │  Frontend     │            │   API Server     │
    │  React + Vite │            │   Express 5      │
    │  Port: $PORT  │◄──SSE─────►│   Port: 8080     │
    │               │            │                  │
    │  Pages:       │            │  Routes:         │
    │  / (Landing)  │            │  /api/healthz    │
    │  /chat        │            │  /openai/conv.   │
    │  /dashboard   │            │  /openai/msg.    │
    │  /pricing     │            │  /admin/*        │
    │  /admin       │            │  /generate-img   │
    │  /settings    │            └──────┬───────────┘
    │  /onboarding  │                   │
    └───────────────┘            ┌──────▼───────────┐
           │                    │   PostgreSQL      │
    ┌──────▼──────────┐         │   Drizzle ORM     │
    │  Clerk Auth     │         │                  │
    │  JWT Tokens     │         │  Tables:          │
    │  RBAC Roles     │         │  conversations   │
    │  Plan Gating    │         │  messages        │
    └─────────────────┘         └──────────────────┘

---

🔐 RBAC + Plan-based Feature Gating

// 3 Roles
type Role = "user" | "moderator" | "admin";

// 3 Plans
type Plan = "free" | "pro" | "enterprise";

// Feature gates
canUse("dashboard")   → moderator+ only
canUse("admin")       → admin only
canUse("deepThink")   → pro/enterprise
canUse("imageGen")    → pro/enterprise

Feature	Free	Pro	Enterprise	Moderator	Admin
Chat Mode	✅	✅	✅	✅	✅
Code Mode	✅	✅	✅	✅	✅
Image Mode	❌	✅	✅	✅	✅
Deep Think	❌	✅	✅	✅	✅
Dashboard	❌	❌	❌	✅	✅
Admin Panel	❌	❌	❌	❌	✅

---

🛠️ Tech Stack

Frontend React 19 + TypeScript Vite 6 (dev server + HMR) Tailwind CSS 4 + shadcn/ui Framer Motion (animations) Clerk (auth + session) React Router v7 react-syntax-highlighter Orval (type-safe API hooks) @stripe/stripe-js (checkout)

Backend Express 5 + TypeScript Drizzle ORM + drizzle-zod PostgreSQL (Replit DB) Zod v4 validation @clerk/express middleware OpenAI SDK (streaming SSE) stripe (payment + webhooks) pino (structured logging) esbuild (CJS bundle)

Tooling pnpm workspaces (monorepo) TypeScript 5.9 (project refs) Orval API codegen (OpenAPI → hooks + Zod) drizzle-kit push (schema sync) ESLint + strict TS Node.js 24

---

📁 Cấu trúc dự án

sanbox/
├── artifacts/
│   ├── sandbox-ai/          # React + Vite web app
│   │   └── src/
│   │       ├── pages/       # Landing, Chat, Dashboard, Pricing, Admin...
│   │       ├── components/  # ChatInput, ChatArea, Sidebar, FeatureGate...
│   │       └── hooks/       # use-permissions, use-chat, use-conversations
│   │
│   └── api-server/          # Express 5 API
│       └── src/
│           ├── routes/
│           │   ├── openai/  # conversations + messages (streaming SSE)
│           │   └── admin/   # RBAC management endpoints
│           └── middlewares/
│               └── requireAuth.ts   # Clerk JWT validation
│
├── lib/
│   ├── api-client-react/    # Orval-generated hooks + customFetch (auth)
│   ├── api-spec/            # OpenAPI spec → codegen source of truth
│   ├── api-zod/             # Generated Zod schemas
│   ├── db/                  # Drizzle schema + migrations
│   └── integrations-openai-ai-server/  # OpenAI client (server-side)
│
├── pnpm-workspace.yaml
└── tsconfig.base.json

---

🚀 Cài đặt và chạy local

Yêu cầu

• Node.js ≥ 24
• pnpm ≥ 9
• PostgreSQL database
• Tài khoản Clerk (lấy publishable + secret key)
• Replit AI Integrations (OpenAI proxy) — hoặc API key của bạn

Bước 1: Clone

git clone https://github.com/Huynhthuongg/Sanbox.git
cd Sanbox
pnpm install

Bước 2: Biến môi trường

Tạo file .env ở root:

# Clerk Auth
CLERK_PUBLISHABLE_KEY=pk_test_...
CLERK_SECRET_KEY=sk_test_...
VITE_CLERK_PUBLISHABLE_KEY=pk_test_...

# Database
DATABASE_URL=postgresql://user:password@localhost:5432/sandboxai

# OpenAI (hoặc dùng Replit AI Integrations)
OPENAI_API_KEY=sk-...

Bước 3: Khởi tạo database

pnpm --filter @workspace/db run push

Bước 4: Chạy dev server

# Terminal 1 — API server (port 8080)
pnpm --filter @workspace/api-server run dev

# Terminal 2 — Frontend (port tự động)
pnpm --filter @workspace/sandbox-ai run dev

Mở trình duyệt: http://localhost:5173

---

📋 Các lệnh quan trọng

# Typecheck toàn bộ monorepo
pnpm run typecheck

# Build tất cả packages
pnpm run build

# Tái tạo API hooks từ OpenAPI spec
pnpm --filter @workspace/api-spec run codegen

# Push DB schema (dev)
pnpm --filter @workspace/db run push

# Build API server (production)
pnpm --filter @workspace/api-server run build

---

🌟 Tính năng nổi bật

🔄 Real-time streaming	Server-Sent Events (SSE) — phản hồi xuất hiện từng chữ như terminal thực
🧠 Deep Think mode	Bật Think để dùng o4-mini với chain-of-thought reasoning
🎨 Image generation	gpt-image-1 tạo ảnh HD 1024×1024, lưu vĩnh viễn trong lịch sử
📱 Flutter Expert mode	MVVM + Riverpod, Firebase, ASO 2026, Android Vitals, RevenueCat
💾 Persistent history	Toàn bộ hội thoại lưu PostgreSQL — đăng nhập lại vẫn còn đủ
🔐 RBAC + Plan gating	3 roles × 3 plans — publicMetadata trên Clerk, không cần DB users table
📊 Dashboard 6 tabs	Overview · Usage · Models · History · API Keys · Team (moderator+)
🛡️ Auth-check screen	Animated 4-step session verification thay vì blank screen khi Clerk load
💳 Stripe payment integration	Checkout Session cho Pro plan ($19/tháng · $14/tháng annual), Billing Portal, Webhook handler
⚙️ Settings redesign	Tidebar sticky + single-scroll page (Profile · AI Config · Preferences) — IntersectionObserver active nav
🔒 Pro plan lock	Sandbox Pro card hiển thị "Coming Soon" với toast animation — mở khóa khi Stripe Live
🌐 Type-safe API	OpenAPI spec → Orval codegen → React hooks + Zod schemas, zero drift
🎯 Zero mock data	Mọi thứ đều real — PostgreSQL, OpenAI, Clerk. Không có placeholder nào

---

📄 Pages

Route	Mô tả	Auth yêu cầu
/	Landing page + animated terminal hero	—
/chat	New conversation (chọn mode)	✅
/chat/:id	Tiếp tục hội thoại	✅
/dashboard	Analytics + quản lý (6 tabs)	Moderator+
/admin	RBAC management, user control	Admin
/pricing	Free / Pro / Enterprise plans	—
/settings	Profile · AI Config · Preferences — sidebar navigation	✅
/onboarding	Wizard 4 bước cho user mới	✅
/auth-check	Animated session verification	—

---

🎨 Design System

/* Design tokens */
--bg:      #050507;   /* Nền chính */
--accent:  #00d0ff;   /* Cyan — Chat mode */
--green:   #34d399;   /* Code mode */
--purple:  #a855f7;   /* Image mode */
--flutter: #54c5f8;   /* Flutter mode */
--yellow:  #f59e0b;   /* Warning / Pro badge */
--card:    #0c0c14;   /* Card background */
--border:  rgba(255,255,255,0.07);

Font chữ: JetBrains Mono (monospace) + Inter (sans-serif)

---

📬 Liên hệ

Kênh	Địa chỉ
📧 Email	Admin@huynhthuong.online
💬 Facebook	facebook.com/Sandbox.ai

---

🤝 Đóng góp

Pull requests luôn được chào đón! Để đóng góp lớn, vui lòng mở issue trước để thảo luận về thay đổi bạn muốn thực hiện.

# Fork → Clone → Branch mới
git checkout -b feature/ten-tinh-nang

# Commit
git commit -m "feat: thêm tính năng X"

# Push & Pull Request
git push origin feature/ten-tinh-nang

---

Built with ❤️ using React, Express, PostgreSQL & OpenAI

_{© 2026 Sandbox.ai · The AI Command Center}