mirror of
https://github.com/LibreChat-AI/librechat.ai.git
synced 2026-03-27 10:48:32 +07:00
a058b0d3bd
I put LibreChat on a VPS and was trying out the Artifacts feature but noticed the apps wouldn't load. The right panel would show: ``` "This content is blocked. Contact the site owner to fix the issue." ``` and then ``` Couldn't connect to server This means sandpack cannot connect to the runtime or your network is having some issues. Please check the network tab in your browser and try again. If the problem persists, report it via email or submit an issue on GitHub. ENV: create-react-app ERROR: TIME_OUT ``` I updated my web server's Content-Security-Policy to include `frame-src 'self' https://*.codesandbox.io` and that fixed the issue. I figured I would document that here for others.
36 lines
2.0 KiB
Plaintext
36 lines
2.0 KiB
Plaintext
---
|
|
title: Artifacts - Generative UI
|
|
description: Discover LibreChat's revolutionary Artifacts feature for instant creation of React components, HTML code, and Mermaid diagrams.
|
|
---
|
|
|
|
# Artifacts: Generate React, HTML & Diagrams Instantly
|
|
|
|
- **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
|
|
|
|
<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.
|
|
|
|
---
|
|
|
|
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
|