Test Drive: Open Canvas
Published on .
Today I’m test driving Open Canvas, “an open source web application for collaborating with agents to better write documents.” I wanted to try the OpenAI Canvas but since I’m not a subscriber I was delighted to see this from LangChain. Understanding how agents work is crucial, so being able to dive into the source code is great. The process is simple since I’m using their hosted version:
- Go to https://open-canvas-lc.vercel.app/
- Do stuff
So let’s dig in a bit. I asked it to make a technical blog post and then gave it the source code to the agents folder and asked it to summarize. Based on the graphic from the README, the summary seems pretty good!
- src/agent/open-canvas: This directory contains the main components of the AI agent responsible for document creation and modification ⚙️.
- index.ts: This is the entry point for the agent’s operations. It sets up a state graph to manage the flow of tasks, such as generating new artifacts, updating existing ones, and handling user queries 🔄.
- nodes: This subdirectory contains various operations (or nodes) that the agent can perform:
- generateArtifact.ts: Handles the creation of new documents based on user input. It uses the OpenAI model to generate content and assigns metadata such as type, language, and title 🏷️.
- generateFollowup.ts: Generates a follow-up message after an artifact is created or updated, maintaining a conversational flow 💬.
- generatePath.ts: Determines the next action based on user input, such as whether to update an artifact, respond to a query, or create a new document ➡️.
- reflect.ts: Manages the reflection process, updating the system’s understanding of user preferences and style 🔍.
- respondToQuery.ts: Provides responses to user queries without generating new documents ❓.
- rewriteArtifact.ts: Updates entire documents based on user requests 🔄.
- rewriteArtifactTheme.ts: Modifies documents to change their style or format, such as adding emojis or changing the reading 🎨.
There’s a lot of cool things going in the UI
