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
• Status Indicator (green dot): System is active and available
• Close (X) Button: Closes the panel

3.2 Chat Tabs

• Chat 1: Active chat
• “+” Button: Starts a new chat

3.3 Quick Action Cards

Provides users 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. Initiates the AI action.

3.4 Message Input Field

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

This field is used to receive commands from the user.

4. Bottom Toolbar (Input Actions)

4.1 Select Element (Target Selection)

• Icon: target symbol
• 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 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 Voice Input (Voice Input)

• Icon: microphone
• Purpose: Give commands without typing.

Usage:

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

4.4 Mode Selector (Ask / Agent / Plan)

Selected via the dropdown menu:

• Ask
  
  • Simple question-and-answer mode
  • Does not trigger actions
• Agent
  
  • Performs active operations
  • Can make changes to the UI/system
• Plan
  
  • Generates a plan before taking action
  • Provides step-by-step suggestions

Usage:

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

4.5 Send Button (Send)

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

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

5.1 Agent Mode – Performing Actions

Purpose: To make direct changes to the system (UI, DB, page creation, etc.)

Steps

1. Open the mode selector from the bottom toolbar.
2. Select Agent.
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 action.
• A dashboard is created.
• Chart elements are added.
• The necessary configurations are made.

5.2 Plan Mode – Pre-Action Planning

Purpose: To see how the AI will proceed before performing any actions.

Steps

1. Select Plan from the mode selector
2. Enter the command: Create a dashboard with user analytics
3. Submit.

Expected System Behavior

• The AI does not perform any actions immediately
• It generates a step-by-step plan.
• Sample output:
  
  • Create a data model.
  • Add chart components.
  • Adjust the layout.

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

Expected System Behavior

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