Builder.io

Was ist Builder.io?

Builder.io ist eine von Builder.io Inc. entwickelte Plattform für die visuelle Entwicklung mit KI. Die wichtigsten Produkte sind dabei die Fusion-Visualisierungs-IDE sowie das Publish-Visualisierungs-CMS.

Fusion ermöglicht es den Teams für Produkte, Design und Entwicklung, mithilfe von KI und einem Entwicklungsumfeld auf der bestehenden Codebasis zu arbeiten. Publish wiederum ermöglicht es den Teams für Inhalte und Marketing, die digitale Erfahrung zu verwalten, zu veröffentlichen und zu optimieren, ohne den Geschäftscode ändern zu müssen.

Der Unterschied zwischen Fusion und Publish

Der Fusion-Raum wird für Projekte zur Codegenerierung verwendet, der Publish-Raum für Inhalte, Modelle und Daten; Abonnements, Mitglieder und Limits werden pro Raum verwaltet.

Hauptfunktionen von Fusion

• Projekt mit Prompt erstellen: Beschreiben Sie die gewünschte Anwendung oder Funktion. Die KI erstellt in dem visuellen Editor eine erste Version, und es sind weiterhin Änderungen an ausgewählten Elementen oder Dateien möglich.
• Verbindung mit Code-Repositorys: Es ist möglich, sich mit GitHub, GitLab und Bitbucket zu verbinden. Die Enterprise-Version unterstützt außerdem Azure DevOps sowie enterprisebasierte Code-Hosting-Lösungen.
• Verständnis des bestehenden Codes: Struktur der Projektindizes der Plattform, Komponenten und Designregeln – KI kann innerhalb des bestehenden Technologiestacks echte Dateien ändern, anstatt nur isolierte Beispiele auszugeben.
• Visualer Code-Editor: Einfügen, Auswählen, Anpassen und Vorschau der Benutzeroberfläche auf dem Canvas; Änderungen werden anschließend von KI in Code umgesetzt – geeignet für die Zusammenarbeit bei Design und Ingenieurarbeit.
• Figma in Code umwandeln: Importieren Sie Designs über einen Figma-Plugin und erstellen Sie responsive Benutzeroberflächen. Sie können eine schnelle Kompilierung wählen oder externe große Modelle nutzen, um die Qualität des Codes zu verbessern.
• Mehrere Kontexte: Hinweise können Bilder, Screenshot, PDFs, Dokumente, Tabellen, Code-Dateien und andere Materialien enthalten, sowie auf spezifische Dateien im Repository verweisen.
• Benutzerdefinierte Regeln: Projekte können Kodierpräferenzen sowie Anforderungen an die Dateiorganisation speichern. Zudem kann die Codebasis mithilfe von Regeldateien die Umsetzung durch KI einschränken.
• Auswahl des AI-Modells: Es ist möglich, eine automatische Auswahl zu verwenden oder aus den verfügbaren Modellen von Anbietern wie Anthropic, OpenAI, Google usw. auszuwählen. Die Qualität und der Preis des Modells beeinflussen die Agent Credits.
• Automatische Fehlerbehebung: Es wird ein Code erstellt oder ausgeführt, wodurch der Agent versuchen kann, Fehler zu beheben. Dennoch sind letztendlich Tests sowie eine manuelle Codeprüfung erforderlich.
• Branching und Review: Das Team-Entwurfssystem bietet Kommentare, Peer-Reviews, Aktivitätsprotokolle sowie mit Passwort geschützte Vorschauen, um zu kontrollieren, welche AI-Änderungen in die Hauptbranch eingefügt werden.
• MCP-Integration: Der integrierte MCP-Server ermöglicht die Verbindung mit externen Diensten; Team unterstützt die Anpassung von MCP, und Fusion MCP ermöglicht es kompatiblen Clients, Proxy-Aufgaben zu starten und zu verfolgen.
• Lokale und Cloud-Umgebungen: Projekte können in Cloud-Containern, lokal oder in lokalen Containern ausgeführt werden; Enterprise ermöglicht die Konfiguration eigener Docker-Images sowie strengere Umgebungsanforderungen.

Hauptfunktionen von Publish

