# Le builder visuel

> L'éditeur drag-and-drop des Actions CiteMe — palette de nodes, connexions, configuration et test d'un workflow.

Interface

Le **builder** est l'éditeur où vous construisez vos workflows. C'est un canvas visuel : vous déposez des nodes, vous les reliez par des flèches, et vous configurez chacun dans un panneau latéral. Aucune notion technique requise.

On y accède depuis l'onglet **Actions** d'un projet, puis **Nouveau workflow** (ou en ouvrant un workflow existant pour l'éditer).

---

## L'anatomie de l'écran

| Zone | Rôle |
|------|------|
| **La palette** | À gauche : tous les nodes disponibles, rangés par famille (Triggers, Agents IA, Actions CiteMe, Logique, Notifications, et les actions CMS). |
| **Le canvas** | Au centre : l'espace où vous déposez et reliez vos nodes. |
| **Le panneau de propriétés** | À droite : la configuration du node sélectionné, avec une explication de ce qu'il fait en haut. |

---

## Construire un workflow

### 1. Poser le déclencheur

Tout workflow commence par un **déclencheur**. Faites glisser un node de la famille *Triggers* sur le canvas — par exemple « Démarrage manuel » ou « Planifié (récurrent) ». C'est le point de départ unique de votre automatisation.

### 2. Ajouter des actions

Depuis la palette, déposez les nodes suivants : un agent IA pour rédiger, un node CMS pour publier, un node de notification pour prévenir. Chaque node déposé apparaît sur le canvas sous forme de carte colorée (la couleur indique sa famille).

### 3. Relier les nodes

Tirez une flèche de la sortie d'un node vers l'entrée du suivant. Ces flèches définissent l'ordre d'exécution. Un node ne s'exécute que lorsque le node qui le précède a terminé.

### 4. Configurer chaque node

Cliquez sur un node pour ouvrir son panneau de propriétés. Vous y trouvez :

- une **description** en clair de ce que fait le node ;
- ses **champs de configuration** (sujet de l'article, page à corriger, destinataire de l'email...) ;
- la possibilité d'insérer des **[variables](./concepts#variables)** pour réutiliser la sortie d'un node précédent.

### 5. Tester puis activer

Une fois le workflow assemblé, lancez une exécution de test (déclencheur manuel) pour vérifier le comportement, puis passez le workflow en **Actif**. Suivez le résultat dans **[Exécutions & monitoring](./runs)**.

---

## Lire les couleurs des nodes

Chaque famille a sa teinte, ce qui permet de lire un workflow d'un coup d'œil :

| Famille | Repère visuel |
|---------|---------------|
| Déclencheurs | Lime |
| Agents IA | Violet |
| Actions CiteMe | Bleu |
| Webflow / WordPress / Shopify | Couleur de la plateforme |
| Notifications | Ambre |
| Logique | Gris |

---

## Bonnes pratiques

:::tip Commencez petit
Un déclencheur, un agent, une publication, une notification : quatre nodes suffisent pour un premier workflow utile. Vous enrichirez ensuite.
:::

:::warning Validez avant d'automatiser la publication
Tant que vous n'avez pas confiance dans la sortie d'un workflow, intercalez un node **[Validation humaine](./nodes/approvals)** avant toute publication CMS. Vous relisez, vous approuvez, et le workflow continue.
:::

Prêts à construire ? Suivez le **[tutoriel pas à pas](./first-workflow)**.