Kaiju Hub AI

การสร้างโปรเจกต์

Create New Project dialog showing Project Name, Project Location, GitHub linking, Choose Platform tiles (Blank, Desktop, Web, Mobile), and Build Type options (Fresh Install, AI-Generated)

การตั้งค่าโปรเจกต์

คลิกปุ่ม + โปรเจกต์ใหม่ จากแดชบอร์ดโปรเจกต์เพื่อเปิดตัวช่วยสร้าง หน้าจอแรกจะกำหนดค่าพื้นฐานของโปรเจกต์ก่อนที่คุณจะเลือก Tech Stack

ชื่อโปรเจกต์

ป้อนชื่อสำหรับโปรเจกต์ของคุณ ชื่อจะถูกตรวจสอบแบบเรียลไทม์ — ต้องเป็นชื่อโฟลเดอร์ที่ถูกต้อง (ไม่มีอักขระพิเศษเช่น <>:"/\\|?*) และต้องไม่ซ้ำกับโฟลเดอร์ที่มีอยู่ในตำแหน่งที่เลือก

ตำแหน่งโปรเจกต์

ไดเรกทอรีเริ่มต้นที่จะสร้างโฟลเดอร์โปรเจกต์ของคุณ คลิกเรียกดูเพื่อเลือกไดเรกทอรีอื่น โปรเจกต์จะถูกสร้างเป็นโฟลเดอร์ย่อยโดยใช้ชื่อโปรเจกต์

เชื่อมต่อกับ GitHub

เลือกบัญชี GitHub เพื่อสร้างรีโพซิทอรีระยะไกลพร้อมกับโปรเจกต์ในเครื่องของคุณโดยอัตโนมัติ เลือก "ไม่มี (อย่าใช้ GitHub เป็นค่าเริ่มต้น)" เพื่อข้าม

เลือกแพลตฟอร์ม

เลือกหนึ่งในสี่ไทล์แพลตฟอร์มเพื่อกำหนดประเภทโปรเจกต์ที่คุณกำลังสร้าง แต่ละแพลตฟอร์มแสดงตัวเลือกเฟรมเวิร์กและเทคสแตกที่แตกต่างกันในหน้าจอถัดไป

Blank

เครื่องมือ CLI, สคริปต์, ไลบรารี

Desktop

แอป desktop ดั้งเดิม

Web

แอปบนเบราว์เซอร์

Mobile

แอปพลิเคชันอุปกรณ์

ประเภทการสร้าง

เลือกวิธีเริ่มต้นโปรเจกต์:

Fresh Install

สร้างโครงร่างโปรเจกต์ใหม่โดยใช้เครื่องมือเฟรมเวิร์กมาตรฐาน Kaiju Hub AI รันคำสั่ง CLI ที่เหมาะสม (เช่น npm create vite@latest, cargo init, npx create-tauri-app) และติดตั้ง dependency ทั้งหมด

AI-Generated

อธิบายสิ่งที่คุณต้องการสร้างและให้ AI สร้างโปรเจกต์ทั้งหมด คุณให้คำอธิบายข้อความและรูปภาพอ้างอิง (ไม่บังคับ) จากนั้น AI จะเขียนซอร์สโค้ดทั้งหมด ไฟล์การกำหนดค่า และโครงสร้างโปรเจกต์

หลังจากกำหนดค่าโปรเจกต์แล้ว คลิก ดำเนินการต่อไปยัง Tech Stack เพื่อดำเนินการต่อ

โปรเจกต์ Blank

โปรเจกต์ Blank สำหรับเครื่องมือ CLI, สคริปต์, แอปพลิเคชันแบบสแตนด์อโลน และตัวเริ่มต้นเฉพาะภาษา เลือกภาษาหรือรันไทม์ของคุณแล้ว Kaiju Hub AI จะสร้างโครงสร้างโปรเจกต์ขั้นต่ำ

Tech Stack selection for Blank projects showing language options: Empty, Node.js, Python, Rust, C++, Lua, Luau, NestJS, Go, Express, Bun, Deno with Python version selector

ตัวเลือกภาษา / รันไทม์

Empty
Node.js
Python
Rust
C++
Lua
Luau
NestJS
Go
Express
Bun
Deno

บางภาษามีตัวเลือกเวอร์ชัน ตัวอย่างเช่น การเลือก Python จะแสดงตัวเลือกเวอร์ชัน (3.10, 3.11, 3.12, 3.13, 3.14, 3.15) เวอร์ชันที่เลือกจะกำหนดว่าจะใช้ Python interpreter ตัวไหนในการสร้าง virtual environment

โปรเจกต์ Desktop

โปรเจกต์ Desktop สร้างแอปพลิเคชัน desktop ดั้งเดิม เลือกเฟรมเวิร์ก desktop, เฟรมเวิร์ก frontend สำหรับ UI และเลือกฐานข้อมูล (ไม่บังคับ) เฟรมเวิร์ก frontend ทั้งหมดมาพร้อม TypeScript ที่กำหนดค่าไว้แล้ว

Tech Stack selection for Desktop projects showing Desktop Framework (Tauri + Rust, Electron, Flutter + Dart), Frontend Framework (SolidJS, React, Vue, Svelte, Angular), and Database options

เฟรมเวิร์ก Desktop

เฟรมเวิร์กดั้งเดิมที่ให้ shell หน้าต่าง desktop และ API ระดับระบบ

Tauri + Rust
Electron
Flutter + Dart

เฟรมเวิร์ก Frontend

เฟรมเวิร์ก UI ที่ทำงานภายในหน้าต่าง desktop ตัวเลือกทั้งหมดกำหนดค่า TypeScript ไว้แล้ว

SolidJS
React
Vue
Svelte
Angular

ฐานข้อมูล

การรวมฐานข้อมูล (ไม่บังคับ) สำหรับจัดเก็บข้อมูลในเครื่องหรือบนคลาวด์

Supabase
SQLite
Realm
PostgreSQL
Convex

โปรเจกต์ Web

โปรเจกต์เว็บสร้างแอปพลิเคชันบนเบราว์เซอร์ เริ่มต้นด้วยการเลือกระหว่าง Frontend เท่านั้น หรือ Full-Stack เพื่อกำหนดตัวเลือกเฟรมเวิร์กที่มีอยู่ เฟรมเวิร์กทั้งหมดเปิดใช้งาน TypeScript เป็นค่าเริ่มต้น

Tech Stack for Web projects in Frontend Only mode showing SolidJS, React, Vue, Svelte, Angular, Preact + Styling and Database options

Frontend เท่านั้น

เฟรมเวิร์ก UI แบบสแตนด์อโลนสำหรับแอปหน้าเดียวและเว็บไซต์ static มีปุ่มแพ็กเกจกำหนดเองเพื่อเพิ่มแพ็กเกจ npm ของคุณเอง

SolidJS
React
Vue
Svelte
Angular
Preact
Tech Stack for Web projects in Full-Stack mode showing SolidStart, Next.js, Nuxt.js, SvelteKit, Fresh, Astro, TanStack Start, WordPress

Full-Stack

เฟรมเวิร์กเว็บที่สมบูรณ์พร้อม server-side rendering และ API routes ในตัว

SolidStart
Next.js
Nuxt.js
SvelteKit
Fresh
Astro
TanStack Start
WordPress

การจัดรูปแบบ

Tailwind CSS

ฐานข้อมูล

Supabase
Firebase
Prisma
Convex

โปรเจกต์ Mobile

โปรเจกต์ Mobile สร้างแอปพลิเคชันอุปกรณ์สำหรับ iOS และ Android เลือกเฟรมเวิร์ก mobile, เวอร์ชัน SDK และเลือกฐานข้อมูล (ไม่บังคับ)

Tech Stack for Mobile projects showing Expo, React Native CLI, Flutter, Ionic, Capacitor, Android Native (Kotlin) with SDK version selector and Database options

เฟรมเวิร์ก Mobile

เลือกเฟรมเวิร์กสำหรับแอปพลิเคชัน mobile ของคุณ ตัวเลือกเวอร์ชัน SDK จะปรากฏสำหรับเฟรมเวิร์กที่รองรับ SDK เป้าหมายหลายตัว

Expo
React Native CLI
Flutter
Ionic
Capacitor
Android Native (Kotlin)

เวอร์ชัน SDK

สำหรับเฟรมเวิร์กเช่น Expo ให้เลือกเวอร์ชัน SDK (เช่น 52, 53, 54, 55) ซึ่งกำหนด dependency พื้นฐานและความเข้ากันได้ของ API

ฐานข้อมูล

ฐานข้อมูลบนคลาวด์หรือในเครื่อง (ไม่บังคับ) สำหรับแอป mobile ของคุณ

Supabase
Firebase Firestore
SQLite
Realm
WatermelonDB

Fresh Install

เมื่อคุณเลือก ติดตั้งใหม่ เป็นประเภทการ build Kaiju Hub AI จะ scaffold โปรเจกต์ของคุณโดยใช้เครื่องมือเฟรมเวิร์กมาตรฐาน หลังจากเลือก Tech Stack แล้ว คลิก สร้างโปรเจกต์ และ Kaiju Hub AI จะจัดการส่วนที่เหลือ

จะเกิดอะไรขึ้น

1. ตรวจจับตัวจัดการแพ็กเกจ

Kaiju Hub AI ตรวจจับตัวจัดการแพ็กเกจที่ติดตั้งในระบบของคุณโดยอัตโนมัติ (npm, yarn หรือ pnpm)

2. รันคำสั่งสร้างโครงร่าง

รันเครื่องมือ CLI ที่เหมาะสมสำหรับสแตกที่คุณเลือก ตัวอย่าง: npm create vite@latest สำหรับ React, cargo init สำหรับ Rust, npx create-tauri-app สำหรับ Tauri

3. ติดตั้ง Dependencies

รันคำสั่งติดตั้งตัวจัดการแพ็กเกจเพื่อดาวน์โหลดและตั้งค่า dependency ที่จำเป็นทั้งหมด

4. เริ่มต้น Git

ตั้งค่ารีโพซิทอรี Git ในเครื่องพร้อม commit เริ่มต้น

5. สร้าง GitHub Repo

หากคุณเชื่อมต่อบัญชี GitHub จะสร้างรีโพซิทอรีระยะไกลและ push commit เริ่มต้นโดยอัตโนมัติ

โปรเจกต์จะปรากฏในแดชบอร์ดโปรเจกต์เมื่อการสร้างเสร็จสมบูรณ์ พร้อมเปิดและเริ่มเขียนโค้ด

AI-Generated

เมื่อคุณเลือก สร้างด้วย AI เป็นประเภทการ build คุณอธิบายสิ่งที่ต้องการสร้างและ AI จะเขียน codebase เริ่มต้นทั้งหมด หลังจากเลือก Tech Stack แล้ว คลิก สร้างโปรเจกต์ เพื่อเปิดหน้าจอสร้าง AI

AI Generation screen showing model selector, project description input, Images/Components/Files tabs in the sidebar, and Generate Project button

การเลือกโมเดล AI

ที่ด้านบนของหน้าจอสร้าง ให้เลือกผู้ให้บริการ AI และโมเดล คุณสามารถเลือกจากผู้ให้บริการที่กำหนดค่าไว้ (OpenAI, Anthropic, Gemini, Grok, DeepSeek, Ollama) และเลือกโมเดลเฉพาะสำหรับการสร้างโค้ด

คำอธิบายโปรเจกต์

เขียนคำอธิบายโดยละเอียดเกี่ยวกับสิ่งที่คุณต้องการสร้าง ยิ่งเฉพาะเจาะจงมากเท่าไหร่ ผลลัพธ์ก็จะดีขึ้นเท่านั้น ระบุฟีเจอร์หลัก หน้า รูปแบบ UI และการรวมที่คุณต้องการ

ตัวอย่างที่ดี:

  • เว็บไซต์อีคอมเมิร์ซพร้อมรายการสินค้าและตะกร้าสินค้า
  • แดชบอร์ดจัดการงานพร้อมบอร์ด kanban
  • แพลตฟอร์มโซเชียลมีเดียพร้อมโปรไฟล์ผู้ใช้และฟีด
  • ระบบ CRM พร้อมการจัดการผู้ติดต่อและการวิเคราะห์

ใช้ปุ่ม ปรับปรุงด้วย AI เพื่อขยายคำอธิบายของคุณโดยอัตโนมัติพร้อมรายละเอียดเพิ่มเติม คุณยังสามารถคลิกกลางที่ไอคอนไมโครโฟนเพื่อบอกคำอธิบายด้วยการป้อนด้วยเสียง

แท็บแถบด้านข้าง

แถบด้านข้างซ้ายให้บริบทเพิ่มเติมสำหรับ AI:

รูปภาพ

อัปโหลดรูปภาพอ้างอิง, mockup หรือภาพหน้าจอเพื่อแสดงให้ AI เห็นว่าคุณต้องการให้แอปมีลักษณะอย่างไร ลากและวาง, วางด้วย Ctrl+V หรือคลิกเพื่อเพิ่ม ต้องเลือกโมเดลที่รองรับ vision

คอมโพเนนต์

แนบคอมโพเนนต์ที่นำกลับมาใช้ได้จาก Block Library AI จะรวมสิ่งเหล่านี้เข้ากับโปรเจกต์ที่สร้าง

ไฟล์

รวมไฟล์อ้างอิงที่ AI ควรพิจารณาระหว่างการสร้าง (เช่น โค้ดที่มีอยู่, สเปคการออกแบบ หรือสคีมาข้อมูล)

สร้าง

คลิก สร้างโปรเจกต์ ที่มุมขวาบนเพื่อเริ่มการสร้างด้วย AI AI จะวิเคราะห์คำอธิบายและเอกสารอ้างอิง วางแผนสถาปัตยกรรม สร้างโครงสร้างไฟล์ และเขียนซอร์สโค้ดและไฟล์การกำหนดค่าทั้งหมด ความคืบหน้าจะถูกติดตามใน ตัวจัดการงานทั่วไป แบบเรียลไทม์

โลโก้ เครื่องหมายการค้า และชื่อแบรนด์ของบุคคลที่สามทั้งหมดที่แสดงใน Kaiju Hub AI เป็นทรัพย์สินของเจ้าของที่เกี่ยวข้อง การใช้งานมีไว้เพื่อวัตถุประสงค์ในการระบุตัวตนเท่านั้น และไม่ได้หมายความถึงการรับรอง การสนับสนุน หรือความเกี่ยวข้อง