Kaiju Hub AI

Creator View

Layout Overview

The Creator View is a three-panel editing environment you open by double-clicking any group in the Component Area. It provides a block list on the left, a code editor in the center, and a live preview on the right, with an AI Prompt Box running along the bottom.

Creator View three-panel layout showing block list on the left, Text tab code editor in the center, and Start Creating live preview on the right with AI Prompt Box at the bottom

Block List Panel

The left panel displays all blocks in the current group. Each block shows a card preview with the block name and a numbered file list underneath. Use the toolbar at the top to navigate back, toggle between list and split views, or click the + button to add a new block.

Code Editor

The center panel is a tabbed code editor where you write and edit block content. Tabs are organized by file type:

Text

Write documentation, markdown, or plain text content for the block.

HTML

Edit the HTML structure of your component.

CSS

Add styles for your component.

JavaScript

Add interactivity and logic to your component.

Creator View HTML tab showing editable HTML code with div and h1 elements in the center code editor panel

Live Preview

The right panel renders a live preview of your component. As you add HTML, CSS, and JavaScript in the editor, the preview updates to show the compiled result. You can also drag & drop files or paste content (Ctrl+V) directly into the preview area to add them to the block. Use the eye icon to toggle the preview and the BG toggle to change the preview background.

Creator View with markdown source in the center editor and rendered Markdown Preview on the right showing Project Name, Table of Contents, and Installation sections

AI Prompt Box

The bottom bar is the AI Prompt Box. Use it to describe changes and let AI generate or modify your block content. It includes a model selector, a text input field, voice and emoji inputs, and a Generate button. Two mode toggles — A and V — switch between Direct AI Mode and Variation Mode.

AI Prompt Box in Direct AI Mode showing text input, microphone and emoji icons, orange A toggle active, V toggle, and Generate button

AI Gen Categories

The AI model selector reveals generation categories that determine what kind of content AI produces:

Text Gen

Generate or edit text-based content such as code, documentation, and markup.

Image Gen

Create images from text prompts or edit existing images with AI (text-to-image and image-to-image).

Video Gen

Generate videos from text descriptions or animate still images into video (text-to-video and image-to-video).

AI Gen Categories dropdown showing Text Gen, Image Gen, and Video Gen options with Select AI model button

Direct AI Mode (A)

When the A toggle is active, AI makes direct modifications to your component in place. The prompt placeholder reads “Describe changes to apply to your component” and a badge indicates which file will be modified (e.g., “Will modify: text”). This mode is best for quick, targeted edits to the currently selected file.

Direct AI Mode panel showing lightning bolt icon, Direct AI Mode title, Make direct modifications to your component with AI description, and Will modify text badge

Variation Mode (V)

When the V toggle is active, AI generates multiple variations of your component instead of editing in place. The prompt placeholder changes to “Describe the variations you want to generate” and a counter appears with − / + controls so you can choose how many variations to create. Generated variations appear in a dedicated panel where you can review them and add your preferred versions back to the group.

Variations panel showing No variations yet message with palette icon, prompt input for describing variations, minus and plus counter controls, purple V toggle active, and Generate button

All third-party logos, trademarks, and brand names displayed in Kaiju Hub AI are the property of their respective owners. Their use is solely for identification purposes and does not imply endorsement, sponsorship, or affiliation.