Le constructeur

Interface

Assemblez un flux : déclencheur, agent, outils, validation, action.

Année: 2026
Outils: React, Motion, MCP
Exécution: Dans votre navigateur, sans appel à un modèle

Modèles de fluxRemplacez les étapes, l'entrée reste la vôtre.

Message reçu1 message · 336 car.

Demande de devis83 % de confiance5 champs[email protected]validation : Montant ≥ 5 000 € TTC

Saisissez un message, réordonnez les étapes, puis exécutez le flux.

Étapes du flux5 étapes

01Déclencheur
Chaque matin à 7 h
Boîte contact@
02Agent
Agent de tri
Claude Sonnet 5.5 · devis, SAV, factures, prospection
03Outils MCP
Messagerie et CRM
lire_messages, etiqueter, creer_fiche, creer_brouillon
04Validation humaine
Relecture des brouillons
Par Julie, depuis sa boîte
05Action
Envoyer les réponses
Depuis contact@

Glissez une étape par sa poignée ⠿, ou utilisez les flèches. Le résultat est recalculé à chaque modification de l'entrée.

Garde-fou en place. Un humain relit avant l'envoi de 1 message.

Palette3 disponibles

Validation humaine
Double validation
Outils MCP
Journal d'audit
Action
Résumé à l'équipe

Ajoutez, retirez ou déplacez une étape : le résultat du flux et le gain de garde-fou se recalculent.

En clair : l'ordre des étapes décide de la sécurité. Une action qui envoie des messages doit venir après une validation humaine ; sinon l'alerte rouge vous prévient que le flux partirait sans relecture. Les résultats sous chaque étape sont recalculés à partir du texte saisi.

État interne5 étapes · 1 messages

Ordre et types

declencheur → agent → outils → validation → action

Garde-fou

gardé : envoi à l'étape 5, validation présente avant

Entrée calculée

Demande de devis · 83 % · 5 champs · validation requise

{
  "messages": 1,
  "chars": 336,
  "words": 51,
  "category": "Demande de devis",
  "confidence": 83,
  "fields": 5,
  "contact": "[email protected]",
  "montant": "10 200 €",
  "human": true,
  "rules": [
    "Montant ≥ 5 000 € TTC"
  ],
  "sendIndex": 4,
  "unguarded": false,
  "noTrigger": false,
  "etapes": [
    {
      "ordre": 1,
      "kind": "declencheur",
      "titre": "Chaque matin à 7 h",
      "sends": null
    },
    {
      "ordre": 2,
      "kind": "agent",
      "titre": "Agent de tri",
      "sends": null
    },
    {
      "ordre": 3,
      "kind": "outils",
      "titre": "Messagerie et CRM",
      "sends": null
    },
    {
      "ordre": 4,
      "kind": "validation",
      "titre": "Relecture des brouillons",
      "sends": null
    },
    {
      "ordre": 5,
      "kind": "action",
      "titre": "Envoyer les réponses",
      "sends": 31
    }
  ]
}

Chargement de la démonstration…

En bref

Assemblez un flux comme une phrase : ce qui le déclenche, ce que fait l'agent, avec quels outils, et où un humain valide. Réordonnez les étapes, ajoutez-en ou retirez-en : les résultats et l'alerte de garde-fou se recalculent. Vous voyez ainsi où une action extérieure part sans relecture.

Ce qu'on y voit

Assemblez un flux : déclencheur, agent, outils, validation, action.

L'idée

Un flux d'automatisation doit se lire comme une phrase : quand ceci arrive, l'agent fait cela, avec ces outils, sous ce contrôle.

La fabrication

Nœuds réordonnables au clavier comme à la souris, exécution animée nœud par nœud, avertissement quand la validation humaine disparaît.

Sous le capot

4 points d'implémentation

Pile

TypeScript strict
React
motion (Reorder)
Pipeline pur partagé

Fichiers

components/demos/Constructeur.tsx
content/demos/constructeur.ts
lib/sim/pipeline.ts
components/demos/Constructeur.module.css

Implémentation

Les étapes sont une liste typée (déclencheur, agent, outils, validation, action) ; le glisser-déposer utilise motion Reorder, doublé de boutons Monter/Descendre pour le clavier.
À l'exécution, chaque étape reçoit un résultat calculé à partir du texte saisi : les messages sont séparés par une ligne ---, puis classés et extraits par les fonctions pures du pipeline.
Le garde-fou est une propriété de l'ordre : une action qui envoie à l'extérieur est « non gardée » si aucune étape de validation ne la précède. L'alerte cite l'étape concernée et le nombre de messages.
La date de référence est fixée au 24 octobre 2026 pour que le serveur et le navigateur calculent les mêmes échéances ; un flux sans déclencheur en tête est signalé comme non automatique.

Travail suivantL'atelier à plugins →Composez un paquet pour Claude Code, OpenCode, Codex, pi ou oh-my-pi : les fichiers s'écrivent sous vos yeux.