홈페이지>프로그래밍 관련>기타 소스코드
다운로드

캔버스 열기

여기에서 시험해 보세요

앱 스크린샷

Open Canvas는 에이전트와 협력하여 더 나은 문서 작성을 위한 오픈 소스 웹 애플리케이션입니다. OpenAI의 "캔버스"에서 영감을 얻었지만 몇 가지 주요 차이점이 있습니다.

  1. 오픈 소스 : 프런트엔드부터 콘텐츠 생성 에이전트, 리플렉션 에이전트까지 모든 코드는 오픈 소스이며 MIT 라이선스입니다.

  2. 내장 메모리 : Open Canvas는 스타일 규칙과 사용자 통찰력을 공유 메모리 저장소에 저장하는 리플렉션 에이전트와 함께 기본적으로 제공됩니다. 이를 통해 Open Canvas는 세션 전반에 걸쳐 귀하에 대한 사실을 기억할 수 있습니다.

  3. 기존 문서에서 시작 : Open Canvas를 사용하면 사용자가 빈 텍스트 또는 선택한 언어의 코드 편집기로 시작할 수 있으므로 강제로 채팅 상호 작용을 시작하는 대신 기존 콘텐츠로 세션을 시작할 수 있습니다. 우리는 이것이 이상적인 UX라고 믿습니다. 이미 시작할 콘텐츠가 있고 그 위에서 반복하고 싶기 때문입니다.

특징

  • 메모리 : Open Canvas에는 사용자에 대한 반성과 추억, 그리고 채팅 기록을 자동으로 생성하는 메모리 시스템이 내장되어 있습니다. 그런 다음 이는 보다 개인화된 경험을 제공하기 위해 후속 채팅 상호 작용에 포함됩니다.

  • 사용자 정의 빠른 작업 : 사용자 정의 빠른 작업을 사용하면 사용자와 연결되고 세션 전반에 걸쳐 지속되는 고유한 프롬프트를 정의할 수 있습니다. 그런 다음 한 번의 클릭으로 쉽게 호출할 수 있으며 현재 보고 있는 아티팩트에 적용할 수 있습니다.

  • 사전 구축된 빠른 작업 : 항상 사용할 수 있는 일반적인 쓰기 및 코딩 작업을 위한 일련의 사전 구축된 빠른 작업도 있습니다.

  • 아티팩트 버전 관리 : 모든 아티팩트에는 "버전"이 연결되어 있으므로 시간을 거슬러 올라가 아티팩트의 이전 버전을 볼 수 있습니다.

  • 코드, 마크다운 또는 둘 다 : 아티팩트 보기를 사용하면 코드와 마크다운을 모두 보고 편집할 수 있습니다. 코드와 마크다운 아티팩트를 생성하고 이들 사이를 전환하는 채팅을 할 수도 있습니다.

  • 실시간 마크다운 렌더링 및 편집 : Open Canvas의 마크다운 편집기를 사용하면 편집하는 동안 앞뒤로 전환할 필요 없이 렌더링된 마크다운을 볼 수 있습니다.

사용방법

opencanvas.langchain.com을 방문하면 배포된 버전을 무료로 사용할 수 있습니다.

또는

이 리포지토리를 복제하고 로컬로 실행하거나 자체 클라우드에 배포할 수 있습니다. 이 작업을 수행하는 방법에 대한 단계는 다음 섹션을 참조하세요.

오픈 캔버스 그래프의 다이어그램

개발

Open Canvas를 실행하거나 개발하는 것은 쉽습니다. 이 저장소를 복제하고 디렉터리로 이동하여 시작하세요.

 자식 클론 https://github.com/langchain-ai/open-canvas.gitcd 오픈 캔버스

다음으로 Yarn을 통해 종속성을 설치합니다.

 원사 설치

그런 다음 로컬에서 그래프를 실행하는 데 필요한 LangGraph Studio를 설치하거나 LangSmith 계정을 만들어 LangGraph Cloud의 프로덕션에 배포하세요.

그런 다음 .env.example 파일 내용을 .env 에 복사하고 필요한 값을 설정합니다.

 # LangSmith 추적LANGCHAIN_TRACING_V2=true
