ChatGPT Canvas: A Guide With Examples

How to Use ChatGPT Canvas

Currently, ChatGPT Canvas is available only on the Web and Windows (Mac users can access Canvas through their browser but not via the desktop app). Support for the Mac desktop app and mobile platforms (iOS, Android, and mobile web) is coming soon.

To use ChatGPT Canvas:

1. Go to chatgpt.com.
2. Select the "GPT-4o with canvas" option in the model dropdown located in the top left corner (note that you’ll need a subscription to use Canvas).

The interface is initially the same as the traditional chat interface. After providing a prompt, the editor will open, and it will be populated with the content generated from the first prompt.

In some situations, the Canvas interface won't trigger automatically. In these cases, we can manually activate it using the "use canvas" prompt.

The initial prompt will determine whether we are working on text content, such as a blog, or working on code. The interface and available commands will be different in each case.

Let’s start by exploring the two main ways we can interact with ChatGPT Canvas (these are available in both text and code mode).

1. Select text on the editor side (right-hand side). This will show a prompt pop-up where we can request changes to the selected section.

2. Use the chat interface on the left. We can use it to submit a prompt requesting specific changes.

Versioning and exporting

ChatGPT Canvas keeps track of the changes we make. We can easily move between different versions using the arrows in the top right corner (these buttons will only appear after ChatGPT generates the second version).

The first button can be used to show the difference between the current version and the last version.

I find this very useful for understanding what the commands do and learning how to improve my writing by seeing the improvements added by ChatGPT.

The last button exports the content. It’s still rudimentary and simply allows us to copy it, which we then have to manually paste wherever we need to.

Text specific tools

When ChatGPT determines that the original prompt requests writing a text document, it will open the Canvas editor in text mode. Content with mixed text and code sections will also have this interface.

For example, the text examples shown in this article use the following initial prompt:

“Help me write an article introducing pandas Dataframes.”

The specific editing tools are located in the bottom right corner. When working on a text document, we get the following tools:

• Add emojis: Adds emojis to the text where appropriate. In my opinion, it’s more of a gimmick than something we’ll actually use.
• Add final polish: Reviews the whole document and gives it a final touch to make it ready for delivery. It fixes typos, formatting, and structure.
• Reading level: Adjusts the reading level of the document from kindergarten level to graduate level. This is quite useful to ensure that our content is written in a language that’s adapted to our target audience.
• Adjust the length: Adjusts the length of the text by either condensing it by summarizing some parts of it or extending it by going into more details.
• Suggest edits: Suggests edits but doesn’t apply them automatically. Each suggestion will highlight the text and show the suggestion next to it, similarly to other collaborative text editors. We can either incorporate or ignore each suggestion in the document.

• Paragraph Edit: Once in “suggests edit” mode, ChatGPT will identify the paragraphs in the text. Moving the cursor on top of a paragraph shows a button that we can use to prompt an edit to that specific paragraph.

When we click on one of the commands, it is not executed immediately. The icon will change to an arrow, and we need to click it again to execute it.

As we use these tools, keeping an eye on the chat window is important because ChatGPT will explain the changes it made there. This makes it easy to get a quick understanding of what was modified. Another way to see the changes is to use the diff button on the top right corner we mentioned above.

Code specific tools

When the initial prompt is about writing a script, ChatGPT Canvas will open a code editor instead of the text editor. To test this, we can use the following prompt:

“Write a Python script that reads and analyzes a CSV using pandas.”

We can identify that we are in the code editor mode by the line numbers on the editor. In this case, we get the following tools:

• Add comments: Adds relevant comments to the code for better understanding.
• Add logs: Adds print statements that display the value of variables that ChatGPT finds relevant. 
• Fix bugs: Tries to identify and fix bugs.
• Port to a language: Converts the code into another language.
• Code review: Reviews the code and adds suggestions on the side.

On the newest version of ChatGPT Canvas, we can run Python code directly within the Canvas.

Training GPT-4o for Collaboration: Behind the Scenes

To train GPT-4o to function effectively as a collaborative partner within the Canvas interface, OpenAI's research team focused on developing several core behaviors:

• Triggering the Canvas for both writing and coding tasks.
• Generating diverse content types to meet user needs.
• Making targeted edits to specific sections of text or code.
• Rewriting entire documents when necessary.
• Providing inline critique to offer specific feedback and suggestions.

This training involved using novel synthetic data generation techniques, including distilling outputs from other OpenAI models, such as the o1 model. This approach enabled rapid improvement in writing quality and user interactions without relying on human-generated data.

Evaluation and challenges

OpenAI utilized over twenty automated internal evaluations to measure progress.  However, certain aspects, such as comment quality, required human evaluation due to the difficulty of automated assessment.  

Training presented several challenges:

• Defining when to trigger the Canvas, ensuring it opens for appropriate tasks while avoiding over-triggering.  
• Tuning the model's editing behavior, specifically determining when to make targeted edits versus rewriting entire content.
• Generating high-quality comments required careful iteration and human evaluation.

Conclusion

Before ChatGPT Canvas, using ChatGPT to work on a document or piece of code required constantly switching between the editor and ChatGPT, copying the changes proposed with each chat message. We couldn't work on the whole document at once, and ChatGPT didn't easily have the full context of what we were working on or the ability to make changes directly.

ChatGPT Canvas makes it much easier to collaborate with ChatGPT while writing content or code. For writing content, such as a blog post, it is quite powerful.

However, as a software engineer, I still feel it's too limited for writing code involving larger projects. Solutions like Cursor AI, which integrate directly with the code editor, are much more effective because they have context about the entire codebase. I would only use ChatGPT Canvas for writing isolated scripts or functions that don't depend on other code.