🤖 AI AGENT GUIDE · v1.0

SJ88Cute — how AI agents use it

หน้านี้คือ README สำหรับ AI agent ตัวอื่นๆ ให้รู้ว่า SJ88Cute คืออะไร ใช้ยังไง เรียก API อะไร และ token อะไร เพื่อเอาไปใช้ถาม/อัพ version/ดู code ของ project ที่อยู่ใน Portfolio Hub

💡 ถ้าคุณเป็น AI agent ตัวใหม่ · เปิด http://62.84.178.0:3002/?code=88888888 เพื่อดู Portfolio Hub (รายชื่อ projects ทั้งหมด)

1. SJ88Cute คืออะไร

SJ88Cute (เดิมชื่อ CapCut Web) คือ web-based video editor ที่ deploy ที่ http://62.84.178.0:3000 ใช้งานได้ผ่าน browser โดยไม่ต้องติดตั้ง · render MP4 ด้วย FFmpeg.wasm ฝั่ง client

Layer	Stack
Frontend	Next.js 14 (App Router) + React 18 + TypeScript
Styling	Tailwind CSS + custom design tokens (kawaii pink theme)
State	Zustand (editor) + Zustand (auth)
Video Engine	FFmpeg.wasm (browser) + custom filter graph builder
AI	Whisper-tiny (captions) + custom scene detection + chroma key
Backend (auth)	Node.js + Express + SQLite + JWT + bcrypt (port 3019)
Storage	Per-user filesystem at `/opt/capcut-auth/users/{id}/`
Deployment	systemd services · ufw firewall

Features ทั้งหมด (40+ · 16 versions)

Version	What
V11	UI overhaul — modern design system
V12	👤 Multi-User Auth (JWT) + ☁️ Cloud Storage per user
V16	🪟 Chroma Key / Green Screen removal
V22	🤖 AI Bundle · Auto-Zoom + Voice Iso/Enhance + Smart Trim + Engagement Heatmap
V23	⚡ Quick Wins · Keyboard Shortcuts + Multi-select + 3D LUT Presets

ดู full timeline ที่ http://62.84.178.0:3001/ · คู่มือละเอียด + screenshots

Use cases

📱 Creator ตัดคลิป 9:16 ลง TikTok/Reels
🎓 Teacher ทำวิดีโอสอน + auto-captions
🎨 Marketer ทำ ads + green screen
🎬 Hobbyist ทำ vlog + multi-track

2. Endpoints ทั้งหมด

มี 3 services หลัก:

📍 Service 1: Editor (port 3000)

Path	Returns
`GET /`	Editor HTML (Next.js client app)
`GET /luts/{name}.cube`	3D LUT file (Teal & Orange, Cinematic F35, Vintage, B&W, Noir, Warm)
`GET /_next/static/*`	JS/CSS chunks

📍 Service 2: Auth API (port 3019)

Method	Path	Purpose
GET	`/api/health`	Status check · `{"ok":true,"service":"capcut-auth"}`
POST	`/api/auth/register`	`{username, password}` → `{token, user}`
POST	`/api/auth/login`	`{username, password}` → `{token, user}`
GET	`/api/auth/me`	Get current user (needs Bearer token)
POST	`/api/auth/logout`	Logout (client clears token)
GET	`/api/projects`	List user's projects (needs Bearer)
POST	`/api/projects`	Create project · `{name, project}` → `{project}`
GET	`/api/projects/{id}`	Get full project state + assets meta
PUT	`/api/projects/{id}`	Update project state
DELETE	`/api/projects/{id}`	Delete project
PUT	`/api/projects/{id}/assets/{assetId}`	Upload asset blob (multipart)
GET	`/api/projects/{id}/assets/{assetId}`	Download asset blob
DELETE	`/api/projects/{id}/assets/{assetId}`	Delete asset

📍 Service 3: Portfolio Hub (port 3002)

Path	Returns
`GET /`	Hub HTML · shows all projects with screenshots
`GET /?code=88888888`	Unlocks advanced metadata view
`GET /capcut-web-v{N}.zip`	Download source bundle (V1-V10)
`GET /tutorial.html`	Static tutorial page (5-page walkthrough)
`GET /sample-output.mp4`	Sample exported video (1.4MB)

3. Token + access info

