アーティファクト - 生成UI

LibreChatの革新的なArtifacts機能で、Reactコンポーネント、HTMLコード、Mermaid図を瞬時に作成しましょう。

Generative UI: Reactコンポーネント、HTMLコード、Mermaidダイアグラムの作成
柔軟な統合: 設定済みのあらゆるモデルを使用可能
反復的な設計: 生成された出力を迅速に改善および洗練します
エージェント統合: エージェントレベルでアーティファクトを設定します（推奨されるアプローチ）

注: Artifacts を使用する推奨の方法は、現在 Agents 機能を通じたものとなっています。これにより、アプリ全体ではなくエージェントレベルで Artifacts の有効化/無効化を行うことができ、よりきめ細やかな制御が可能になります。

LibreChatのコードアーティファクトの主な機能:

生成AIによるウェブサイトおよびUIのインスタントプロトタイピング
動的でレスポンシブなレイアウトを簡単に作成
ReactおよびHTMLのためのインタラクティブな学習環境
Mermaidダイアグラムを使用した複雑なアイデアの可視化
AIを活用した直感的でユーザー中心の設計反復
有料AIツールの無料でオープンソースな代替手段

LibreChatの生成機能で、UI/UXデザインと開発の未来を体験しましょう。あなたのアイデアをこれまで以上に素早く形にできます！

Content-Security-Policy

Artifactsパネルで生成されたHTMLアプリを読み込むために、WebサーバーのContent-Security-Policyを更新して frame-src 'self' https://*.codesandbox.io を含める必要がある場合があります。これは sandpack ライブラリの依存関係によるものです。

Sandpack Bundlerのセルフホスティング

LibreChatのArtifactsは、CodeSandboxのSandpackライブラリを使用してHTML/JSコードを安全にレンダリングします。デフォルトでは、LibreChatはCodeSandboxのパブリックCDNに接続しますが、これには使用状況に関するテレメトリが送信される可能性があります。

プライバシーの強化、セキュリティコンプライアンス、または隔離されたネットワーク環境のために、バンドラーをセルフホストすることができます。

Sandpack Bundlerをセルフホストする理由

Self-hosting the bundler を行うことには、いくつかの利点があります：

プライバシーとセキュリティ: コード実行を自身のインフラストラクチャ内に保持します
信頼性: 外部サービスへの依存を排除する
パフォーマンス: バンドラーをネットワーク内でホストすることでレイテンシを削減します
コンプライアンス: 組織のデータ取り扱い要件を満たす
Control: 特定のニーズに合わせて構成およびカスタマイズします

設定

セルフホスト型のバンドラーをセットアップしたら、環境変数を設定するだけでLibreChatがそれを使用するように構成できます：

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

一般的な考慮事項

バンドラーをセルフホストすると、追加のオーバーヘッドが発生します：

CORS Configuration: クロスオリジンリソース共有（CORS）ポリシーを管理する必要があります。
Security Management: バンドラーサービスのセキュリティはお客様の責任となります
メンテナンス: アップデートおよびパッチは手動で適用する必要があります
リソース要件: バンドラーをホストするために追加のサーバーリソースが必要になります。

セルフホスト型バンドラーのセットアップおよび保守に関する詳細な手順については、Sandpackからテレメトリを削除するなど、LibreChatのデプロイ向けに調整されたフォーク済みのCodeSandboxリポジトリを参照してください。

AI News 2024: オリジナルかつ最高のオープンソースAIチャットプラットフォームであるLibreChatが、Code Artifactsをリリース！この生成UIツールは、ブラウザ上で単一のプロンプトからReact、HTML、図を即座に生成できます。OLLAMA統合により、OpenAI、Anthropic、LLAMA、Mistral、DeepSeek Coderなど、あらゆるLLMで使用可能です。

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