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 进行本地开发服务器。# 如果在本地运行，则应在 `constants.ts` 文件中设置此 URL。 # LANGGRAPH_API_URL=# Supabase 用于身份验证# 公钥NEXT_PUBLIC_SUPABASE_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 上提出问题。