Claude Now Builds Custom Interfaces to Plan Your Life
By Better Stack
Summary
Topics Covered
- AI becomes your terminal-based personal assistant
- AI can generate interactive UIs from prompts
- AI's future is personal life management
Full Transcript
Claude is not just being used to write code anymore. People are using it to
code anymore. People are using it to preview emails, schedule meetings, and even book flights all in the terminal thanks to a tool called Claude Canvas, created by the CEO of Glide Apps to turn
Claude Code into his own personal assistant. But how exactly does this
assistant. But how exactly does this work? And is this the future of AI
work? And is this the future of AI terminal coding agents? Hit subscribe
and let's find out.
It all started when David posted a tweet saying, "What if Claude had an external display?" here, followed by this amazing
display?" here, followed by this amazing demo that got an overwhelmingly positive response from developers and even the founder of Claude Code himself. The
whole thing is open source and is installed as a Claude plugin. But for
now, it needs to be run in a team session. There are ways to get around
session. There are ways to get around this which I'll explain later on in the video. From here, we can give it a
video. From here, we can give it a prompt like write an email from me rich@gmail.com to a friend ben@gmail.com telling them I'm looking forward to meeting them for lunch with a subject of
excited for lunch. Preview it using canvas spawn. And once we hit enter,
canvas spawn. And once we hit enter, Claude goes to work and it wrote the email but didn't put it in a split pane which happens sometimes. So let's give it another prompt. And now we can see a
preview of the email inside Claude with from to and a subject with a perfectly formatted email. Now if I had the Gmail
formatted email. Now if I had the Gmail MCP server installed and had it connected to my account, I'm sure some of these details like from and to would be automatically filled in, but I had to manually add them in the prompt for
demonstration purposes. Let's try
demonstration purposes. Let's try another example. I've written this
another example. I've written this prompt that says, "Book me a flight from London to Barcelona and spawn a preview with the canvas plug-in." Now, let's hit enter and click to go to work. And look
at that. It's propped the preview up first time. I'm going to zoom out so you
first time. I'm going to zoom out so you can see it better. And here we go. Here
are the flights I can choose. One at the top, $445. Another one here for 89. And
top, $445. Another one here for 89. And
I can select using arrow keys, which changes the seat map down here. There's
also a route over here with flight info showing departure and arrival times.
Now, if I press tab, I should be able to go to the seat selection and press spacebar to choose a seat. How cool is that? Again, this data isn't hooked up
that? Again, this data isn't hooked up to an MCP server or an external API.
Claude is actually making this information up, but you can see the potential here. Fret, the creator of
potential here. Fret, the creator of Astro, even mentions how cool it would be if Claude Canvas could generate UI on the fly based on the user's prompt, which would be insane. But first, let's
talk about why canvas needs to use T-max in the first place. The way it works is after it gets a prompt from the user, it triggers one of currently three skills, flight, document, and calendar. So for
example, clause will run the flight skill if a user asks to book me a flight. From here, it uses bun to run
flight. From here, it uses bun to run this CLI TypeScript file and passes in the relevant arguments. Spawn here is used to spawn a new T-mark split pane and it renders the UI using ink, the
same React library used to create claw code. Check out this video to learn all
code. Check out this video to learn all about it. But this is where things get
about it. But this is where things get interesting because the split T-Max pane can communicate back to Claude code and vice versa using a process called interprocess communication. So if a user
interprocess communication. So if a user picks a flight and seat in the splits pane, Claude can get that information.
But T-Max isn't the only option. In
fact, David originally started to use native Ghosty but used T-Max because it was easier. And there's also a fork from
was easier. And there's also a fork from a user that uses native iter and Apple terminal panes. All this is very cool,
terminal panes. All this is very cool, but is it the future of AI terminal coding assistants to turn them into our own personal assistants? Don't get me wrong, I use the terminal for almost everything. Writing scripts for this
everything. Writing scripts for this video, writing code, managing my files, and even ordering coffee. Okay, the last part was a joke. I don't drink coffee.
But although I can see myself scheduling a meeting or previewing an email in the terminal, there's no way I'm going to use it to book a flight. I'm sure I'll make a lot of mistakes. But I do think
this is the future. Sharing personal
details like emails, messages, and calendars with an AI agent makes so much sense, especially as developers, since we're so used to controlling our machines with natural language, it makes
sense to use it to control our personal lives as well. But here's something that could arguably help your personal life is by hitting the subscribe button and getting more of this awesome content sent straight to you. But it would also
help us get one step closer to hitting a 100K subscribers, which would be amazing. So go ahead and hit that
amazing. So go ahead and hit that button.
Loading video analysis...