Artifacts - 생성형 UI

React 컴포넌트, HTML 코드, Mermaid 다이어그램을 즉시 생성할 수 있는 LibreChat의 혁신적인 Artifacts 기능을 살펴보세요.

Generative UI: React 컴포넌트, HTML 코드 및 Mermaid 다이어그램 생성
유연한 통합: 설정한 모든 모델을 사용하세요
반복적 설계: 생성된 결과물을 신속하게 개선하고 정교화합니다.
에이전트 통합: 에이전트 수준에서 아티팩트(artifacts)를 구성하세요(권장 방식).

참고: 이제 아티팩트(artifacts)를 사용하는 권장 방식은 Agents 기능을 통하는 것입니다. 이를 통해 앱 전체가 아닌 에이전트 수준에서 아티팩트를 활성화하거나 비활성화하여 더 세밀하게 제어할 수 있습니다.

LibreChat의 코드 아티팩트 주요 기능:

생성형 AI를 활용한 웹사이트 및 UI의 즉각적인 프로토타이핑
동적이고 반응형인 레이아웃을 손쉽게 생성
React 및 HTML을 위한 대화형 학습 환경
Mermaid 다이어그램을 사용한 복잡한 아이디어 시각화
AI 기반의 직관적이고 사용자 중심적인 디자인 반복 작업
유료 AI 도구에 대한 무료 오픈 소스 대안

LibreChat의 생성형 기능을 통해 UI/UX 디자인과 개발의 미래를 경험해 보세요. 그 어느 때보다 빠르게 아이디어를 현실로 구현할 수 있습니다!

Content-Security-Policy

Artifacts 패널에서 생성된 HTML 앱을 로드하려면 웹 서버의 Content-Security-Policy를 업데이트하여 frame-src 'self' https://*.codesandbox.io를 포함해야 할 수도 있습니다. 이는 sandpack 라이브러리의 의존성입니다.

Sandpack Bundler 자체 호스팅

LibreChat의 Artifacts는 CodeSandbox의 Sandpack 라이브러리를 사용하여 HTML/JS 코드를 안전하게 렌더링합니다. 기본적으로 LibreChat은 CodeSandbox의 공개 CDN에 연결되며, 이 과정에서 사용량에 대한 원격 분석(telemetry) 데이터가 전송될 수 있습니다.

향상된 개인정보 보호, 보안 규정 준수 또는 격리된 네트워크 환경을 위해 번들러를 자체 호스팅할 수 있습니다.

Sandpack Bundler를 직접 호스팅하는 이유는 무엇인가요?

Self-hosting the bundler를 직접 호스팅하면 다음과 같은 몇 가지 이점이 있습니다:

개인정보 보호 및 보안: 코드 실행을 자체 인프라 내에서 유지하세요
신뢰성: 외부 서비스에 대한 의존성 제거
성능: 네트워크 내에서 번들러를 호스팅하여 지연 시간을 줄이십시오.
준수(Compliance): 조직의 데이터 처리 요구 사항 충족
제어(Control): 특정 요구 사항에 맞게 구성하고 사용자 지정하세요

구성

자체 호스팅 번들러를 설정한 후, 환경 변수를 설정하여 LibreChat이 이를 사용하도록 구성하기만 하면 됩니다:

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

일반적인 고려 사항

번들러를 직접 호스팅하면 몇 가지 추가적인 오버헤드가 발생합니다:

CORS Configuration: 교차 출처 리소스 공유(CORS) 정책을 관리해야 합니다.
보안 관리: 귀하는 번들러 서비스의 보안에 대한 책임을 지게 됩니다.
유지보수: 업데이트 및 패치는 수동으로 적용해야 합니다.
리소스 요구 사항: 번들러를 호스팅하려면 추가 서버 리소스가 필요합니다.

자체 호스팅 번들러를 설정하고 유지 관리하는 방법에 대한 자세한 지침은 Sandpack에서 원격 분석(telemetry)을 제거하는 등 LibreChat 배포에 맞게 조정된 forked CodeSandbox repository를 참조하세요.

AI 뉴스 2024: 독창적이고 최고의 오픈 소스 AI 채팅 플랫폼인 LibreChat이 Code Artifacts를 출시했습니다! 이 생성형 UI 도구는 OLLAMA 통합 덕분에 브라우저에서 단일 프롬프트만으로 React, HTML 및 다이어그램을 즉시 생성할 수 있으며, OpenAI, Anthropic, LLAMA, Mistral, DeepSeek Coder 등 모든 LLM과 함께 사용할 수 있습니다.

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