open canvas

打開畫布

在這裡嘗試一下

Open Canvas 是一個開源 Web 應用程序，用於與代理協作更好地編寫文件。它的靈感來自 OpenAI 的“Canvas”，但有一些關鍵的區別。

1. 開源：所有程式碼，從前端到內容生成代理，再到反射代理都是開源的並獲得 MIT 許可。

2. 內建記憶體：Open Canvas 開箱即用，帶有反射代理，該代理將樣式規則和使用者見解儲存在共享記憶體儲存中。這使得 Open Canvas 能夠在各個會話中記住有關您的事實。

3. 從現有文件開始：Open Canvas 允許使用者從空白文字或他們選擇的語言的程式碼編輯器開始，從而允許您使用現有內容啟動會話，而不是被迫從聊天互動開始。我們相信這是一個理想的使用者體驗，因為很多時候您已經有一些內容可以開始，並且想要在其之上進行迭代。

特徵

• 記憶：Open Canvas 有一個內建的記憶系統，它會自動產生關於您以及您的聊天記錄的反思和記憶。然後將這些內容包含在後續的聊天互動中，以提供更個人化的體驗。

• 自訂快速操作：自訂快速操作可讓您定義與您的使用者相關的自己的提示，並在會話中持續存在。然後，只需單擊一下即可輕鬆調用這些內容，並將其應用於您目前正在查看的工件。

• 預先建置的快速操作：還有一系列預先建置的快速操作，用於始終可用的常見寫作和編碼任務。

• 工件版本控制：所有工件都有一個與其關聯的“版本”，可讓您回到過去並查看工件的先前版本。

• 程式碼、Markdown 或兩者：工件視圖允許檢視和編輯程式碼和 Markdown。您甚至可以進行產生程式碼和 Markdown 工件的聊天，並在它們之間進行切換。

• 即時 Markdown 渲染和編輯：打開 Canvas 的 Markdown 編輯器，您可以在編輯時查看渲染的 Markdown，而無需來回切換。

如何使用

您可以造訪 opencanvas.langchain.com 免費使用我們部署的版本

或者

您可以克隆此存儲庫並在本地運行/部署到您自己的雲端。有關如何執行此操作的步驟，請參閱下一節。

發展

運行或開發 Open Canvas 非常簡單。首先克隆此存儲庫並導航到該目錄。

 git 克隆 https://github.com/langchain-ai/open-canvas.gitcd open-canvas

接下來，透過 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。
NEXT_PUBLIC_SUPABASE_ANON_KEY=

最後，啟動開發伺服器：

紗線開發

然後，用瀏覽器開啟 localhost:3000 並開始互動！

您也可以在此處觀看有關如何在本地設定 Open Canvas 的簡短（2 分鐘）影片演練。

法學碩士模型

Open Canvas 旨在與任何 LLM 模型相容。目前部署配置了以下模型：

• 人類克勞德 3 俳句？ ：Haiku 是 Anthropic 最快的模型，非常適合快速執行任務，例如編輯文件。在此註冊 Anthropic 帳戶。

• 煙火駱駝 3 70B ？ ：Llama 3 是 Meta 的 SOTA 開源模型，由 Fireworks AI 提供支援。您可以在這裡註冊一個帳戶。

• 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，並希望得到您的幫助！

首先，有一些 GitHub 問題，其中包含功能請求，概述了改進和添加內容，以使應用程式的使用者體驗變得更好。主要有以下三個標籤：

• frontend ：此標籤已新增至以 UI 為中心的問題，並且不需要對代理商進行太多工作（如果有的話）。

• ai ：此標籤已添加到專注於改進 LLM 代理程式的問題中。

• fullstack ：此標籤新增至需要同時接觸前端和代理程式碼的問題。

如果您對貢獻有疑問，請透過電子郵件與我聯繫： brace(at)langchain(dot)dev 。對於程式碼的一般錯誤/問題，請在 GitHub 上提出問題。