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 Does It Do?

This panel is used to issue AI-powered commands during application development or management processes. The user 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.
• Designer Label: A visual indicator of the active mode.
• Status Indicator (green dot): The system is active and available.
• History icon: Provides access to previous revert points.
• Search icon: Searches within the 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 Quick Action Cards

Provides the user with ready-to-use scenarios:

• Build a profile page
• Create a settings page
• Design a dashboard with charts
• Build a landing page
• Create a form layout
• Design a card gallery
• Build a navigation menu
• Style my current page

Usage:

1. Click on one of the cards.
2. The system automatically generates the relevant prompt.
3. The AI initiates the action.

3.4 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 “@” opens element or page mentions.

4. Bottom Toolbar (Input Actions)

4.1 Select Element (Target Selection)

• Icon: target icon
• Purpose: 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 the 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 / Ask)

Selected via the dropdown menu:

• Designer (default — indicated by a purple dot).
  
  • UI design-focused mode.
  • Performs element creation, styling, and editing operations.
  • Makes changes directly on the screen.
• Ask (indicated by a green dot)
  
  • Read-only mode; only answers questions.
  • Does not make any changes to the system.

Usage:

1. Click the “Designer” dropdown menu.
2. Select a mode.
3. Enter a command.

4.4 Credits Indicator

• The 250 credits label displays the current credit balance.

4.5 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.6 Send Button

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

4.7 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 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
4. Click the Send button.

Expected System Behavior

• The AI takes direct UI action.
• A dashboard page is created.
• Chart elements are added and the layout is adjusted.

5.2 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?
3. Submit.

Expected System Behavior

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