Landing Hub
Overview
After completing the setup wizard, you'll land on the Kaiju Hub AI Landing Hub. This is your central dashboard where you can access all of Kaiju Hub AI's core features at a glance.
Project Hub
The Project Hub is your central workspace for managing and organizing all of your development projects. From here you can create new projects from scratch, import existing projects from your local machine, and clone repositories directly from GitHub.
Create Projects
Start a brand-new project with your preferred tech stack and framework configuration.
Import Projects
Bring in existing projects from your local file system to manage them within Kaiju Hub AI.
Clone from GitHub
Clone any GitHub repository directly into Kaiju Hub AI — no need to leave the app or use the command line.
Wireframes
The Wireframes section lets you create and design wireframes for your applications and websites. You can design them manually using the canvas editor, or utilize AI to generate wireframes for you automatically. Once your wireframe is ready, you can send it directly to code generation — going from design to working code in one seamless workflow.
Manual Design
Use the built-in canvas editor to draw and arrange UI components by hand.
AI-Powered Generation
Describe what you want and let AI create a wireframe layout for you instantly.
Wireframe to Code
Send your completed wireframe directly to code generation — no manual translation needed.
What's New
The What's New section is where you can see the latest updates, features, and announcements for Kaiju Hub AI. Whenever a new update has been pushed, you'll receive an alert so you never miss important changes. Check here regularly to stay up to date with new features, bug fixes, and improvements.
Block Library
The Block Library is Kaiju Hub AI's context block system. It allows you to add, store, and manage reusable context blocks such as API documentation, code snippets, and more. You can create and store blocks for later use, then send them directly to AI when you need them as context for code generation.
Supported Content Types
React, Solid.js, Vue, Svelte, Angular, HTML, CSS, GLSL shaders, Markdown, plain text, images, and videos.
Creating Groups
The Block Library organizes blocks into groups. Groups allow you to categorize and manage related blocks together.
Create a New Group
Click the "Create a New Group" button to open the group creation modal. Select a category, type in the group name, and click "Create Group" to add it.
Add Content to Groups
Once a group is created, you can drag and drop files or paste content directly into the group to populate it with blocks.
Creating Blocks
Click "Create a New Block" to open the block creator view. From there you have three ways to add content:
Manual Input
Manually write or edit block content directly in the creator view.
Paste Content
Paste code, text, or other content directly into the block creator.
AI Creation
Use AI to generate block content. Supports React, GLSL shaders, Svelte, HTML, Vue, Angular, Solid.js, and CSS.
AI-Powered Block Creation
When using AI to create blocks, you can generate a wide variety of content types. Beyond code, you can also create images using MediaGen or locally using CompanyUI, and generate videos as well.
Direct AI Editing
Edit existing block items directly using AI. Provide instructions and AI will modify the content in place.
Create Variations
Enter a prompt and specify how many variations you want. AI will generate multiple alternative versions of the block content based on your prompt.
Using Blocks
Store Context
Save API documentation, code snippets, design references, and other context blocks for reuse across projects.
Create Media
Create and store images, videos, and other media assets directly within the block library.
Send to AI
Attach stored blocks as context when working with AI — give it exactly the information it needs to generate accurate code.
Reverse Engineering
Reverse Engineering is Kaiju Hub AI's bounding-box directed image-to-code and image-to-wireframe tool. Upload any image of a UI, draw or auto-detect bounding boxes around elements, assign behaviors to each box (e.g., opens a modal, navigates to a section), and generate working code or wireframe layouts from the annotated image.
Bounding Box Annotation
Draw or auto-detect bounding boxes around UI elements in any image, then assign interactive behaviors to each box.
Dual Output
Convert annotated images into working component code for your target framework, or export as wireframe layouts for further editing.