• Visualisierungs-Editor: Das Inhaltsteam kann in der Vorschau auf der echten Website Blöcke verschieben, Styles und Datenbindungen bearbeiten und dabei benutzerdefinierte Komponenten verwenden, die von Entwicklern registriert wurden.
• Inhaltliches Modell: Page wird für vollständige Seiten verwendet, Section für wiederverwendbare Seitenabschnitte, Data für strukturierte Daten, um Layout und Inhalt getrennt verwalten zu können.
• Komponenten und Design-Systeme: Entwickler integrieren Komponenten wie React und Vue in den Editor; Nicht-Techniker können diese nur innerhalb der erlaubten Eigenschaften kombinieren und konfigurieren.
• Vorlagen und Symbole: Speichern Sie häufig verwendete Layouts als Vorlagen oder wiederverwenden Sie Inhalteinheiten, um wiederholende Arbeiten bei der Verwaltung mehrerer Seiten, Marken und Veranstaltungen zu reduzieren.
• Zeitgesteuerte Veröffentlichung: Festlegen von Start- und Endzeit für den Inhalt – geeignet für Werbekampagnen, Veranstaltungen, Ankündigungen sowie Seiten mit festgelegten Veröffentlichungszeiten.
• Positionierung und Personalisierung: Inhalte können nach Pfad, Gerät oder benutzerdefinierten Eigenschaften des Unternehmens ausgewählt werden. Die möglichen Funktionen sind durch die Vertrags- und Lösungskonditionen von Publish eingeschränkt.
• Lokalisierung: Unterstützung für Felder innerhalb der Zeile, den gesamten Inhalt sowie mehrsprachige Strategien für das Datenmodell; der entsprechende Inhalt kann je nach Locale abgerufen werden.
• A/B-Test: Um mehrere Versionen von Seiten oder Blöcken, die vom Builder verwaltet werden, zu erstellen und die Konversionsraten zu verfolgen, ist eine ordnungsgemäße Integration von Tests sowie Event-Tracking erforderlich.
• Insights und Heatmaps: Es lassen sich Anzeigen, Klicks, Konvertierungen sowie Seiteninteraktionen einsehen, um Inhaltsprobleme aufzudecken. Dabei muss die Datenerfassung den Vorschriften zum Datenschutz und zu Cookies entsprechen.
• Prioritäre Lieferung über API: Die Anwendung bleibt weiterhin beim Kunden gehostet, wobei die Veröffentlichung von Inhalten über globale CDN-Netzwerke, Content-APIs oder SDKs auf bestehende Websites und Anwendungen übertragen wird.
• E-Commerce und externe Daten: Es ist möglich, Geschäftssysteme wie Shopify sowie externe Daten anzuschließen, um Produkte, Lagerbestände oder Marketinginhalte in den Komponenten anzuzeigen.
• CMS MCP: Kompatible Clients können sich mit Publish- oder Hybrid-Räumen verbinden und Inhalte im Builder in natürlicher Sprache lesen sowie bearbeiten.

Eingabe, Ausgabe und Funktionsweise

Fusion-Anleitung

1. Erstellen Sie einen Fusion-Raum und wählen Sie aus, ob Sie mit einer Prompt-Beschreibung, einem Starter-Template oder einem vorhandenen Git-Repository beginnen möchten.
2. Verbinden Sie sich mit GitHub, GitLab oder Bitbucket und erteilen Sie nur den notwendigen Repositorien Berechtigungen; legen Sie die Hauptbranche, die Installationsbefehle, die Entwicklungsporte sowie die Umgebungsvariablen fest.
3. Lassen Sie die Plattform Projekte indizieren und fügen Sie benutzerdefinierte Regeln hinzu, wie Frameworks, Komponentenbibliotheken, Design-Tokens, Testbefehle und Verbotene Elemente.
4. Reichen Sie klare Aufgaben ein, ergänzt durch Figma-, Screenshot- oder relevante Dateien, und geben Sie direkt die Stellen im Code an, die geändert werden müssen.
5. Überprüfen Sie im visuellen Editor die Desktop- und Mobilansichten, wählen Sie spezifische Elemente aus, um weiter zu iterieren – verlangen Sie nicht auf einmal eine umfassende Umgestaltung ohne Grenzen.
6. Ausführung von Typüberprüfungen, Unit-Tests, End-to-End-Tests und Build-Prozessen, manuelle Überprüfung von Berechtigungen, Abhängigkeiten, Datenanfragen sowie Fehlerbehandlung.
7. Verwenden Sie Zweige, Kommentare und Peer-Reviews, um Unterschiede zu überprüfen, und veröffentlichen Sie anschließend gemäß dem Team-Prozess für das Zusammenführen und Bereitstellen von Code.

