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)

プロジェクトセットアップ

Click the + 新規プロジェクト ボタンをプロジェクトダッシュボードからクリックして作成ウィザードを開きます。最初の画面でテックスタックを選択する前にプロジェクトの基本を設定します。

プロジェクト名

プロジェクト名を入力します。名前はリアルタイムで検証されます — 有効なフォルダ名である必要があり(<>:"/\\|?*などの特殊文字は使用不可)、選択した場所の既存フォルダと競合してはなりません。

プロジェクトの場所

プロジェクトフォルダが作成されるデフォルトディレクトリ。参照をクリックして別のディレクトリを選択できます。プロジェクトはプロジェクト名を使用してサブフォルダとして作成されます。

GitHubにリンク

オプションでGitHubアカウントを選択し、ローカルプロジェクトと一緒にリモートリポジトリを自動作成します。スキップするには「None(デフォルトでGitHubを使用しない)」を選択してください。

プラットフォームを選択

4つのプラットフォームタイルの1つを選択して、構築するプロジェクトのタイプを決定します。各プラットフォームは次の画面で異なるフレームワークとテックスタックのオプションを表示します。

ブランク

CLIツール、スクリプト、ライブラリ

デスクトップ

ネイティブデスクトップアプリ

Web

ブラウザベースアプリ

モバイル

デバイスアプリケーション

ビルドタイプ

プロジェクトの初期化方法を選択します:

新規インストール

標準フレームワークツールを使用して新しいプロジェクトをスキャフォールドします。Kaiju Hub AIは適切なCLIコマンド(例:npm create vite@latest、cargo init、npx create-tauri-app)を実行し、すべての依存関係をインストールします。

AI生成

構築したいものを説明し、AIにプロジェクト全体を生成させます。テキストの説明とオプションの参照画像を提供すると、AIがすべてのソースコード、設定ファイル、プロジェクト構造を記述します。

プロジェクトの設定を構成した後、 テックスタックに進む をクリックして続行します。

ブランクプロジェクト

ブランクプロジェクトは、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インタープリターが決まります。

デスクトッププロジェクト

デスクトッププロジェクトはネイティブデスクトップアプリケーションを作成します。デスクトップフレームワーク、UI用のフロントエンドフレームワーク、オプションでデータベースを選択します。すべてのフロントエンドフレームワークは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

デスクトップフレームワーク

デスクトップウィンドウシェルとシステムレベルのAPIを提供するネイティブフレームワーク。

Tauri + Rust
Electron
Flutter + Dart

フロントエンドフレームワーク

デスクトップウィンドウ内で実行されるUIフレームワーク。すべてのオプションはTypeScriptで事前構成されています。

SolidJS
React
Vue
Svelte
Angular

データベース

ローカルまたはクラウドデータストレージ用のオプションのデータベース統合。

Supabase
SQLite
Realm
PostgreSQL
Convex

Webプロジェクト

Webプロジェクトはブラウザベースのアプリケーションを作成します。まず フロントエンドのみ または フルスタック を選択して利用可能なフレームワークオプションを決定します。すべてのフレームワークはデフォルトでTypeScriptが有効です。

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

フロントエンドのみ

シングルページアプリと静的サイト用のスタンドアロンUIフレームワーク。独自の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

フルスタック

サーバーサイドレンダリングとAPIルートを内蔵した完全なWebフレームワーク。

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

スタイリング

Tailwind CSS

データベース

Supabase
Firebase
Prisma
Convex

モバイルプロジェクト

モバイルプロジェクトはiOSとAndroid用のデバイスアプリケーションを作成します。モバイルフレームワーク、SDKバージョン、オプションでデータベースを選択します。

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

モバイルフレームワーク

モバイルアプリケーションのフレームワークを選択します。複数のSDKターゲットをサポートするフレームワークではSDKバージョンセレクターが表示されます。

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

SDKバージョン

Expoなどのフレームワークでは、SDKバージョン(例:52、53、54、55)を選択します。これにより基本的な依存関係とAPIの互換性が決まります。

データベース

モバイルアプリ用のオプションのクラウドまたはローカルデータベース。

Supabase
Firebase Firestore
SQLite
Realm
WatermelonDB

新規インストール

When you choose 新規インストール をビルドタイプとして選択すると、Kaiju Hub AIは標準フレームワークツールを使用してプロジェクトをスキャフォールドします。テックスタックを選択した後、 プロジェクトを作成 をクリックすると、Kaiju Hub AIが残りを処理します。

処理内容

1. パッケージマネージャーの検出

Kaiju Hub AIはシステムにインストールされているパッケージマネージャー(npm、yarn、またはpnpm)を自動的に検出します。

2. スキャフォールドコマンドの実行

選択したスタックに適したCLIツールを実行します。例:React用のnpm create vite@latest、Rust用のcargo init、Tauri用のnpx create-tauri-app。

3. 依存関係のインストール

パッケージマネージャーのインストールコマンドを実行して、必要なすべての依存関係をダウンロードしてセットアップします。

4. Gitの初期化

初期コミットを含むローカルGitリポジトリをセットアップします。

5. GitHubリポジトリの作成

GitHubアカウントをリンクした場合、リモートリポジトリを自動的に作成し、初期コミットをプッシュします。

作成が完了すると、プロジェクトがプロジェクトダッシュボードに表示され、開いてコーディングを開始する準備が整います。

AI生成

When you choose AI生成 をビルドタイプとして選択すると、構築したいものを説明し、AIが初期コードベース全体を記述します。テックスタックを選択した後、 プロジェクトを作成 をクリックして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パターン、必要な統合を含めてください。

良い例:

  • 商品リストとショッピングカートを備えたECサイト
  • カンバンボードを備えたタスク管理ダッシュボード
  • ユーザープロフィールとフィードを備えたSNSプラットフォーム
  • 連絡先管理と分析を備えたCRMシステム

Use the AIで強化 ボタンを使用して説明を自動的にさらに詳細に拡張します。マイクアイコンを中クリックして音声入力で説明を口述することもできます。

サイドバータブ

左サイドバーはAIに追加コンテキストを提供します:

画像

参照画像、モックアップ、スクリーンショットをアップロードして、AIにアプリの見た目を示します。ドラッグ&ドロップ、Ctrl+Vで貼り付け、またはクリックして追加。ビジョン対応モデルの選択が必要です。

コンポーネント

ブロックライブラリから再利用可能なコンポーネントを添付します。AIはこれらを生成されるプロジェクトに組み込みます。

ファイル

AIが生成時に考慮すべき参照ファイルを含めます(例:既存のコード、デザイン仕様、データスキーマ)。

生成

Click プロジェクトを生成 を右上でクリックしてAI生成を開始します。AIが説明と参照資料を分析し、アーキテクチャを計画し、ファイル構造を生成し、すべてのソースコードと設定ファイルを記述します。進捗は グローバルタスクマネージャー でリアルタイムに追跡されます。

Kaiju Hub AIに表示されるサードパーティのロゴ、商標、ブランド名はそれぞれの所有者に帰属します。識別目的のみに使用され、推奨、後援、提携を意味するものではありません。