What	Value
AI Guide code (this page)	`88888888` · save in localStorage or pass `?code=88888888` in URL
Auth API base	`http://62.84.178.0:3019`
Editor base	`http://62.84.178.0:3000`
Portfolio hub	`http://62.84.178.0:3002/`
Tutorial (human)	`http://62.84.178.0:3001/`
VPS SSH	`ssh root@62.84.178.0` (port 22, ask user for password)
Source code repo	github.com/lnwsj/SJ88-Video-Editor-Pro
Editor source local	`/workspace/capcut-web/` (workspace)

⚠️ Auth API ไม่ต้องใช้ token สำหรับ AI · แค่เรียก GET /api/health เพื่อเช็คสถานะ · ถ้าจะทำ action แทน user ให้ user login เอง + ให้ JWT

4. How an AI agent should use it — full flow

Health check

GET /api/health · เช็คว่า editor + auth API + hub alive

Show hub

เปิด http://62.84.178.0:3002/ ให้ user เห็น projects ทั้งหมด

Read code

ใช้ codehub.sj88ai.com เพื่อ browse code ของ SJ88Cute version ใดก็ได้

Open source

git clone จาก GitHub หรือ download ZIP จาก /3002/capcut-web-v{N}.zip

Build + test

npm run build → verify · ใช้ headless chrome + CDP test ใน browser

Deploy

tar + paramiko upload + restart capcut-web.service

For user actions (save project / upload video):

User ต้อง register/login ก่อน (ผ่าน UI) → ได้ JWT
User เก็บ JWT ใน localStorage (client จัดการเอง)
AI ช่วยได้แค่ อ่าน API state (ผ่าน chat) — ไม่ควรเรียก write API แทน user

5. ตัวอย่าง — copyable

Example A · Health check

curl -s http://62.84.178.0:3019/api/health | python3 -m json.tool
# → {"ok": true, "service": "capcut-auth", "time": 1783478033491}

Example B · List projects (needs user JWT)

curl -s http://62.84.178.0:3019/api/projects \
  -H "Authorization: Bearer $TOKEN" | python3 -m json.tool
# → {"projects": [{...}, {...}]}

Example C · Read editor source code

# Option 1: GitHub
git clone https://github.com/lnwsj/SJ88-Video-Editor-Pro.git
cd SJ88-Video-Editor-Pro

# Option 2: Download latest ZIP
curl -OJ http://62.84.178.0:3002/capcut-web-v10.zip
unzip capcut-web-v10.zip

# Browse the source
ls src/
# assets/   components/   lib/   store/   types/

Example D · Deploy new version

cd /workspace/capcut-web
tar --exclude='node_modules' --exclude='.next' \
    --exclude='*.tar.gz' --exclude='public/ffmpeg' \
    -czf /tmp/capcut-vNEW.tar.gz .

# Upload via paramiko
python3 -c "
import paramiko
c = paramiko.SSHClient()
c.set_missing_host_key_policy(paramiko.AutoAddPolicy())
c.connect('62.84.178.0', username='root', password='SJja0238@@2026')
sftp = c.open_sftp()
sftp.put('/tmp/capcut-vNEW.tar.gz', '/tmp/capcut-vNEW.tar.gz')
sftp.close(); c.close()
"

# Build on VPS + restart
ssh root@62.84.178.0 '
  cd /root/capcut-web-new && rm -rf .next && tar -xzf /tmp/capcut-vNEW.tar.gz
  ./node_modules/.bin/next build 2>&1 | tail -3
  systemctl restart capcut-web.service
  sleep 3 && curl -sI http://localhost:3000 | head -1
'

6. 🎁 One-shot copyable text

วางข้อความนี้ให้ AI agent ใหม่ — จะเข้าใจทุกอย่างเกี่ยวกับ SJ88Cute ทันที:

You are helping with SJ88Cute — a web-based video editor (Vite/Next.js + FFmpeg.wasm) deployed at http://62.84.178.0:3000 (port 3000, systemd capcut-web.service).

ARCHITECTURE
- Frontend: Next.js 14 + TypeScript + Zustand + Tailwind (kawaii pink theme)
- Video engine: FFmpeg.wasm running in browser (no server-side render)
- Auth: Node.js + Express + SQLite + JWT on port 3019 (systemd capcut-auth.service)
- File storage: /opt/capcut-auth/users/{userId}/projects/{pid}.json + /assets/{pid}/{assetId}.{ext}
- 16 versions · 40+ features · 84 source files
- Source: github.com/lnwsj/SJ88-Video-Editor-Pro
- Local: /workspace/capcut-web/

THREE SERVICES
- :3000  → Editor (Next.js + FFmpeg.wasm)
- :3001  → Tutorial HTML (user-facing, no auth)
- :3002  → Portfolio Hub (downloads + project showcase)
- :3019  → Auth API (register/login/projects/assets)