Veröffentlichungs-Einrichtungstutorial

1. Erstellen Sie einen Publish-Raum und definieren Sie Page-, Section- oder Data-Modelle, um zunächst klarzustellen, welche Inhalte vom CMS gesteuert werden und welche weiterhin im Code verbleiben.
2. Wählen Sie das entsprechende Framework-SDK aus und nutzen Sie die öffentlichen API-Schlüssel, um veröffentlichte Inhalte abzurufen; für private Modelle sowie Schreibvorgänge werden Server-Private-Schlüssel verwendet.
3. Registrieren Sie die eigenen Komponenten beim Visual Editor und begrenzen Sie die editierbaren Eigenschaften, Standardwerte sowie Eingabetypen, um zu verhindern, dass Mitarbeiter die Geschäftslogik beschädigen.
4. Konfigurieren Sie die Vorschau-Adresse, damit der Editor die echte Website lädt und die Änderungen am Entwurf in Echtzeit anzeigt.
5. Erstellen Sie Seiten oder Inhalts-Einträge und überprüfen Sie die einzelnen Breakpoints, Sprachen, Datenbindungen, SEO-Felder sowie Barrierefreiheitsinformationen.
6. Stellen Sie nach Bedarf Zeitpläne, Standorte, A/B-Versionen sowie Konversionsereignisse ein und lassen Sie die zuständigen Personen diese vorab ansehen und freigeben.
7. Veröffentlichen Sie Inhalte und überprüfen Sie die Content API, den CDN-Cache sowie die eigentliche Website; konfigurieren Sie Webhooks für wesentliche Änderungen an den Inhalten, um das Erstellen neuer Versionen oder das Löschen des Caches auszulösen.

Rahmenwerk, Plattformen und Erweiterungen

Fusion-Preispakete

Jedes Selbstbedienungspaket umfasst 1 bezahlten Benutzer. Jeder zusätzliche Benutzer verursacht zusätzliche Gebühren für weitere Plätze. Die Beträge auf der Seite, Steuern, Währung sowie die endgültige Gesamtkosten richten sich nach den Angaben auf der Kontoabrechnungsseite.

Auf der Seite mit den kostenlosen Limits wird derzeit 15 pro Tag und 60 pro Monat angezeigt; auf einigen Seiten wurden unterschiedliche Zahlen angegeben. Das tägliche Limit wird um Mitternacht UTC zurückgesetzt, das monatliche Limit am ersten Tag des Monats – wobei die Angaben im Backend als maßgeblich gelten.

Veröffentlichungspreis und Traffic

Die Statistiken zu den Visual Views von Publish werden durch Tracking-Pixel auf den visualisierten Seiten oder Blöcken berechnet. Das Data-Modell wird nicht nach Visual Views gezählt, kann jedoch den Bandbreitenverbrauch messen.

Auch bei der Verwendung von statischer Generierung, Serverseitiger Rendering, Client-Caching oder selbst gehostetem Inhalt kann die vertragliche Abrechnung von Publish gelten; bei der Auswahl muss man mit dem Vertrieb die Parameter bezüglich Traffic und Bandbreite klären.

Stornierung und Rückerstattung

• Jeder Raum wird separat abonniert; das Kündigen eines Raums führt nicht automatisch zur Kündigung der anderen Räume.
• Die Selbstabonnementierung kann in den Einstellungen des Accounts deaktiviert werden. In der Regel bleibt sie bis zum Ende der aktuellen Abrechnungsperiode aktiv, danach wird sie auf „Free“ umgestellt.
• Abonnements, die über Shopify installiert und gekauft werden, müssen über Shopify verwaltet werden; das Deinstallieren beendet die Verlängerung und entfernt außerdem den Builder-Inhalt sowie die Einstellungen aus dem Shop.
• Die Hilfedokumentation ermöglicht es, zunächst zu stornieren und anschließend einen Rückgabeantrag bei der Support-Abteilung einzureichen, wobei eine Rechnung, der Grund sowie die öffentliche API-Key erforderlich sind.
• Anträge auf Rückerstattung müssen geprüft werden und werden nicht automatisch genehmigt; gemäß den Bedingungen des Dienstleistungsvertrags sind Vorauszahlungen grundsätzlich nicht rückerstattbar, es sei denn, es liegen ausdrücklich im Vertrag festgelegte Ausnahmefälle wie eine frühzeitige Beendigung vor.
• Nach Beendigung des Vertrags wird den Kunden in der Regel eine Frist von 30 Tagen eingeräumt, um die Daten elektronisch abzurufen; danach können sie gelöscht werden. Laut dem US-DPA müssen personenbezogene Daten außerdem innerhalb von 90 Tagen nach Beendigung des Vertrags gelöscht werden – mit Ausnahme der Fälle, in denen gesetzliche Vorschriften eine Aufbewahrung erfordern.
• Die Bedingungen, die Hilfeseiten sowie die Geltungsbereiche für einzelne Bestellungen unterscheiden sich. Bevor man eine jährliche Zahlung vereinbart oder Speicherplatz migriert, sollten die Möglichkeiten zur Stornierung, Rückerstattung, Datenexport sowie die Einschränkungen bei einer Herabstufung überprüft werden.

