Artifacts - 生成式 UI

• 生成式 UI： 创建 React 组件、HTML 代码和 Mermaid 图表
• 灵活集成： 使用您已设置的任何模型
• 迭代式设计： 快速改进并优化生成的输出内容
• Agent Integration: 在 Agent 级别配置 artifacts（推荐方法）

注意： 现在使用 Artifacts 的首选方式是通过 Agents 功能，它允许在 Agent 级别而不是整个应用程序范围内启用或禁用 Artifacts，从而实现更细粒度的控制。

LibreChat 代码工件的主要功能：

• 使用生成式 AI 即时原型设计网站和 UI
• 轻松创建动态、响应式的布局
• 用于 React 和 HTML 的交互式学习环境
• 使用 Mermaid 图表进行复杂概念可视化
• 由 AI 驱动的直观、以用户为中心的设计迭代
• 免费且开源的付费 AI 工具替代方案

通过 LibreChat 的生成式功能，体验 UI/UX 设计与开发的未来。以前所未有的速度将您的创意变为现实！

Content-Security-Policy

您可能需要更新 Web 服务器的 Content-Security-Policy，以包含 frame-src 'self' https://*.codesandbox.io，从而在 Artifacts 面板中加载生成的 HTML 应用。这是 sandpack 库的依赖项。

自托管 Sandpack Bundler

LibreChat 中的 Artifacts 使用 CodeSandbox 的 Sandpack 库来安全地渲染 HTML/JS 代码。默认情况下，LibreChat 会连接到 CodeSandbox 的公共 CDN，该 CDN 可能会传输其使用情况的遥测数据。

为了增强隐私性、满足安全合规要求或在隔离的网络环境中使用，您可以自托管 bundler。

为什么要自托管 Sandpack Bundler？

Self-hosting the bundler 提供了几个优势：

• 隐私与安全：将代码执行保持在您自己的基础设施内
• 可靠性：移除对外部服务的依赖
• 性能：通过在您的网络中托管打包程序来降低延迟
• 合规性：满足组织的数据处理要求
• Control: 配置并根据您的特定需求进行自定义

配置

一旦你设置好了自托管的 bundler，只需通过设置以下环境变量来配置 LibreChat 以使用它：

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

通用注意事项

自托管 bundler 会带来一些额外的开销：

• CORS Configuration: 您需要管理跨源资源共享策略
• 安全管理：您需负责 bundler 服务的安全性
• 维护：更新和补丁需要手动应用
• 资源需求：托管打包程序（bundler）将需要额外的服务器资源

有关设置和维护自托管 bundler 的详细说明，请参阅专为 LibreChat 部署定制的 forked CodeSandbox repository，其中包括从 Sandpack 中移除遥测功能的相关内容。

2024年 AI 新闻：最初且最优秀的开源 AI 聊天平台 LibreChat 发布了代码工件（Code Artifacts）功能！得益于 OLLAMA 集成，这款生成式 UI 工具可以在您的浏览器中，通过任何 LLM（如 OpenAI、Anthropic、LLAMA、Mistral、DeepSeek Coder 等），仅凭一个提示词即可即时生成 React、HTML 和图表。

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