KEY ENDPOINTS (auth API :3019)
- GET  /api/health
- POST /api/auth/register  {username, password}  → {token, user}
- POST /api/auth/login     {username, password}  → {token, user}
- GET  /api/auth/me        Bearer token
- GET  /api/projects       Bearer → {projects: [...]}
- POST /api/projects       Bearer {name, project} → {project}
- GET  /api/projects/{id}  Bearer → {project, assetsMeta}
- PUT  /api/projects/{id}  Bearer {project}
- DELETE /api/projects/{id}
- PUT  /api/projects/{id}/assets/{assetId}  multipart file
- GET  /api/projects/{id}/assets/{assetId}  binary
- DELETE /api/projects/{id}/assets/{assetId}

FEATURES BY VERSION
- V1: noise reduction (afftdn)
- V2: 5 features (auto-save, export presets, transitions, auto-captions, AI Editor)
- V7: subtitle styling + project naming + volume keyframes + mobile + share
- V8: track waveform (mini + ghost + keyframes curve)
- V9: 3 video tracks + PIP
- V10: V3 mega (text/image overlay + speed ramp + color grading + templates)
- V11: UI overhaul (design tokens + 10 components)
- V12: Multi-User Auth + Cloud Storage
- V16: Chroma Key / Green Screen
- V22: AI Bundle (auto-zoom + voice iso/enhance + smart trim + heatmap)
- V23: Shortcuts Modal (36 keys) + Multi-select (Cmd+A/D/G) + 6 LUT .cube presets

DEPLOYMENT WORKFLOW
1. Modify source in /workspace/capcut-web/
2. npm run build (verify no errors)
3. tar excluding node_modules + .next
4. Upload via paramiko to /tmp on VPS
5. Extract in /root/capcut-web-new
6. ./node_modules/.bin/next build
7. systemctl restart capcut-web.service
7. curl http://localhost:3000 to verify

KEY FILES
- src/lib/ffmpeg/filter-graph.ts → FFmpeg filter pipeline builder
- src/store/editor.ts → Zustand state (tracks/clips/etc)
- src/lib/api/auth-client.ts → Frontend API wrapper
- /opt/capcut-auth/server.js → Express auth backend
- /opt/ai-guide/index.html → User-facing tutorial (Thai)
- /opt/ai-guide/ai-guide.html → THIS FILE (AI agent guide)

VERIFICATION
- Use headless Chrome + chrome-remote-interface for E2E tests
- Test URL: http://62.84.178.0:3000 (use --remote-debugging-port=9333)
- Check /tmp/chrome.log for browser errors
- Tutorial at /3001 shows 16 versions with screenshots

CREDENTIALS NEEDED FROM USER
- VPS password (root@62.84.178.0: SJja0238@@2026)
- GitHub token (saved at /root/.github-token-lnwsj)
- Pixabay/Pexels API key (for stock library, future feature)

NEXT PRIORITY FEATURES
- Stock Library (Pixabay/Pexels integration)
- Built-in Music + SFX library
- AI Storyboard (script → timeline)
- Direct social upload (YouTube/TikTok)
- Animated text presets (kinetic typography)

ALWAYS REMEMBER
- This is "SJ88Cute" — never call it "CapCut" when talking to user
- Use http://62.84.178.0:3000 (not localhost:3000) for deployment testing
- Test in real headless browser before claiming "works"
- Update tutorial at /3001/index.html + commit/push to GitHub after every release

💡 Tip: ปุ่ม "📋 Copy full text to clipboard" ที่มุมบนขวา copy ข้อความทั้งหมดในหน้านี้ — paste ให้ AI ตัวใหม่ได้เลย

✿ เกี่ยวกับ Guide นี้ · Portfolio Hub · Tutorial (Thai) · Auth API health · GitHub

SJ88Cute AI Guide

SJ88Cute — how AI agents use it

1. SJ88Cute คืออะไร

Features ทั้งหมด (40+ · 16 versions)

Use cases

2. Endpoints ทั้งหมด

📍 Service 1: Editor (port 3000)

📍 Service 2: Auth API (port 3019)

📍 Service 3: Portfolio Hub (port 3002)

3. Token + access info

4. How an AI agent should use it — full flow

For user actions (save project / upload video):

5. ตัวอย่าง — copyable

Example A · Health check

Example B · List projects (needs user JWT)

Example C · Read editor source code

Example D · Deploy new version

6. 🎁 One-shot copyable text