Builder.io

Qu’est-ce que Builder.io ?

Builder.io est une plateforme de développement visuel basée sur l’IA, développée par Builder.io Inc. Ses produits phares actuels sont l’IDE visuel Fusion et le CMS visuel Publish.

Fusion permet aux équipes de produits, de conception et de développement de collaborer avec l’IA et des outils de création sur la base de code existante, tandis que Publish permet aux équipes de contenu et de marketing de gérer, de publier et d’optimiser les expériences numériques sans modifier le code métier.

Différence entre Fusion et Publish

L’espace Fusion est utilisé pour les projets de génération de code, l’espace Publish est utilisé pour le contenu, les modèles et les données ; les abonnements, les membres et les quotas sont gérés par espace.

Fonctionnalités principales de Fusion

• Création de projet à partir d’une instruction : décrire l’application ou la fonction souhaitée, l’IA génère une première version dans l’éditeur visuel, et il est possible de procéder à des modifications sur les éléments ou fichiers sélectionnés.
• Connexion au dépôt de code : possible avec GitHub, GitLab et Bitbucket ; l’édition Enterprise permet également d’utiliser Azure DevOps pour le stockage de code en version entreprise.
• Comprendre le code existant : structure du projet d’indexation de la plateforme, composants et règles de conception ; l’IA peut modifier des fichiers réels au sein de l’écosystème technologique existant, plutôt que de ne produire que des exemples isolés.
• Édition de code visualisée : insertion, sélection, ajustement et aperçu d’interfaces sur une toile, modification suivie de la conversion en code par l’IA, idéale pour la collaboration entre conception et ingénierie.
• Conversion Figma en code : importez les designs via un plugin Figma pour générer des interfaces réactives ; vous pouvez choisir une compilation rapide ou utiliser des modèles externes de grande taille pour améliorer la qualité du code.
• Plusieurs contextes : les suggestions peuvent inclure des images, des captures d’écran, des PDF, des documents, des tableaux, des fichiers de code et d’autres matériaux, ainsi que faire référence à des fichiers spécifiques dans le répertoire.
• Règles personnalisées : Les projets peuvent enregistrer les préférences de codage et les exigences d’organisation des fichiers ; la bibliothèque de code peut également utiliser des fichiers de règles pour restreindre la manière dont l’IA est mise en œuvre.
• Sélection du modèle d’IA : on peut opter pour une sélection automatique ou choisir parmi les modèles disponibles auprès de fournisseurs tels qu’Anthropic, OpenAI, Google, etc. La qualité et le coût des modèles influencent les Agent Credits.
• Débogage automatique : génère ou exécute des tests qui permettent à l’agent d’essayer de corriger les erreurs, mais il reste nécessaire de réaliser des tests et une revue manuelle du code.
• Branches et revue : La solution d’équipe propose des commentaires, une révision par les pairs, un historique des actions et des prévisualisations protégées par mot de passe, afin de contrôler les modifications apportées par l’IA dans la branche principale.
• Intégration MCP : un serveur MCP intégré permet de se connecter à des services externes ; Team prend en charge des MCP personnalisés, et Fusion MCP permet également aux clients compatibles de lancer et de suivre les tâches d’agent.
• Environnements locaux et cloud : les projets peuvent être exécutés dans des conteneurs cloud, localement ou dans des conteneurs locaux ; Enterprise permet de définir des images Docker personnalisées ainsi que des exigences d’environnement plus strictes.

Fonction principale de Publish

