RKIX3 AI Workspace

Modern React + TypeScript application for AI-powered development workspace with Vite.

🚀 Get Started · Features · Components · Deployment

🚀 Getting Started

Prerequisites

• Node.js 16+
• npm or yarn

Installation

npm install

Development Server

npm run dev

The app will start at http://localhost:5173 with HMR (Hot Module Replacement).

Build for Production

npm run build

Creates optimized build in dist/ directory.

Preview Build

npm run preview

📁 Project Structure

src/
├── components/
│   ├── Sidebar.tsx              # Main navigation sidebar
│   ├── Header.tsx               # Top header with controls
│   ├── MainContent.tsx          # Central content with prompt input
│   ├── MiniRkxButton.tsx        # Floating navigation button
│   ├── MiniRkxMenu.tsx          # Honeycomb menu (tổ ong)
│   └── ApiSettingsModal.tsx     # API configuration modal
├── App.tsx                      # Root component with state management
└── main.tsx                     # React entry point

✨ Features

• 🎨 Modern Dark Theme - Gradient effects with cyan/blue colors
• 🤖 AI Workspace - Prompt input with voice recording simulation
• 🎯 MiniRkx Navigation - Floating button with honeycomb menu
• 📱 Fully Responsive - Mobile-first design for all screen sizes
• ⌨️ Type Safe - Full TypeScript support
• ⚡ Fast Development - Vite with HMR
• 🎭 Rich Animations - Smooth transitions and transforms

🧩 Components

Component	Purpose
Sidebar	Navigation menu with search, projects, and features
Header	Top bar with menu toggle, API settings, and login
MainContent	Logo, prompt input, and feature cards
MiniRkxButton	Floating button with tech-themed logo
MiniRkxMenu	Honeycomb menu with 6 navigation items
ApiSettingsModal	Configure API keys and settings

🛠️ Technologies

• React 18 - UI library
• TypeScript 5 - Type safety
• Vite 5 - Build tool and dev server
• Tailwind CSS 3 - Utility-first CSS framework
• Lucide React - Icon library

🚀 Deployment

Build

npm run build

The dist/ folder is production-ready and can be deployed to:

• Vercel
• GitHub Pages
• Netlify
• Any static hosting

GitHub Pages

1. Add to package.json:

"homepage": "https://yourusername.github.io/AGENTS.RKIX3"

2. Build and deploy:

npm run build
git add dist -f
git commit -m "Deploy"
git push origin main

📦 Scripts

npm run dev       # Start development server
npm run build     # Build for production
npm run preview   # Preview production build locally
npm run lint      # Run ESLint (optional)

🎯 State Management

The app uses React's built-in useState hook for state management. Key states:

• sidebarOpen - Mobile sidebar visibility
• menuOpen - MiniRkx menu state
• showApiModal - API settings modal visibility
• prompt - User input text
• isRecording - Voice recording state

🤝 Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📄 License

MIT

_{Built with 💙 for RKIX3 — Modern, Fast, and Type-Safe}

---

✨ Tầm nhìn

RKIX3 được xây dựng như một “trung tâm điều khiển” dành cho người làm sản phẩm: viết code, tạo blueprint, gọi AI provider, dựng workflow CLI trên mobile, xem trước HTML và chuẩn bị deploy lên GitHub Pages chỉ từ một web app tĩnh gọn nhẹ.

RKIX3 không chỉ là một giao diện — đây là tinh thần build nhanh, tự động hoá mạnh, tối ưu cho người sáng tạo thích làm chủ toàn bộ quy trình từ điện thoại đến cloud.

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

Mảng	Giá trị
🤖 AI Studio	Chọn OpenAI Responses, Gemini hoặc Demo Offline để tạo blueprint/code mẫu.
🧩 Command Center	Bộ lệnh gợi ý auth, init, ai, db, deploy, rkix3 cho quy trình mobile-first.
📎 Context file	Đính kèm file nhỏ để RKIX3 hiểu thêm ngữ cảnh trước khi sinh kết quả.
🎙️ Voice input	Nhập prompt bằng giọng nói trên trình duyệt hỗ trợ Web Speech API.
🖼️ HTML Preview	Xem trước HTML sinh ra trong iframe sandbox an toàn hơn.
📱 Mobile ready	UI tối ưu cho điện thoại, Termux workflow và thao tác nhanh.
🚀 GitHub Pages	Workflow deploy static content qua artifact _site và GitHub Pages Actions.

