Interface overview

Let's take a tour of the Promake interface so you know where everything is!

Main Layout

The Promake interface is divided into two main areas:

Left Panel: Chat Area

This is where you communicate with the AI. It includes:

Message History - All your conversations with the AI
Input Field - Where you type your requests
Attachment Button - Upload images for reference
Send Button - Submit your message

Right Panel: Preview Area

This is where you see your website come to life:

Live Preview - Real-time view of your website
Address Bar - Shows the current page URL
Navigation Controls - Back, forward, refresh, home
Device Toggle - Switch between desktop and mobile views
Fullscreen - Expand preview to full screen

Click the Promake logo to access:

Home - Return to the main page
Settings - Access your account settings
Support - Get help
Logout - Sign out of your account

Project Name

The name of your current project is displayed at the top. Click it to:

Rename - Change the project name
Delete - Remove the project

Version History

Click the history icon to:

View previous versions of your project
Restore an earlier version if needed

Chat Interface Features

Message Types

Your Messages - Displayed on the right in a different color
AI Responses - Displayed on the left
Status Updates - Show what the AI is currently doing

Input Options

Text Input - Type your requests
Image Attachment - Click the paperclip icon to add images
Voice Input - Use microphone for voice commands (if available)

Quick Actions

Look for these icons near the input field:

Attach - Add reference images
Voice - Voice input
Send - Submit your message

Preview Panel Features

Browser Controls

Just like a real browser:

Back - Go to previous page
Forward - Go to next page
Refresh - Reload the preview
Home - Go to homepage

View Modes

Toggle between different views:

Preview - See your live website
Code - View and edit the source code

Device Simulation

Test how your site looks on different devices:

Desktop - Full-width view
Tablet - Medium-width view
Mobile - Phone-width view

Fullscreen Mode

Click the expand icon to view your website in fullscreen mode. Press Escape or click the minimize button to exit.

Edit Tool

The Edit Tool is a powerful visual editing tool. When enabled:

Click any element to select it
Edit text directly
Change images
Modify styles (colors, sizes, fonts)

Look for the Edit Tool button in the preview toolbar.

Publishing Controls

When your website is ready, you'll find publishing options:

Publish button - Opens publishing options
Live indicator - Shows if your site is published
Domain settings - Manage your website URL

On mobile devices, the interface adapts:

Tab Switcher - Toggle between Chat and Preview
Slide Menu - Access navigation via hamburger menu
Swipe Gestures - Navigate between views

Keyboard Shortcuts

Speed up your workflow with these shortcuts:

Enter - Send message
Ctrl/Cmd + Enter - Send message (in multiline mode)
Escape - Exit fullscreen or close modals

Settings Access

Click your profile picture or the settings icon to access:

Profile - Update your name and avatar
Appearance - Change theme (light/dark/system)
Language - Change interface language
Billing - Manage subscription
Domain - View your domains