LANGCHAIN_API_KEY=# LLM API 키# 반사에 사용되는 AnthropicANTHROPIC_API_KEY=# 콘텐츠 생성에 사용되는 OpenAIOPENAI_API_KEY=# LangGraph 배포 또는 LangGraph Studio를 통한 로컬 개발 서버.# 로컬에서 실행하는 경우 이 URL은 `constants.ts` 파일에 설정되어야 합니다. # LANGGRAPH_API_URL=# 인증용 Supabase# 공개 키NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

마지막으로 개발 서버를 시작합니다.

 원사 개발

그런 다음 브라우저에서 localhost:3000을 열고 상호 작용을 시작하세요!

여기에서 Open Canvas를 로컬로 설정하는 방법에 대한 짧은(2분) 비디오 연습을 시청할 수도 있습니다.

LLM 모델

Open Canvas는 모든 LLM 모델과 호환되도록 설계되었습니다. 현재 배포에는 다음 모델이 구성되어 있습니다.

  • 인류애 클로드 3 하이쿠 ? : Haiku는 Anthropic의 가장 빠른 모델로, 문서 편집과 같은 빠른 작업에 적합합니다. 여기에서 Anthropic 계정에 가입하세요.

  • 불꽃놀이 라마 3 70B? : Llama 3은 Fireworks AI를 기반으로 하는 Meta의 SOTA 오픈 소스 모델입니다. 여기에서 계정을 등록할 수 있습니다.

  • OpenAI GPT 4o 미니? : GPT 4o Mini는 OpenAI의 최신, 최소형 모델입니다. 여기에서 API 키를 등록할 수 있습니다.

새 모델을 추가하려면 다음의 간단한 단계를 따르세요.

  1. constants.ts 에서 모델 공급자 변수를 추가하거나 업데이트합니다.

  2. 공급자에 필요한 패키지를 설치합니다(예: @langchain/anthropic ).

  3. 새 모델 이름과 공급자를 포함하도록 src/agent/utils.ts 의 getModelNameAndProviderFromConfig 함수를 업데이트하세요.

  4. 다음을 확인하여 수동으로 테스트하세요.

  • 4a. 새 아티팩트 생성

  • 4b. 후속 메시지 생성(아티팩트 생성 후 자동으로 발생)

  • 4c. 채팅 메시지를 통해 아티팩트 업데이트

  • 4d. 빠른 작업을 통해 아티팩트 업데이트

  • 4e. 텍스트/코드에 대해 반복합니다(두 가지 모두 작동하는지 확인).

로드맵

특징

다음은 가까운 시일 내에 Open Canvas에 추가할 기능 목록입니다.

  • 편집기에서 React 렌더링 : 이상적으로는 Open Canvas에서 React(또는 HTML) 코드를 생성했다면 편집기에서 실시간으로 렌더링할 수 있어야 합니다. 수정 : 현재 기획 단계입니다!

  • 다중 어시스턴트 : 사용자는 각각 자신만의 메모리 저장소를 갖는 여러 어시스턴트를 생성할 수 있어야 합니다.

  • 보조자에게 사용자 정의 '도구' 제공 : LangGraph.js에서 RemoteGraph 구현하면 사용자는 보조자에게 자신의 그래프를 도구로 호출할 수 있는 액세스 권한을 부여할 수 있어야 합니다. 즉, 현재 이벤트, 개인 지식 그래프 등에 액세스할 수 있도록 어시스턴트를 맞춤 설정할 수 있습니다.

기능 요청이 있나요? 이슈를 열어주세요!

기여

우리는 계속해서 Open Canvas를 개발하고 개선하고 싶습니다. 여러분의 도움이 필요합니다!

시작하려면 앱의 UX를 더욱 향상시키기 위한 개선 사항 및 추가 사항을 간략하게 설명하는 기능 요청과 관련된 몇 가지 GitHub 문제가 있습니다. 세 가지 주요 라벨이 있습니다:

  • frontend : 이 라벨은 UI에 중점을 두고 에이전트에 대한 작업이 많이 필요하지 않은 문제에 추가됩니다.

  • ai : 이 라벨은 LLM 에이전트 개선에 초점을 맞춘 이슈에 추가됩니다.

  • fullstack : 이 라벨은 프런트엔드와 에이전트 코드를 모두 터치해야 하는 문제에 추가됩니다.

기여에 대해 궁금한 점이 있으면 이메일 brace(at)langchain(dot)dev 통해 저에게 연락해 주세요. 코드와 관련된 일반적인 버그/문제의 경우 GitHub에서 문제를 열어주세요.

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체