AI for writing code is a hot topic these days. We've seen so many products coming out during 2024, it really caught my attention six months ago when I saw the Devin demo from Cognition (I'm still on the waiting list). Three months after Claude 3.5 Sonnet was released and it showed that it's the best model in the market for coding especially when used with Cursor. Anthropic added the artifacts to Claude a few months later bringing the ability to execute the code generated by the model directly in the browser.

OpenAI today jumped into the arena releasing Canvas and my initial reaction are very positive, I can see the team really took all the complexity that comes with a code editor and made it very simple to use with AI.

How to use Canvas?

If you head over to ChatGPT, you should be able to see the option to work with Canvas (you will need a ChatGPT Plus subscription to access it).

What makes it very simple is that you just get a regular chat window similar to what you get with the chat version of ChatGPT.
Once you prompt what you'd like to do, Canvas switches the interface into a code editor and starts writing the code. The chat functionality is still on the left hand side of the page whilst the right hand side has the code editor.

You can still chat with the AI about your code, ask questions, or request changes, just like in the regular ChatGPT interface. But now, you can see those changes happen in real-time in the code editor. It's a neat mixed of conversation and coding that feels pretty intuitive once you start using it.

Some interesting features

The interface is very clean and simple to use and it's definitely in a beta version but it gives you an idea of where OpenAI is heading with this.

A handy feature is that you can highlight a part of your code and ask ChatGPT to explain it or change it like you would do with Cursor or GitHub Copilot. This makes it easy to work on specific bits of your code with AI help.

The feature I like the most and gives a hint of how OpenAI is approaching coding is the little icon list on the right hand side

Here what each action does:

• Add comments - I find documenting the code very useful, AI can do part of it, I personally document the code on specific points to help the next devleoper that needs to deal with it.
• Add logs - Very useful when debugging, ChatGPT adds logs in the places where you need them.
• Fix Bug - It's interesting and probably aimed at people not very familiar with coding, by simply clicking the link you can fix bugs you might have in the code. I'll keep studing this functionality, it might be a great feature if AI is able to understand by itself that there are bugs in the code.
• Port to a language - This is one I didn't expect but makes sense, you can port the code to another language, the options are PHP, C++, Python, Javascript, Typescript and Java. I asked ChatGPT to port it to C++ and it did pretty well.
• Code Review - Developers do code review all the time, I like that it leaves the suggestions in little windows next to each line of code.

Conclusion

This is a very early beta mode but still shows how OpenAI is focusing in simplicity and making things easier to use for everyone, not only devleopers. The icons on the right hand side to comment, add logs, fix bugs, port to another language and reivew the code are very handy, they are probably the most used actions when writting code.

Once again we see Open AI focusing on making things that are intuitive and easy to use. This editor also confirms what I've seen in the OpenAI DevDay, the company seems to be shifting into focusing on making tools to write code, the market for this is huge and where most companies are going to invest in the next few years, from that perspective I think OpenAI is taking the right direction.

I hope you like this article, if you want to hear more follow me on X at @juanstoppa where I regularly post about AI.