Getting Started with Make Mode

Set up Make Mode and create your first AI-generated code project

Prerequisites

Before using Make Mode, you need at least one AI provider configured. Azyrom supports four providers:

See AI Settings for detailed setup instructions for each provider.

Entering Make Mode

1

Click the Make Button

In the left sidebar, click the "Make" button (sparkles icon) to enter Make Mode. The workspace will transform into a two-panel layout.

2

Configure AI Provider

Click the settings icon in the chat panel to open AI Settings. Select your provider (Anthropic, OpenAI, Ollama, or Apple Intelligence) and enter your API key if required. See AI Settings for details.

3

Create a New Project

Click "New Project" in the header. Your project will be created and you'll see the project name displayed. You can also load a previously saved project.

4

Select a Framework

Use the framework dropdown in the header to choose your target: React, Vue, Svelte, Flutter, Vanilla JS, SwiftUI, or Compose.

5

Write Your Prompt

In the chat panel on the left, type a description of what you want to create, or click "Browse Templates" to use one of 60 built-in templates. You can also attach design elements or reference images for context.

6

Choose a Quality Mode

Select Prototype (lightning bolt) for quick iteration with inline styles, or Production (checkmark) for clean, accessible, multi-file code ready for shipping.

7

Generate Code

Press Enter or click Send. The AI generates code in real-time, streaming it into the code panel on the right with syntax highlighting.

Your First Code Generation

Try this simple prompt to get started:

"Create a responsive navigation header with a logo on the left and menu items on the right. Include a hamburger menu for mobile."

The AI will generate a complete component with HTML structure, CSS styling, and any necessary JavaScript.

Tip

Start with simple prompts and iterate. You can always ask the AI to modify, add features, or change styling in follow-up messages.

Attaching Design Context

For better results, you can attach design elements as context:

  1. Before entering Make Mode, select elements on the canvas
  2. Enter Make Mode - selected elements become attached context
  3. The AI can see these elements and generate code that matches your design

Preview Your Code

Click the Preview button to see your code running live:

Exporting Code

Next Steps