• Éditeur visuel : L’équipe de contenu peut déplacer des blocs, modifier les styles et les liens de données dans une prévisualisation du site réel, tout en réutilisant les composants personnalisés enregistrés par les développeurs.
• Modèle de contenu : Page pour les pages complètes, Section pour les blocs de page réutilisables, Data pour les données structurées, afin de permettre une gestion séparée du layout et du contenu.
• Composants et systèmes de conception : les développeurs intègrent des composants tels que React et Vue dans l’éditeur, tandis que les membres non techniques ne peuvent les combiner et les configurer qu’à l’intérieur des attributs autorisés.
• Modèles et symboles : Enregistrez les layouts fréquemment utilisés en tant que modèles ou réutilisez des blocs de contenu pour réduire le travail repetitive dans la gestion de multiples pages, de marques et d’événements.
• Publication programmée : Définir une heure de début et une heure de fin pour le contenu, idéale pour les promotions, les événements, les annonces et les pages ayant une fenêtre de publication fixe.
• Positionnement et personnalisation : Il est possible de sélectionner du contenu en fonction du chemin, du dispositif ou d’attributs personnalisés de l’entreprise ; les capacités varient en fonction des contrats et des plans de publication.
• Localisation : prise en charge des champs dans la ligne, du contenu complet et de stratégies multilingues pour le modèle de données, permettant d’obtenir le contenu correspondant selon la locale.
• Test A/B : Créer plusieurs versions de pages ou de blocs gérés par Builder et suivre les conversions, il est nécessaire d’intégrer correctement les tests et le suivi des événements.
• Insights et cartes thermiques : permettent de visualiser les affichages, les clics, les conversions et l’interaction avec les pages, afin d’identifier les problèmes liés au contenu ; cependant, la collecte de données doit respecter les règles de confidentialité et de cookies.
• Livraison prioritaire via API : l’application reste hébergée par le client, et le contenu est diffusé via un CDN mondial, une Content API ou un SDK vers les sites et applications existants.
• E-commerce et données externes : Permet de se connecter à des systèmes commerciaux tels que Shopify ainsi qu’à des données tierces, afin d’afficher des produits, des stocks ou du contenu marketing dans les composants.
• CMS MCP : le client compatible peut se connecter à des espaces Publish ou mixtes, et lire et manipuler du contenu Builder en langage naturel.

Entrée, sortie et mode de fonctionnement

Guide d’utilisation de Fusion

1. Créez un espace Fusion et choisissez de commencer à partir d’une prompt, d’un modèle de départ ou d’un répertoire Git existant.
2. Se connecter à GitHub, GitLab ou Bitbucket et n’autoriser que les dépôts nécessaires ; définir la branche principale, les commandes d’installation, le port de développement et les variables d’environnement.
3. Permettez à la plateforme d’indexer les projets, en ajoutant des règles personnalisées telles que des cadres, des bibliothèques de composants, des tokens de conception, des commandes de test et des interdictions.
4. Soumettez des tâches aux contours clairs, accompagnées de Figma, d’captures d’écran ou de documents pertinents, et citez directement l’emplacement du code à modifier.
5. Vérifiez les layouts desktop et mobile dans l’éditeur visuel, sélectionnez des éléments spécifiques pour continuer à itérer, et n’exigez pas une refonte massive sans limites d’un seul coup.
6. Exécuter les vérifications de type, les tests unitaires, les tests bout en bout et la compilation, ainsi que vérifier manuellement les permissions, les dépendances, les demandes de données et le traitement des erreurs.
7. Utiliser les branches, les commentaires et l’évaluation par les pairs pour identifier les différences, puis publier selon le processus de fusion et de déploiement du code de l’équipe.

Guide d’intégration de Publish

1. Créez un espace Publish et définez les modèles Page, Section ou Data, en déterminant clairement quels éléments sont gérés par le CMS et lesquels restent dans le code.
2. Choisissez le SDK du framework correspondant, utilisez la clé API publique pour obtenir le contenu publié ; les modèles privés et les opérations d’écriture utilisent la clé privée du serveur.
3. Enregistrer les composants propriétaires auprès du Visual Editor, en limitant les attributs modifiables, les valeurs par défaut et les types de saisie, afin d’éviter que le personnel chargé du contenu ne vienne perturber la logique métier.
4. Configurer l’adresse de prévisualisation pour que l’éditeur charge le site réel et affiche en temps réel les modifications du brouillon.
5. Créer des pages ou des entrées de contenu, et vérifier les points d’arrêt, les langues, les liens de données, les champs SEO et les informations d’accessibilité.
6. Définissez selon les besoins les horaires, la localisation, les versions A/B et les événements de conversion, puis laissez les personnes concernées les visualiser et les approuver.
7. Publier du contenu et valider l’API Content, le cache CDN ainsi que le site réel ; configurer des Webhook pour déclencher la génération ou le nettoyage du cache en cas de modification importante du contenu.

Cadre, plateforme et extensions

Forfait de prix Fusion

Chaque forfait self-service comprend 1 utilisateur payant ; l’ajout d’utilisateurs entraîne des frais supplémentaires pour des places additionnelles. Le montant affiché, les taxes, la monnaie et le montant final doivent correspondre à ceux indiqués sur la page de règlement du compte.

