Artefacts - Interface générative

• Generative UI : Créez des composants React, du code HTML et des diagrammes Mermaid
• Intégration flexible : Utilisez n'importe quel modèle que vous avez configuré
• Conception itérative : Améliorez et affinez rapidement les résultats générés
• Intégration d'agents : Configurez les artefacts au niveau de l'agent (approche recommandée)

Note : La méthode privilégiée pour utiliser les artifacts passe désormais par la fonctionnalité Agents, qui permet un contrôle plus granulaire en activant ou désactivant les artifacts au niveau de l'agent plutôt qu'à l'échelle de toute l'application.

Fonctionnalités clés des Code Artifacts de LibreChat :

• Prototypage instantané de sites web et d'interfaces utilisateur avec l'IA générative
• Création facile de mises en page dynamiques et réactives
• Environnement d'apprentissage interactif pour React et HTML
• Visualisation d'idées complexes à l'aide de diagrammes Mermaid
• Itérations de conception intuitives et centrées sur l'utilisateur, optimisées par l'IA
• Alternative gratuite et open-source aux outils d'IA payants

Découvrez le futur de la conception et du développement UI/UX grâce aux capacités génératives de LibreChat. Donnez vie à vos idées plus rapidement que jamais !

Content-Security-Policy

Il se peut que vous deviez mettre à jour la Content-Security-Policy de votre serveur web pour inclure frame-src 'self' https://*.codesandbox.io afin de charger les applications HTML générées dans le panneau Artifacts. Il s'agit d'une dépendance de la bibliothèque sandpack.

Auto-hébergement du Sandpack Bundler

Les Artifacts dans LibreChat utilisent la bibliothèque Sandpack de CodeSandbox pour rendre le code HTML/JS de manière sécurisée. Par défaut, LibreChat se connecte au CDN public de CodeSandbox, qui peut également transmettre des données de télémétrie concernant son utilisation.

Pour une confidentialité renforcée, une conformité en matière de sécurité ou des environnements réseau isolés, vous pouvez auto-héberger le bundler.

Pourquoi auto-héberger le Sandpack Bundler ?

Auto-héberger le bundler offre plusieurs avantages :

• Confidentialité et sécurité : Gardez l'exécution du code au sein de votre propre infrastructure
• Fiabilité : Supprimer la dépendance aux services externes
• Performance : Réduisez la latence en hébergeant le bundler sur votre réseau
• Conformité : Répondre aux exigences organisationnelles en matière de traitement des données
• Contrôle : Configurez et personnalisez selon vos besoins spécifiques

Configuration

Une fois que vous avez configuré un bundler auto-hébergé, configurez simplement LibreChat pour l'utiliser en définissant la variable d'environnement :

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

Considérations générales

L'auto-hébergement du bundler introduit une surcharge supplémentaire :

• Configuration CORS : Vous devrez gérer les politiques de partage des ressources entre origines (cross-origin resource sharing).
• Gestion de la sécurité : Vous devenez responsable de la sécurité du service de bundler
• Maintenance : Les mises à jour et les correctifs devront être appliqués manuellement
• Exigences en matière de ressources : Des ressources serveur supplémentaires seront nécessaires pour héberger le bundler

Pour des instructions détaillées sur la configuration et la maintenance de votre bundler auto-hébergé, veuillez vous référer au dépôt CodeSandbox forké adapté au déploiement de LibreChat, incluant la suppression de la télémétrie de Sandpack.

Actualités IA 2024 : La plateforme de chat IA open-source originale et la MEILLEURE, LibreChat, lance les Code Artifacts ! Cet outil d'interface utilisateur générative peut générer instantanément du React, du HTML et des diagrammes à partir d'une seule invite dans votre navigateur avec n'importe quel LLM, OpenAI, Anthropic, LLAMA, Mistral, DeepSeek Coder et plus encore grâce à l'intégration OLLAMA.

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