API, SDK und Automatisierung

GitHub, SDKs und die Grenzen des Open Source

• Das offizielle Hauptlager verwendet die MIT-Lizenz und enthält SDKs für verschiedene Frameworks, Beispiele, Starter-Projekte sowie einige Plugins.
• Die Offenlegung des SDKs ermöglicht es Entwicklern, den Code zur Darstellung von Inhalten zu prüfen und zu integrieren, und erleichtert außerdem Beiträge zur Unterstützung des Frameworks.
• Offene Projekte wie Mitosis verfügen über eine Fähigkeit zur Kompilierung zwischen verschiedenen Frameworks; die genauen Lizenzen müssen jedoch für jedes Repository separat geprüft werden.
• Die Hosting-Plattform von Builder.io, der Visual Editor, das Benutzersystem, die Unternehmensdienste sowie die proprietären AI-Modelle wurden dadurch nicht vollständig open source gemacht.
• Die Verwendung des öffentlichen SDKs in kommerziellen Projekten erfordert in der Regel die Einhaltung sowohl der MIT-Lizenz als auch der Vereinbarungen zum Builder-Dienst. Zudem unterliegt die Nutzung von Cloud-Diensten den Bedingungen des Pakets sowie der API-Bedingungen.

Privatsphäre, Sicherheit und AI-Daten

• Der Sicherheitsanhang besagt, dass bei der Übertragung von Kundendaten TLS 1.2 oder eine höhere Version verwendet wird, während statische Daten mit AES-256 verschlüsselt werden. Zudem werden die Schlüssel über Hosted Key Services gesteuert.
• Die Plattform behält SOC 2 Type 2-Audits, Mindestberechtigungen, mehrfaktorielle Authentifizierung in der Produktionsumgebung, quartalsweise Überprüfungen des Zugriffs, Sicherheitsscans sowie jährliche Penetrationstests durch Dritte bei.
• Kunden werden innerhalb von 72 Stunden nach Kenntnisnahme eines bestätigten Datenlecks benachrichtigt. Die Ziele für die Kontinuität des Geschäftsbetriebs sind eine Wiederherstellungszeit von 4 Stunden sowie ein Wiederherstellungspunkt nach 24 Stunden.
• KI kann Anweisungen, den bearbeiteten Text, den Inhalt oder den zugehörigen Code an Modelldienstleister wie OpenAI oder Anthropic senden, wodurch Unternehmen eine stärkere Kontrolle über die Modelle sowie über die Privatsphäre erlangen.
• Kundendaten der Free-Version können zur Schulung verwendet werden; bei Self-Pay-Konten sollte der Schalter für AI-Training überprüft werden, Teams können sich davon ausschließen, und bei Enterprise wird standardmäßig nicht für die Schulung genutzt.
• Die verschiedenen Rechtsseiten geben keine völlig einheitliche Beschreibung für die Selbstbezahlung sowie die Schulungen im Team. Bevor man mit proprietärem Code arbeitet, sollte man die Raum-Einstellungen sowie den Vertrag überprüfen – anstatt sich nur auf die Namen der Pakete zu verlassen.
• Die AI-Bestimmungen besagen, dass der Kunde das Recht an den eingegebenen und ausgegebenen Inhalten behält, wobei die Ausgaben keine absoluten Garantien hinsichtlich Genauigkeit, Rechtmäßigkeit oder Vermarktbarkeit bieten.
• Der Enterprise Privacy Mode bietet eine vom Kunden gesteuerte Sitzungsschlüsselung sowie einen nahezu null-Verbleibs-Modus, wobei die Plattform und das gewählte große Modell bei der Verarbeitung dennoch vorübergehend auf unverschlüsselten Code zugreifen.
• Der Kunde muss das Recht haben, Code, Designs, Materialien und Daten hochzuladen, und ist für die Information, Zustimmung und den rechtmäßigen Umgang mit der Privatsphäre der Endnutzer auf seiner Website oder Anwendung verantwortlich.
• Für Analysen, A/B-Tests, Heatmaps und Targeting bei Publish können Cookies oder lokaler Speicher verwendet werden; das Zustimmungsverfahren im Bereitstellungsgebiet muss vom Kunden ordnungsgemäß konfiguriert werden.