La page des quotas gratuits affiche actuellement 15 par jour et 60 par mois ; d’autres chiffres ont été indiqués sur certaines pages ; le quota journalier est réinitialisé à minuit UTC, et le quota mensuel est réinitialisé le premier jour du mois, selon les critères définitifs du panneau de contrôle.

Prix de publication et trafic

Les statistiques des Visual Views de Publish sont calculées à partir des pixels de suivi présents sur les pages ou blocs visuels ; le modèle de données n’est pas compté en fonction des Visual Views, mais peut néanmoins consommer de la bande passante.

Même avec une génération statique, un rendu côté serveur, un cache côté client ou du contenu auto-hébergé, la facturation par contrat de Publish peut s’appliquer ; il est nécessaire de confirmer les critères de trafic et de bande passante auprès du service des ventes lors du choix.

Annulation et remboursement

• Chaque espace est abonné indépendamment ; annuler un espace n’annule pas automatiquement les autres.
• L’abonnement auto-géré peut être annulé dans les paramètres de l’espace ; il reste généralement utilisable jusqu’à la fin de la période de facturation en cours, avant de passer en mode Gratuit.
• Les abonnements installés et achetés via Shopify doivent être gérés sur Shopify ; leur désinstallation annule la renouvellement et supprime également le contenu et les paramètres de Builder du magasin.
• La documentation d’aide permet d’annuler au préalable avant de soumettre une demande de remboursement au support, et exige la fourniture de la facture, du motif ainsi que de la clé API publique.
• Les demandes de remboursement doivent être examinées et ne sont pas approuvées automatiquement ; le contrat prévoit en principe que les frais payés à l’avance ne sont pas remboursables, sauf exceptions spécifiquement définies dans le contrat, telles qu’une résiliation pour cause.
• Après la résiliation du contrat, une période de 30 jours est généralement accordée pour récupérer les données du client par voie électronique, après quoi elles peuvent être supprimées ; la DPA américaine exige en outre la suppression des données personnelles dans un délai de 90 jours suivant la résiliation, à l’exception des cas prévus par la loi.
• Les conditions, le centre d’aide et les restrictions applicables à chaque commande diffèrent ; il convient de vérifier les options de résiliation, de remboursement, d’exportation des données et les limitations en cas de downgrade avant d’acheter un abonnement annuel ou de migrer de l’espace de stockage.

API, SDK et automatisation

GitHub, SDK et les frontières du logiciel open source

• Le dépôt principal officiel est sous licence MIT et contient des SDK multi-frameworks, des exemples, des projets de démarrage ainsi que certains plugins.
• L’open source du SDK permet aux développeurs d’examiner et d’intégrer le code de rendu du contenu, tout en facilitant les contributions pour le soutien du framework.
• Des projets publics tels que Mitosis disposent d’une capacité de compilation inter-framework, mais les licences spécifiques doivent être vérifiées individuellement pour chaque répertoire.
• La plateforme hébergée de Builder.io, son éditeur visuel, son système de comptes, ses services d’entreprise et ses modèles d’IA propriétaires ne sont pas devenus ainsi entièrement open source.
• Utiliser l’SDK public pour des projets commerciaux nécessite généralement de se conformer à la fois à la licence MIT et au contrat de service Builder ; les appels aux services cloud sont en outre soumis aux conditions du forfait et aux termes de l’API.

Confidentialité, sécurité et données d’IA

