1. Overview

This screen is the chat panel used to interact with Kuika AI. Through this panel, users can:

• Chat with the AI,
• Initiate quick actions,
• Upload files or images,
• Use voice input,
• Switch between Agent and Plan modes.

2. What Is It For?

This panel is used to issue AI-powered commands during application development or management processes. Users can:

• Type commands directly,
• Select predefined actions,
• Initiate contextual operations via the UI.

3. Main Components

3.1 Header Area

• Kuika AI Header: Displays the active AI session.
• Active Mode Label (Designer / Builder / Ask): Displays the currently selected mode. For example, in the screenshot, the “BUILDER” label indicates the active mode.
• ALPHA Label: Indicates that the Builder mode is still in the alpha (experimental) phase.
• PLAN Label: A shortcut label that also displays the user’s current subscription plan in the header; clicking it redirects to plan details.
• Status Indicator (green dot): The system is active and available.
• Settings (gear) icon: Opens panel/account settings.
• History icon: Provides access to previous revert points.
• Search icon: Searches within chat history.
• Close (X) Button: Closes the panel.

3.2 Chat Tabs

• Chat 1: Represents the active chat.
• “+” Button: Starts a new chat.

3.3 Welcome (Empty State) Screen

A welcome screen appears in the center when a new chat is opened or no messages have been sent yet:

• Kuika AI icon and title
• Caption: “Ask me anything about your application.”
• This screen guides the user to use quick action cards or type commands directly.

3.4 Quick Action Cards

Provides the user with ready-to-use scenarios:

• Dashboard with charts
• Login page with auth
• Style my page
• Add a DB table

Usage:

1. Click on one of the cards.
2. The system automatically generates the relevant prompt.
3. The AI initiates the action based on the selected mode (Designer / Builder / Ask).

3.5 Category Tags (Build & Design / Data & Logic / Platform)

The panel contains grouped tags that indicate the scope of the operation:

• Build & Design: Screen Design, Styling, Screens, Validations
• Data & Logic: Actions, Data Sources, Database, APIs, Custom Code
• Platform: Translation, Auth & Roles, Project, History

These tags visually represent the interface, backend/data, and platform-level (multilingual, authentication, project management, history) operations covered by the Builder mode. Each tag serves as a shortcut or context for commands related to that topic.

• Translation: Represents operations related to in-app multilingual support and translation management.
• Auth & Roles: Represents operations related to user authentication and role/permission management.
• Project: Represents operations related to project-level settings and configurations.
• History: Provides quick access to project or chat history (independent of the Revert panel; may be general project history).

3.6 Message Input Field

Placeholder: Ask Kuika AI... (/ for commands, @ for mentions)

This field is used to receive commands from the user. Typing “/” opens the command list, and typing “@” opens element or page mentions.

4. Bottom Toolbar (Input Actions)

4.1 Select Element (Target Selection)

• Icon: target icon
• Purpose: To provide context to the AI by selecting an element on the UI
• Usage:
  
  1. Click the button.
  2. Select an element on the screen.
  3. The AI performs an action based on the selected element.

4.2 Attachment (File Upload)

• Icon: paperclip
• When opened:
  
  • Image: Upload an image
  • File: Upload a file

Usage:

1. Click the paperclip icon.
2. Select the type (Image / File)
3. Upload the file.
4. The AI analyzes the uploaded content.

4.3 Mode Selector (Designer / Builder / Ask)

Select one of three modes from the dropdown menu:

• Designer (blue dot)
  
  • UI design only — performs only interface creation, styling, and editing tasks.
  • Does not touch the backend or data layer.
• Builder (orange dot, labeled ALPHA)
  
  • Full capabilities — covers all capabilities, including UI design, backend, data binding, actions, and logic.
  • In addition to page design, it can also handle tasks such as data sources, databases, API connections, and custom code.
  • Since it is currently in the alpha (experimental) phase, results should be tested before use.
• Ask (green dot, labeled FREE)
  
  • Read-only mode; it only answers questions.
  • It does not make any changes to the system and is free.

Usage:

1. Click the mode selector (e.g., “Builder”).
2. Select Designer, Builder, or Ask mode from the dropdown menu.
3. Enter your command.

4.4 Plan Button

• Icon: clipboard icon, displayed with the “Plan” label.
• Purpose: Allows the user to view and manage their current subscription/usage plan.
• This button appears both on the bottom toolbar and in the header (labeled “PLAN”); both lead to the same plan details screen.

Usage:

1. Click the “Plan” button.
2. Current plan information and any available upgrade options are displayed.

4.5 Credits Indicator

• For example, the “243 credits” label displays the current credit balance.
• Credit consumption may vary depending on the selected mode (Builder mode may consume more credits due to its broader scope; Ask mode is free).

4.6 Voice Input

• Icon: microphone
• Purpose: To issue commands without typing.

Usage:

1. Click the microphone icon.
2. Speak.
3. The system converts speech to text.

4.7 Send Button

• It is the arrow icon in the lower-right corner.
• Sends the command to the AI.

4.8 Revert / History Panel

Clicking the history icon in the header opens the Revert — History panel.

• Purpose: An automatic checkpoint is created after every message sent to the AI. You can revert to any previous point via this panel.
• “No revert points yet” message: Appears when no AI messages have been sent yet.
• Checkpoints are listed from newest to oldest, with the most recent one at the top.

5. Step-by-Step Usage (Mode-Based Scenarios)

5.1 Designer Mode – Implementing UI Design

Purpose: To create, style, and arrange UI elements.

Steps

1. Open the mode selector from the bottom toolbar.
2. Select Designer.
3. Type the following command into the input field:

Create a dashboard with sales and revenue charts

1. Click the Send button.

Expected System Behavior

• The AI directly performs the UI action.
• The dashboard page is created.
• Chart elements are added, and the layout is adjusted.

5.2 Builder Mode – End-to-End Application Development

Purpose: To create the backend, data binding, and business logic alongside the user interface.

Steps:

1. Select Builder from the mode selector.
2. Type the following command into the input field: Create a login page with authentication and connect it to the users database
3. Click the “Send” button.

Expected System Behavior:

• The AI creates the UI elements.
• It establishes the necessary data source/database connection.
• It implements the action and logic layers (e.g., validation, login control).

5.3 Ask Mode – Information Retrieval

Purpose: To retrieve information only; do not make changes to the system.

Steps

1. Select Ask from the Mode selector.
2. Command:

How should I design a dashboard for analytics?

1. Submit.

Expected System Behavior

• The AI provides an explanation.
• It offers best practice recommendations.
• No action is taken.

5.4 Quick Access via Platform Tags

Purpose: To quickly access translation, authorization, project settings, or history.

Steps:

1. Select the relevant tag under the “Platform” category (e.g., Auth & Roles).
2. The system creates a prompt/context specific to the selected topic or opens the relevant panel.
3. If necessary, refine your command and submit it.

Expected System Behavior:

• Depending on the selected category, the AI opens the relevant module (e.g., the role/permission management screen) or provides topic-specific recommendations.