Vorteile

• Fusion arbeitet direkt mit den bestehenden Lager- und Designsystemen zusammen, wodurch die Ergebnisse leichter in den eigentlichen Entwicklungsprozess integriert werden können.
• Das visuelle Canvas ermöglicht es, Design, Produkte und Entwicklung anhand desselben Codes zu koordinieren und somit Screenshots sowie manuelle Übertragungen zu reduzieren.
• „Publish“ trennt den Inhalt vom Code, sodass das Marketing-Team Seiten schnell ändern kann, während weiterhin die von den Entwicklern gepflegten Markenkomponenten verwendet werden.
• Das SDK und die API decken ein breites Spektrum ab und eignen sich für verschiedene Technologiestacke wie React, Vue, Angular, Svelte, Qwik, React Native usw.
• Figma, VS Code, Desktop, Chrome, Git und MCP bilden eine recht vollständige Werkzeugkette von der Gestaltung bis zur Entwicklung.
• Offene SDKs und Beispiel-Repositorien erleichtern die Bewertung der Implementierungsdetails, ohne sich vollständig auf schwarze-Box-Klienten verlassen zu müssen.

Fähigkeitsgrenzen und Beschränkungen

• Fusion ist kein Ersatz für ein Team, das Anwendungen in einem Schritt erstellt; Änderungen durch KI erfordern weiterhin Code-Review, Tests, Sicherheitsscans und Leistungsüberprüfungen.
• Große Lagerindexe, komplexe Abhängigkeiten, private Infrastrukturen sowie Unternehmensrechte können eine zusätzliche Konfiguration oder einen Enterprise-Vertrag erfordern.
• Der Verbrauch von Agent Credits variiert je nach Modell und Aufgabe; neben dem festen Sitzpreis können zusätzliche Kosten anfallen.
• Publish richtet sich derzeit hauptsächlich an Unternehmen; die tatsächlichen Preise für Visual Views, Bandbreite, Mitglieder und Räume sind noch nicht veröffentlicht.
• Custom-Components, Vorschau-Adressen, SSR, Caching und Lokalisierung erfordern eine korrekte Integration durch Entwickler – das Content-Team kann nicht alle technischen Einstellungen eigenständig vornehmen.
• Die Funktionen der verschiedenen SDKs sind nicht vollständig identisch. Bevor man sich für ein Framework entscheidet, sollte man die aktuell empfohlene Version, die SSR-Funktionen, die Unterstützung für A/B-Tests sowie die Möglichkeit zur Erstellung von benutzerdefinierten Komponenten überprüfen.
• Die Standardeinstellungen für die öffentliche Lesezugrifflichkeit von Seiten oder Datenmodellen müssen sorgfältig überprüft werden; sensible Inhalte sollten mit privaten Modellen und Server-Schlüsseln verarbeitet werden.
• Es gibt geringe Unterschiede zwischen den Richtlinien hinsichtlich der Steuerung der KI-Training, Drittanbietermodelle, Aufbewahrungsfristen und Rückerstattungsregeln. Bei sensiblen Projekten gelten die Einstellungen des Kontos sowie der unterzeichnete Vertrag.

Zusammenfassung

Builder.io eignet sich für Produkt-, Engineering- und Content-Teams, die AI-generierte Inhalte, visuelle Bearbeitungsmöglichkeiten, echte Codebibliotheken sowie headless CMS in ein einheitliches Zusammenarbeitssystem integrieren möchten.

Bevor man kauft, sollte man zunächst entscheiden, ob man Fusion, Publish oder einen hybriden Raum benötigt. Anschließend müssen die Anzahl der Plätze sowie die Agent-Credits berechnet werden. Zudem sollten die Preise für Publish, die Einstellungen zur AI-Training sowie die Unterstützung durch die technische Infrastruktur überprüft werden.