• L’appendice de sécurité indique que la transmission des données des clients utilise TLS 1.2 ou une version ultérieure, que les données statiques sont chiffrées avec AES-256, et que les clés sont gérées par un service de clés hébergé.
• La plateforme maintient une audit SOC 2 Type 2, des principes de moindre privilège, une authentification multifacteur en production, une révision trimestrielle des accès, un balayage de vulnérabilités et des tests d’infiltration annuels par des tiers.
• Les clients sont informés dans un délai de 72 heures suivant la découverte d’une fuite de données personnelles confirmée, tandis que les objectifs de continuité d’activité visent un temps de récupération de 4 heures et un point de récupération de 24 heures.
• L’IA peut envoyer des prompts, du texte en cours d’édition, du contenu ou du code pertinent à des fournisseurs de modèles tels qu’OpenAI ou Anthropic, ce qui permet aux entreprises d’obtenir un contrôle plus fort sur les modèles et la confidentialité.
• Les données des clients du plan Free peuvent être utilisées pour l’entraînement ; les comptes payants autonomes doivent vérifier l’interrupteur AI Training, les équipes peuvent choisir de s’y opposer, et par défaut, Enterprise n’est pas utilisé pour l’entraînement.
• Les pages légales ne décrivent pas de manière totalement uniforme le paiement autonome et la formation pour les équipes ; avant de traiter des codes propres, il convient de vérifier les paramètres de l’espace et le contrat, plutôt que de se fier uniquement au nom du forfait.
• Les conditions relatives à l’IA stipulent que le client conserve la propriété des données d’entrée et de sortie entre les deux parties, mais que les données de sortie ne sont pas assorties de garanties absolues en matière de précision, de non-violation des droits de propriété intellectuelle ou de commercialisabilité.
• Le mode de confidentialité Enterprise offre un chiffrement de session contrôlé par le client ainsi qu’un mode de conservation quasi nulle, mais la plateforme et les grands modèles sélectionnés restent temporairement en contact avec du code non chiffré lors du traitement.
• Le client doit avoir le droit de télécharger du code, des designs, des éléments visuels et des données, et être responsable de l’information, du consentement et du traitement légal de la vie privée des utilisateurs finaux sur son site ou son application.
• L’analyse de Publish, les tests A/B, les cartes thermiques et la ciblage peuvent utiliser des cookies ou le stockage local ; le mécanisme de consentement dans la région de déploiement doit être correctement configuré par le client.

Avantage

• Fusion fonctionne directement autour des entrepôts et systèmes de conception existants, ce qui permet aux résultats d’être intégrés plus facilement dans le processus de développement réel.
• La toile de visualisation permet à la conception, aux produits et au développement de communiquer autour du même code, réduisant ainsi les captures d’écran et les transferts manuels.
• Publish sépare le contenu du code, permettant à l’équipe marketing de modifier rapidement les pages tout en continuant d’utiliser les composants de marque gérés par les développeurs.
• L’SDK et l’API offrent une large couverture, adaptés à de nombreuses stacks technologiques telles que React, Vue, Angular, Svelte, Qwik, React Native, etc.
• Figma, VS Code, Desktop, Chrome, Git et MCP forment une chaîne d’outils complète allant de la conception au développement.
• Les SDK publics et les dépôts d’exemples facilitent l’évaluation des détails de mise en œuvre, sans avoir à compter entièrement sur un client boîte noire.

Limites et contraintes des capacités

• Fusion n’est pas une équipe de remplacement pour créer des applications en un clic ; les modifications apportées par l’IA nécessitent toujours une revue du code, des tests, des scans de sécurité et des vérifications de performance.
• Les index de grands entrepôts, les dépendances complexes, l’infrastructure privée et les droits d’accès aux entreprises peuvent nécessiter une configuration supplémentaire ou un contrat Enterprise.
• La consommation d’Agent Credits varie en fonction du modèle et de la tâche ; en plus du prix fixe pour les places, des coûts supplémentaires peuvent s’appliquer.
• Publish s’adresse actuellement principalement aux entreprises ; les prix réels pour les Vues visuelles, la bande passante, les membres et les espaces ne sont pas encore publiés.
• Les composants personnalisés, les adresses de prévisualisation, le SSR, le cache et la localisation nécessitent une intégration correcte par le développeur ; l’équipe de contenu ne peut pas effectuer seule toutes les configurations techniques.
• Les fonctionnalités des différents SDK ne sont pas entièrement identiques ; avant de choisir un framework, il convient de vérifier la génération actuellement recommandée, le SSR, les tests A/B et le support des composants personnalisés.
• Il convient d’examiner avec prudence la configuration par défaut qui permet une lecture publique des pages ou du modèle de données ; les contenus sensibles doivent utiliser des modèles privés et des clés serveur.
• Il existe de légères différences entre les politiques en matière de contrôle de l’entraînement de l’IA, de modèles tiers, de durée de conservation et de règles de remboursement ; pour les projets sensibles, il convient de se référer aux paramètres du compte et au contrat signé.

Résumé

Builder.io est adapté aux équipes de produits, d’ingénierie et de contenu qui souhaitent intégrer la génération par l’IA, l’édition visuelle, un véritable dépôt de code et un CMS headless au sein du même système collaboratif.

Avant d’acheter, il convient d’abord de déterminer s’il est nécessaire d’utiliser Fusion, Publish ou un espace mixte, puis de calculer le nombre de places et les Agent Credits, et de vérifier le tarif de Publish, l’activation/désactivation de l’entraînement de l’IA, la conservation des données ainsi que le support technique.