mirror of
https://github.com/LibreChat-AI/librechat.ai.git
synced 2026-03-27 10:48:32 +07:00
4656b0116a
* feat: enhance accessibility and improve component structure across various files * feat: enhance components with TypeScript typings and improve documentation - Added TypeScript interface for Screenshot component props. - Updated button component documentation for clarity. - Removed unnecessary console log in ContainerScroll component. - Added descriptive comments for FloatingDock and utility functions. - Improved CSP headers in next.config.mjs for security. - Cleaned up package.json by removing unused dependencies. - Refactored _app.tsx to use AppProps for type safety. - Updated meta configuration by removing hidden display property. - Added API documentation comments for GitHub stats and subscription endpoints. - Enhanced error handling in subscription API. - Updated Tailwind CSS configuration with detailed comments. - Cleaned up style.css by organizing and refining styles. - Updated tsconfig.json to include TypeScript files for API routes. - Added comments to Subscriber model and dbConnect utility for clarity. * feat: add aria-labels to HeroLinks for improved accessibility * feat: replace Twitter icon with X and add new X icon component * chore: update code structure for better readability and maintenance * chore: update .gitignore to include additional AI assistant files and Claude Flow generated files * feat: replace sidebar emojis with Lucide icons, fix duplicate titles, and clean up codebase - Add icon resolver (lib/icons.tsx) with 73 Lucide React icons mapped to string IDs - Wire icon resolver into Fumadocs loader for automatic sidebar icon rendering - Update all 19 meta.json files to use icon field instead of emoji prefixes - Add icon frontmatter to all 162 MDX documentation pages - Deduplicate adjacent sidebar icons (e.g. Search/ListFilter, Brain/Bookmark) - Remove duplicate H1 headings from 154 MDX files (DocsTitle renders frontmatter) - Add frontmatter to 33 files that were missing it - Shorten overly long titles (agents, mcp, url_query) - Rewrite /docs/local cards from old Nextra syntax to Fumadocs Card components - Remove all emojis from Get Started and Features index pages - Collapse sidebar folders by default (defaultOpenLevel: 0) - Delete temporary debugging scripts, test specs, and screenshot artifacts - Fix eslint errors in mdx-components, nextra-shims, tailwind config, and error page - Update .gitignore to exclude test/debug artifacts * feat: enhance accessibility and improve UI components - Added aria-hidden attributes to social media icons in FooterMenu for better accessibility. - Updated FooterMenu to use <footer> element for semantic HTML. - Improved Carousel component by adding aria-labels to navigation buttons for better screen reader support. - Modified OptionTable to use a unique key for each row to prevent rendering issues. - Enhanced CredentialsGeneratorBox with aria-labels for input fields and buttons to improve accessibility. - Updated documentation to remove unnecessary links and improve clarity in various sections. - Fixed iframe attributes in documentation for better compatibility and accessibility. - Adjusted CSS variable for muted foreground color to improve contrast. - Updated package.json and pnpm-lock.yaml for dependency management and optimization. * feat: update FileComponent and FolderComponent to include new props for enhanced functionality * Add new AI provider icons and update documentation - Introduced new SVG icons for AI providers: TogetherAI, TrueFoundry, VLLM, Vultr, and XAI. - Updated existing AI endpoint documentation to reflect new icon names and improve clarity. - Replaced generic \Plug\ icons with specific provider icons for Anyscale, APIpie, Cloudflare, Cohere, Databricks, DeepSeek, Fireworks, Groq, Helicone, HuggingFace, LiteLLM, Mistral, MLX, Moonshot, NeuroChain, Ollama, OpenRouter, Perplexity, Portkey, ShuttleAI, and TrueFoundry. - Enhanced the icon resolution logic to include new icons in the icon registry. * feat: add DocsHub and QuickStartHub components for enhanced documentation navigation * feat: implement FeaturesHub component for enhanced feature navigation and update ViewOptions for improved links * feat: add fresh-build script for streamlined project setup and development * fix: update ESLint configuration and improve type handling in components - Added 'next.config.mjs' to ESLint ignore list. - Refactored version assignment in ChangelogPage for better type safety. - Removed unnecessary type casting in Author components for cleaner code. - Simplified BlogHeader component by removing redundant type assertions. - Added eslint-disable comments for unused variables in CardCompat and Nextra shims. * fix: update ViewOptions link for LibreChat to remove unnecessary submit parameter * feat: enhance HomePage layout and improve GitHub star display - Integrated HomeLayout component for better page structure. - Updated HeroSection to improve the presentation of GitHub stars with a new layout and styling. - Adjusted link attributes for better accessibility and user experience. * refactor: simplify title for Model Context Protocol (MCP) documentation - Changed the title from "Model Context Protocol (MCP)" to "MCP" for brevity. - Updated the description to clarify how LibreChat utilizes MCP for integration with external tools and services. * feat: enhance navigation styling and update HomeLayout props - Added a new background style for the navigation bar with a blur effect. - Updated HomeLayout component to include a transparent navigation mode for improved visual integration. * refactor: deprecate plugins in favor of agents and update related documentation - Removed references to plugins across various files, including the FeaturesHub and documentation. - Updated navigation redirects to point to agents instead of plugins. - Deleted the plugins documentation file to streamline content and reduce confusion. * feat: update demo images for improved visual representation --------- Co-authored-by: Danny Avila <danny@librechat.ai>
74 lines
4.0 KiB
Plaintext
74 lines
4.0 KiB
Plaintext
---
|
|
title: Artifacts - Generative UI
|
|
icon: Palette
|
|
description: Discover LibreChat's revolutionary Artifacts feature for instant creation of React components, HTML code, and Mermaid diagrams.
|
|
---
|
|
|
|
- **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
|