🏗️ Kiến trúc nhanh

RKIX3/
├─ index.html                       # Single-file AI Studio UI
├─ README.md                        # Trang giới thiệu chuyên nghiệp trên GitHub
├─ scripts/smoke-test-static.mjs     # Smoke test HTML/JS trước khi deploy
├─ 1780136894650-Photoroom.png      # Logo chính
└─ .github/workflows/static.yml     # Build _site + deploy GitHub Pages

🛠️ Chạy local

python3 -m http.server 4173
# mở http://127.0.0.1:4173

🧪 Kiểm thử

node scripts/smoke-test-static.mjs

Smoke test sẽ kiểm tra cấu trúc route chính, sự tồn tại của chat input/send button, cú pháp JavaScript inline và guard chống render raw user message vào innerHTML.

🚀 Deploy GitHub Pages

Workflow chính .github/workflows/static.yml sẽ:

1. Checkout source.
2. Chạy smoke test static app bằng node scripts/smoke-test-static.mjs.
3. Setup GitHub Pages.
4. Tạo _site chứa index.html, ảnh và file đánh dấu static site.
5. Upload artifact Pages.
6. Deploy bằng actions/deploy-pages.

Nếu GitHub vẫn báo lỗi deploy, hãy vào Settings → Pages → Build and deployment và chọn Source: GitHub Actions cho repository. Các workflow mẫu khác trong .github/workflows/ chỉ nên được bật khi dự án thật sự dùng stack tương ứng.

🏅 Huy hiệu dự án

👑 Vinh danh người tạo ra RKIX3

🔥 Người tạo ra RKIX3 — kiến trúc sư của tinh thần build không giới hạn 🔥

Dự án RKIX3 được truyền cảm hứng bởi một người sáng tạo dám nghĩ lớn, dám biến điện thoại thành trung tâm điều khiển lập trình, và luôn hướng tới một workflow nhanh hơn, gọn hơn, mạnh hơn.

RKIX3 Creator là người đặt nền móng cho phong cách: vuông góc, phẳng lì, tốc độ, tự động hoá và AI-first.

💎 Nhà tài trợ & đồng hành đặc biệt

Khu vực này dành để tri ân những người/đơn vị đồng hành cùng RKIX3. Khi có sponsor thật, hãy thay các thẻ bên dưới bằng tên và liên kết chính thức.

🥇 Founder Circle Người tạo ra RKIX3	🤖 AI Partner OpenAI-ready workflow	⚡ Automation Partner Termux/GitHub CLI flow

✅ Ba xung đột đã được chốt

• Workflow Pages: .github/workflows/static.yml là pipeline deploy chính, chạy smoke test rồi dùng _site làm artifact triển khai.
• Tài liệu GitHub: README là trang giới thiệu chính thức của RKIX3, không còn nội dung cũ trùng lặp.
• Web app RKIX3: index.html tiếp tục là nguồn giao diện single-file được workflow copy trực tiếp khi deploy.

🗺️ Roadmap

• Giao diện RKIX3 Studio single-file.
• Command Center cho CLI/mobile workflow.
• Demo Offline để sinh blueprint khi chưa có API key.
• GitHub Pages static deploy workflow.
• Backend proxy bảo vệ API key production.
• Lưu lịch sử prompt/snippet theo workspace.
• CLI mycli thật cho Termux: auth/init/ai/db/deploy.

🤝 Đóng góp

Pull request, ý tưởng workflow, template CLI, prompt mẫu và sponsor đều được chào đón. Hãy giữ tinh thần RKIX3: mạnh, gọn, rõ, không lộ secret và luôn build được.

_{Made with 💙 for RKIX3 — AI-first, mobile-first, automation-first.}