Artefakte - Generative UI

• Generative UI: Erstellen Sie React-Komponenten, HTML-Code und Mermaid-Diagramme
• Flexible Integration: Verwenden Sie jedes Modell, das Sie eingerichtet haben
• Iteratives Design: Generierte Ausgaben schnell verbessern und verfeinern
• Agent-Integration: Konfigurieren Sie Artefakte auf Agenten-Ebene (empfohlener Ansatz)

Hinweis: Die bevorzugte Methode zur Verwendung von Artifacts erfolgt nun über die Agents-Funktion, die eine präzisere Steuerung ermöglicht, indem Artifacts auf Agent-Ebene anstatt app-weit aktiviert/deaktiviert werden können.

Hauptfunktionen der Code-Artefakte von LibreChat:

• Sofortiges Prototyping von Websites und UIs mit generativer KI
• Mühelose Erstellung dynamischer, responsiver Layouts
• Interaktive Lernumgebung für React und HTML
• Visualisierung komplexer Ideen mithilfe von Mermaid-Diagrammen
• KI-gestützte, intuitive und nutzerzentrierte Design-Iterationen
• Kostenlose und quelloffene Alternative zu kostenpflichtigen KI-Tools

Erleben Sie die Zukunft von UI/UX-Design und -Entwicklung mit den generativen Funktionen von LibreChat. Erwecken Sie Ihre Ideen schneller als je zuvor zum Leben!

Content-Security-Policy

Möglicherweise müssen Sie die Content-Security-Policy Ihres Webservers aktualisieren, um frame-src 'self' https://*.codesandbox.io einzuschließen, damit generierte HTML-Apps im Artifacts-Panel geladen werden können. Dies ist eine Abhängigkeit der sandpack-Bibliothek.

Selbst-Hosting des Sandpack Bundlers

Artifacts in LibreChat verwenden die Sandpack-Bibliothek von CodeSandbox, um HTML/JS-Code sicher zu rendern. Standardmäßig verbindet sich LibreChat mit dem öffentlichen CDN von CodeSandbox, das möglicherweise auch Telemetriedaten zur Nutzung überträgt.

Für verbesserte Privatsphäre, Sicherheits-Compliance oder isolierte Netzwerkumgebungen können Sie den Bundler selbst hosten.

Warum den Sandpack Bundler selbst hosten?

Self-hosting the bundler bietet mehrere Vorteile:

• Datenschutz & Sicherheit: Halten Sie die Code-Ausführung innerhalb Ihrer eigenen Infrastruktur
• Zuverlässigkeit: Abhängigkeit von externen Diensten entfernen
• Leistung: Reduzieren Sie die Latenz, indem Sie den Bundler in Ihrem Netzwerk hosten
• Compliance: Erfüllen Sie die Anforderungen an die Datenverarbeitung Ihres Unternehmens
• Steuerung: Konfigurieren und anpassen an Ihre spezifischen Bedürfnisse

Konfiguration

Sobald Sie einen selbst gehosteten Bundler eingerichtet haben, konfigurieren Sie LibreChat einfach für dessen Verwendung, indem Sie die Umgebungsvariable setzen:

# `.env` file
SANDPACK_BUNDLER_URL=http://your-bundler-url

Allgemeine Überlegungen

Das Self-Hosting des Bundlers bringt einen zusätzlichen Overhead mit sich:

• CORS-Konfiguration: Sie müssen die Richtlinien für Cross-Origin Resource Sharing verwalten
• Sicherheitsmanagement: Sie werden für die Sicherheit des Bundler-Dienstes verantwortlich.
• Wartung: Updates und Patches müssen manuell angewendet werden
• Ressourcenanforderungen: Zusätzliche Serverressourcen werden benötigt, um den Bundler zu hosten.

Für detaillierte Anweisungen zur Einrichtung und Wartung Ihres selbst gehosteten Bundlers, lesen Sie das geforkte CodeSandbox-Repository, das für die LibreChat-Bereitstellung angepasst wurde, einschließlich der Entfernung der Telemetrie aus Sandpack.

KI-News 2024: Die originale und BESTE Open-Source-KI-Chat-Plattform, LibreChat, veröffentlicht Code-Artefakte! Dieses generative UI-Tool kann mit einem einzigen Prompt in Ihrem Browser React, HTML & Diagramme sofort generieren – mit jedem LLM, OpenAI, Anthropic, LLAMA, Mistral, DeepSeek Coder & mehr, dank der OLLAMA-Integration.

#AINews2024 #OpenSourceAI #GenerativeUI #CodeArtifacts #WebDevelopment #ReactJS #LLM #AIPrototyping #DevTools #OLLAMA #LibreChat