Claude Canvas Turns Claude Code Into a Visual Terminal App!

Odd Code is already one of the most powerful AI coding agents that's out there, living inside your terminal, handling insane levels of complexity and actively upgrading your entire

development workflow. But lately, a new

development workflow. But lately, a new generation of frameworks have emerged that supercharge it even further. From

Ralph Loop's persistent execution model to AutoCloud's autonomous spec driven sub agents, Cloud Code just keeps evolving. And today I want to showcase

evolving. And today I want to showcase the next big upgrade. This is where I would like to introduce Cloud Canvas.

This is a TUI toolkit that gives Cloud Code its own dedicated display.

Essentially an external monitor for your AI agent. It spawns rich interactive

AI agent. It spawns rich interactive terminal interfaces for things like emails, calendars, flight bookings, and so much more. All directly within your

terminal. Just take a look at this demo.

terminal. Just take a look at this demo.

So, a lot of people are discovering Claude Code right now and they're using it for things other than coding. And I'm

also using Claude Code as like a personal agent and uh to help me run my business, draft an email to my co-founder Mark uh saying that I'm really excited to see him when he comes

to the Bay Area at the end of January.

So, I was using Claude Code to draft emails and I didn't like the experience of working on emails in a conversation.

So, I thought, what if Claude had its own monitor? What would that mean? So, I

own monitor? What would that mean? So, I

created a skill called Claude Canvas that lets Claude spawn new PES where it can draw interactive interfaces. Uh, and

this is just a simple example like when I'm writing emails to people, I like to see from to CC BCC subject and the message.

Oh, Jason's coming as well. Be sure to include him in the email.

So, this is helps me iterate in the way that I like. And uh, so yeah, this is how I like to compose emails with Claude. to sort of recommend it. Suggest

Claude. to sort of recommend it. Suggest

the email to me and shows it to the panel and then I can iterate on it. Um,

okay. I'm not going to send that email.

I need to book some time with our CTO Shay this week uh to talk to him about an upcoming project. Um, let's find a time that both he and I are available.

So, this was another use case that I had uh which was like booking a meeting with someone. And I have tools that give

someone. And I have tools that give Cloud Code access to uh uh Google calendar. Um but when it explained

calendar. Um but when it explained mutual availability in the conversation, it was kind of hard to keep track of. So

um this is Cloud Canvas uh with a specific scenario for visualizing, you know, when when people might be available. And um Claude Code really

available. And um Claude Code really embraces the terminal. So all of this is rendering in the terminal. And uh you can use your keyboard to find a time uh or you can uh you can click and it's

going to give me a second to confirm it.

And it's confirmed. And uh that information is uh communicated two-way with Claude. So so it can it can come

with Claude. So so it can it can come back and forth. Um and uh let's see one more um I need to book a flight uh to Denver this week. What are some options?

One more uh use case I had was my dream is that one of these agents will book travel for me. That just seems like the obvious lowhanging fruit or first use case for agents. Um but you know there's a lot of information when you're booking

a flight. So this is a scenario in cloud

a flight. So this is a scenario in cloud canvas for showing flight information and it's pretty basic but you know shows the seat map and all the little pieces of information I might care about and then you know if I want to compare different flight options it sort of

visualizes it all in this compact way and I can close it. So yeah those are my first scenarios uh in cloud canvas and I will open source it as a cloud plugin that you may want to try. Thanks.

>> Huge props to David for actually creating this and making this plug-in open source. I'll leave his Twitter in

open source. I'll leave his Twitter in the description below. But to get started, you have a couple of requirements. You're going to need to

requirements. You're going to need to make sure that you have bun installed used to run the skills tools as well as T-Max. The canvases spawn in a split

T-Max. The canvases spawn in a split pane because of this. So, make sure you have these two installed. You're

obviously going to need to make sure you have cloud code installed with a billing link to it so that you can actually use it. But something interesting that you

