# Artifacts - Generative UI (/docs/features/artifacts)

- **Generative UI:** Create React components, HTML code, and Mermaid diagrams
- **Flexible Integration:** Use any model you have set up
- **Iterative Design:** Rapidly improve and refine generated outputs
- **Agent Integration:** Configure artifacts at the agent level (recommended approach)

> **Note:** The preferred way to use artifacts is now through the [Agents feature](/docs/features/agents#artifacts), which allows for more granular control by enabling/disabling artifacts at the agent level rather than app-wide.

<div align="center">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/GfTj7O4gmd0?si=NrtqGoodGpfANBfT" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen={true}></iframe>
</div>

## Key Features of LibreChat's Code Artifacts:

- Instant prototyping of websites and UIs with generative AI
- Effortless creation of dynamic, responsive layouts
- Interactive learning environment for React and HTML
- Complex idea visualization using Mermaid diagrams
- AI-powered intuitive, user-centric design iterations
- Free and open-source alternative to paid AI tools

Experience the future of UI/UX design and development with LibreChat's generative capabilities. Bring your ideas to life faster than ever before!

## Content-Security-Policy

You may need to need to update your web server's Content-Security-Policy to include `frame-src 'self' https://*.codesandbox.io` in order to load generated HTML apps in the Artifacts panel. This is a dependency of the [sandpack](https://sandpack.codesandbox.io/) library.

## Self-Hosting the Sandpack Bundler

Artifacts in LibreChat use CodeSandbox's Sandpack library to securely render HTML/JS code. By default, LibreChat connects to CodeSandbox's public CDN, which may also transmit telemetry for its usage.

For enhanced privacy, security compliance, or isolated network environments, you can [self-host the bundler.](https://sandpack.codesandbox.io/docs/guides/hosting-the-bundler)

### Why Self-Host the Sandpack Bundler?

[Self-hosting the bundler](https://sandpack.codesandbox.io/docs/guides/hosting-the-bundler) provides several advantages:

- **Privacy & Security**: Keep code execution within your own infrastructure
- **Reliability**: Remove dependency on external services
- **Performance**: Reduce latency by hosting the bundler in your network
- **Compliance**: Meet organizational data handling requirements
- **Control**: Configure and customize to your specific needs

### Configuration

Once you have a self-hosted bundler set up, simply configure LibreChat to use it by setting the environment variable:

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

### General Considerations

Self-hosting the bundler introduces some additional overhead:

- **CORS Configuration**: You'll need to manage cross-origin resource sharing policies
- **Security Management**: You become responsible for the security of the bundler service
- **Maintenance**: Updates and patches will need to be applied manually
- **Resource Requirements**: Additional server resources will be needed to host the bundler

For detailed instructions on setting up and maintaining your self-hosted bundler, refer to the [forked CodeSandbox repository](https://github.com/LibreChat-AI/codesandbox-client) tailored for LibreChat deployment, including the removal of telemetry from Sandpack.

---

AI News 2024: The Original and BEST Open-Source AI Chat Platform, LibreChat Releases Code Artifacts! This Generative UI Tool Can Generate React, HTML & Diagrams Instantly from a Single Prompt in Your Browser with Any LLM, OpenAI, Anthropic, LLAMA, Mistral, DeepSeek Coder & More Thanks to OLLAMA Integration.

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