Artefactos - Interfaz Generativa

• Generative UI: Crea componentes de React, código HTML y diagramas de Mermaid
• Integración flexible: Utilice cualquier modelo que haya configurado
• Diseño iterativo: Mejore y refine rápidamente los resultados generados
• Integración de agentes: Configure los artefactos a nivel de agente (enfoque recomendado)

Nota: La forma preferida de utilizar artifacts es ahora a través de la función de Agents, la cual permite un control más granular al habilitar/deshabilitar artifacts a nivel de agente en lugar de hacerlo en toda la aplicación.

Características clave de los Code Artifacts de LibreChat:

• Prototipado instantáneo de sitios web e interfaces de usuario con IA generativa
• Creación sencilla de diseños dinámicos y adaptables
• Entorno de aprendizaje interactivo para React y HTML
• Visualización de ideas complejas mediante diagramas Mermaid
• Iteraciones de diseño intuitivas y centradas en el usuario impulsadas por IA
• Alternativa gratuita y de código abierto a las herramientas de IA de pago

Experimenta el futuro del diseño y desarrollo de UI/UX con las capacidades generativas de LibreChat. ¡Haz realidad tus ideas más rápido que nunca!

Content-Security-Policy

Es posible que necesites actualizar la Content-Security-Policy de tu servidor web para incluir frame-src 'self' https://*.codesandbox.io con el fin de cargar las aplicaciones HTML generadas en el panel de Artifacts. Esta es una dependencia de la librería sandpack.

Autoalojamiento del Bundler de Sandpack

Los Artifacts en LibreChat utilizan la biblioteca Sandpack de CodeSandbox para renderizar código HTML/JS de forma segura. De forma predeterminada, LibreChat se conecta a la CDN pública de CodeSandbox, la cual también puede transmitir telemetría sobre su uso.

Para una mayor privacidad, cumplimiento de seguridad o entornos de red aislados, puede alojar el bundler usted mismo.

¿Por qué autoalojar el Sandpack Bundler?

Autoalojar el bundler ofrece varias ventajas:

• Privacidad y seguridad: Mantenga la ejecución de código dentro de su propia infraestructura
• Fiabilidad: Eliminar la dependencia de servicios externos
• Rendimiento: Reduzca la latencia alojando el bundler en su red
• Cumplimiento: Cumplir con los requisitos de manejo de datos de la organización
• Control: Configure y personalice según sus necesidades específicas

Configuración

Una vez que tenga un bundler autohospedado configurado, simplemente configure LibreChat para usarlo estableciendo la variable de entorno:

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

Consideraciones generales

Autoalojar el bundler introduce una sobrecarga adicional:

• Configuración de CORS: Necesitará gestionar las políticas de intercambio de recursos de origen cruzado (cross-origin resource sharing)
• Gestión de seguridad: Usted se vuelve responsable de la seguridad del servicio de empaquetado (bundler).
• Mantenimiento: Las actualizaciones y parches deberán aplicarse manualmente
• Requisitos de recursos: Se necesitarán recursos de servidor adicionales para alojar el bundler

Para obtener instrucciones detalladas sobre cómo configurar y mantener su bundler autohospedado, consulte el repositorio forked de CodeSandbox adaptado para el despliegue de LibreChat, que incluye la eliminación de telemetría de Sandpack.

Noticias de IA 2024: ¡La plataforma de chat de IA de código abierto original y MEJOR, LibreChat, lanza Code Artifacts! Esta herramienta de interfaz generativa puede generar React, HTML y diagramas al instante a partir de un solo prompt en tu navegador con cualquier LLM, OpenAI, Anthropic, LLAMA, Mistral, DeepSeek Coder y más, gracias a la integración con OLLAMA.

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