it. But something interesting that you can also use is this forked repo where someone was able to actually create another version of cloud canvas. But

essentially this one uses iTerm2 and Apple terminal as well. With this you have it so that it is definitely only for Mac OS specific users but it uses a

native terminal window and a pain API.

It is also going to be having you autoosition canvases automatically. It

has a smoother UX with this, but it is something that won't work for Windows, which is the only downside. And it won't work remotely and less portable in this particular use case. Just to reiterate,

if you do not have Cloud Code, I'll leave this in the description below cuz you will need this to have this started up. But once you have Cloud Code opened

up. But once you have Cloud Code opened up within your terminal, you can do that by typing in Claude. You can then go ahead and install this plugin by using

the /plugin marketplace command to add the cloud canvas to your cloud code.

Afterwards, you'll see that it has been added. And now what you got to do is

added. And now what you got to do is install the canvas plugin. And you can use the following command to do that as well. You have the option to install it

well. You have the option to install it for your own user scope or for all the collaborators of your workspace. I'm

going to be doing it for my scope. And

then once it has been installed, we can start using it directly within cloud code. Before we get started, I just want

code. Before we get started, I just want to mention that you should definitely go ahead and subscribe to the world of AI newsletter. I'm constantly posting

newsletter. I'm constantly posting different newsletters on a weekly basis.

So this is where you can easily get up-to-date knowledge about what is happening in the AI space. So definitely

go ahead and subscribe as this is completely for free. And just to showcase that it works, I simply just sent in a prompt to showcase different panes of T-Max working within our Cloud

Code terminal.

But you'll get to see that now with this enabled, your Cloud Code experience is going to be a lot better cuz you're going to be able to get better visualization of different prompts. And

obviously this is not something that is super incredible or anything, but it is just going to simply let you visualize this a lot better with your experience

with cloud code. It could be writing simple emails or it could be something where you're tracking a to-do list, but you're going to have a better experience

essentially with whatever sort of task that you're working with cloud code.

Here is an email draft that it had created. And you can see that you can

created. And you can see that you can visualize this directly within cloud code. And you can make changes directly

code. And you can make changes directly live in preview with this canvas. So

this is just another view. This is just a calendar app that was fully visualized within our cloud code session. Not an

app that it created, but thanks to T-Mox, it was able to visualize all of the dates. Now, it looks a little off

the dates. Now, it looks a little off cuz I don't have it properly formatted, but you can see that you get a good idea of what you can do with this canvas. You

can visualize things, you can write up emails, you can even have it work on flight details. And since I'm on

flight details. And since I'm on Windows, I believe my output isn't properly structured. Whereas on Mac OS,

properly structured. Whereas on Mac OS, you get better generation with T-Mux.

And you can see that a flight booking terminal looks absolutely amazing in this case on a Mac OS device. If you

like this video and would love to support the channel, you can consider donating to my channel through the super thanks option below. Or you can consider joining our private Discord where you

can access multiple subscriptions to different AI tools for free on a monthly basis, plus daily AI news and exclusive content, plus a lot more. But that's

basically guys for today's video on Cloud Canvas. This is just a small

Cloud Canvas. This is just a small toolkit that you can easily get started with that will definitely elevate your cloud code experience. These frameworks

that I'm showcasing nowadays are definitely things that you should take a look at cuz it truly enhances your overall development workflow a lot better. So, I'll leave all these links

better. So, I'll leave all these links in the description below so that you can easily get started. But with that thought, guys, thank you guys so much for watching. Make sure you subscribe to

for watching. Make sure you subscribe to the newsletter, join our second channel as well as our Discord, follow me on Twitter, and lastly, make sure you guys subscribe, turn on notification bell, like this video, and please take a look at our previous videos because there is

a lot of content that you'll truly benefit from. But with that thought,

benefit from. But with that thought, guys, have an amazing day, spread positivity, and I'll see you guys really shortly. He suffers.

shortly. He suffers.