# How It Works

flompt follows a three-step loop: **Decompose → Edit → Assemble**.

***

## Step 1: Decompose

Paste a prompt. Click **Decompose into blocks**.

flompt sends to backend. Claude analyzes. Splits into blocks. Async. Get job ID immediately. Real-time polling.

Each block:

* Gets a **type** from 16 categories
* Gets a **2-5 word summary** for ID
* Auto-positioned. Auto-connected. Top-to-bottom.
* **Language** block added automatically.

```
User input: "You are a Python expert. Write a function that sorts a list of
dictionaries by a given key. Return only code, no explanations."

→ Role:        "You are a Python expert"
→ Objective:   "Write a function that sorts a list of dictionaries by a given key"
→ Constraints: "Return only code, no explanations"
→ Language:    English
```

> **No API key?** Falls back to keyword decomposer. Fully functional.

***

## Step 2: Edit Visually

flompt offers two editing views, switchable via the **List / Canvas toggle** in the top-right of the toolbar.

### Canvas View

The default view — an interactive React Flow canvas:

| Action                  | How                                                            |
| ----------------------- | -------------------------------------------------------------- |
| **Reposition** a block  | Drag it anywhere on the canvas                                 |
| **Connect** two blocks  | Click the bottom handle of one, then the top handle of another |
| **Edit content**        | Click on any block — a textarea opens and auto-resizes         |
| **Add a block**         | Click a block type pill in the toolbar                         |
| **Delete a block**      | Click the × button or press `Delete`                           |
| **Hide / Show** a block | Click the Eye icon on the block header                         |
| **Undo / Redo**         | `Ctrl+Z` / `Ctrl+Y` (last 30 states)                           |

The canvas uses a **20px snap-to-grid** and supports a minimap for large flows. Your session is **auto-saved** to localStorage — no data is lost on refresh.

### List View

A linear, card-based view of all blocks — useful for editing content and reordering without navigating a canvas. See [List View](https://github.com/Nyrok/flompt/blob/master/docs/list-view.md) for full documentation.

> **Projects tip:** Each project has its own independent canvas state. Switch projects from the header pill to work on multiple prompt flows without losing context. See [Projects](/docs/features/projects.md).

***

## Step 3: Assemble

Click **Assemble prompt** in the output panel. Assembly is **100% local** — no API call, instant result.

### Block ordering algorithm

1. If edges (connections) exist → topological sort (Kahn's algorithm)
2. Otherwise → sort by `position.y` (top to bottom on canvas)
3. Within the same depth level → secondary sort by `TYPE_PRIORITY` (Anthropic's recommended ordering)

**Final ordering follows Anthropic's official best practices:**

```
documents → role → tools → audience → context → environment → objective → goal → input →
constraints → guardrails → examples → chain_of_thought → output_format → response_style → language
```

### Output format — Claude-optimized XML

Blocks are wrapped in semantic XML tags matched to [Anthropic's prompt engineering guidelines](https://platform.claude.com/docs/en/build-with-claude/prompt-engineering/claude-prompting-best-practices):

```xml
<documents>
  <document index="1">
    <source>Annual report</source>
    <document_content>
      [document text here]
    </document_content>
  </document>
</documents>

<role>Python expert</role>
<objective>Write a function that sorts a list of dictionaries by a given key</objective>
<constraints>Return only code, no explanations</constraints>

<examples>
  <example>
    <user_input>Input: [{"name": "Bob", "age": 30}]</user_input>
    <ideal_response>Output: sorted_list</ideal_response>
  </example>
</examples>

<thinking>
  Think step by step before answering.
</thinking>

<format_instructions>
  Be concise. No preamble. No filler phrases.
</format_instructions>

<language>English</language>
```

Special characters (`&`, `<`, `>`, `"`, `'`) are automatically escaped in block content.

### Export options

After assembling, you can:

* **Copy** to clipboard
* **Download as `.txt`**
* **Export as `.json`** — full session export (nodes, edges, assembled output)
* **Share** via native browser share API (if supported)
* **Send to AI** *(extension only)* — inject directly into the active AI chat
* **Send to Make.com** — fire the prompt to a Make webhook for automation → [Make.com integration](/docs/features/make-integration.md)

***

## Chrome Extension

The Chrome extension brings flompt directly into ChatGPT, Claude, and Gemini as a sidebar — no tab switching, no copy-paste.

→ [Full Chrome extension documentation](/docs/integrations/chrome-extension.md)

***

## Keyboard Shortcuts

These shortcuts apply in the **Canvas view**:

| Shortcut | Action                 |
| -------- | ---------------------- |
| `Ctrl+Z` | Undo                   |
| `Ctrl+Y` | Redo                   |
| `Delete` | Delete selected block  |
| `Ctrl+A` | Select all blocks      |
| `Escape` | Deselect / close panel |

In the **List view**, reordering is done via the ↑/↓ buttons on each card. There are no additional keyboard shortcuts specific to list view.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://flompt.gitbook.io/docs/core/how-it-works.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.