Artefatos - UI Generativa

Descubra o recurso revolucionário de Artifacts do LibreChat para a criação instantânea de componentes React, código HTML e diagramas Mermaid.

Generative UI: Crie componentes React, código HTML e diagramas Mermaid
Integração Flexível: Use qualquer modelo que você tenha configurado
Design Iterativo: Melhore e refine rapidamente as saídas geradas
Integração de Agentes: Configure artefatos no nível do agente (abordagem recomendada)

Nota: A maneira preferencial de usar artifacts agora é através do recurso de Agents, que permite um controle mais granular ao habilitar/desabilitar artifacts no nível do agente, em vez de em todo o aplicativo.

Principais recursos dos Code Artifacts do LibreChat:

Prototipagem instantânea de sites e UIs com IA generativa
Criação descomplicada de layouts dinâmicos e responsivos
Ambiente de aprendizado interativo para React e HTML
Visualização de ideias complexas usando diagramas Mermaid
Iterações de design intuitivas e centradas no usuário com tecnologia de IA
Alternativa gratuita e de código aberto para ferramentas de IA pagas

Experimente o futuro do design e desenvolvimento de UI/UX com as capacidades generativas do LibreChat. Dê vida às suas ideias mais rápido do que nunca!

Content-Security-Policy

Você pode precisar atualizar a Content-Security-Policy do seu servidor web para incluir frame-src 'self' https://*.codesandbox.io a fim de carregar aplicativos HTML gerados no painel de Artifacts. Esta é uma dependência da biblioteca sandpack.

Auto-hospedagem do Sandpack Bundler

Artifacts no LibreChat utilizam a biblioteca Sandpack do CodeSandbox para renderizar código HTML/JS de forma segura. Por padrão, o LibreChat conecta-se à CDN pública do CodeSandbox, que também pode transmitir telemetria sobre o seu uso.

Para maior privacidade, conformidade de segurança ou ambientes de rede isolados, você pode hospedar o bundler por conta própria.

Por que hospedar o Sandpack Bundler por conta própria?

Self-hosting the bundler oferece várias vantagens:

Privacidade e Segurança: Mantenha a execução de código dentro da sua própria infraestrutura
Confiabilidade: Remover a dependência de serviços externos
Desempenho: Reduza a latência hospedando o bundler em sua rede
Conformidade: Atenda aos requisitos organizacionais de tratamento de dados
Controle: Configure e personalize de acordo com suas necessidades específicas

Configuração

Assim que você tiver um bundler auto-hospedado configurado, basta configurar o LibreChat para usá-lo definindo a variável de ambiente:

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

Considerações Gerais

Hospedar o bundler por conta própria introduz uma sobrecarga adicional:

Configuração de CORS: Você precisará gerenciar as políticas de compartilhamento de recursos de origem cruzada (cross-origin resource sharing)
Gerenciamento de Segurança: Você se torna responsável pela segurança do serviço de bundler
Manutenção: Atualizações e patches precisarão ser aplicados manualmente
Requisitos de Recurso: Recursos de servidor adicionais serão necessários para hospedar o bundler

Para instruções detalhadas sobre como configurar e manter seu bundler auto-hospedado, consulte o repositório forked do CodeSandbox adaptado para a implantação do LibreChat, incluindo a remoção de telemetria do Sandpack.

Notícias de IA 2024: A plataforma de chat de IA de código aberto original e a MELHOR, LibreChat, lança Code Artifacts! Esta ferramenta de UI Generativa pode gerar React, HTML e diagramas instantaneamente a partir de um único prompt no seu navegador com qualquer LLM, OpenAI, Anthropic, LLAMA, Mistral, DeepSeek Coder e mais, graças à integração com OLLAMA.

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