Introduction

Yeah, so I'm going to quickly talk about Cloud Code Hooks.

Who of you is using Cloud Code Hooks or knows what it is? Okay, and who of you is writing software a lot with with cloud?

Okay, so maybe for a small percentage of the people in the room the next few minutes might be interesting thing and then after that I'm going to show something a little more visual which is cloud design because there's some quite nice things in that new cloud design tool that they launched what like two weeks ago.

Cloud Code Hooks: What They Are and Where They Fit

Okay so cloud code hooks

hooks are a feature that are part of cloud code that basically let you hook into every aspect of the cloud lifecycle if you talk to cloud code and you write a prompt and then cloud does its thing and comes back between these two events a lot of hooks fire

like now i'm going to start to use a tool now i'm going to finish now i'm finished using a tool now i'm going to start the user to ask for some permission now i'm finished so there's a couple of these lifecycle hooks and what you can do with hooks is that you can declare that you want to run

certain operations whenever these hooks occur and you don't want cloud code to run them but you want to run some deterministic scripts and that's for example useful when you want to say hey Claude whenever I you write code after that I would like you to reformat it according to our coding standards and then Claude might or might not do that when you just put it in rules but if you want to if you put it in a hook then it's deterministic then it's a script that runs at

a certain time while Claude is going through through your code and does stuff and I'm going going to quickly show you how that works so in in the thing that i'm going to show soon i'm going to use two three different four different hooks and the list down here these are all the hooks

that are currently in in cloud code they're called like life circle hooks like one that fires when the session starts one that fires when it's loaded in instruction that's useful for example if you want to make sure hey does it really read my my cloud nd or something there's hooks yeah before and after tool uses before and after it creates tasks or creates git trees and

all that so there's plenty of hooks you don't need to use most of them ever but they are there the ones that I'm going to use hooks that it's that run before and after it's using tools because that's when I want it to to make changes

Why Use Hooks: Enforcing Standards with Deterministic Scripts

to the files that it just wrote and the way that works is so usually if you write software you have certain ideas certain coding standards called like linting rules like how you want your code formatted you want to make sure that certain things certain patterns are not being used you want to make sure

that it's naming variables and functions in a certain way and of course there's already solutions for that you can do that before you commit your code into git you can run it on the command line whenever you want but what I wanted to

have is that I want whenever Claude has touched code after that I wanted to be already linted I don't even want to see it in an unformatted way or whatever and for this I have set up something which basically runs at two places it runs

A Practical Pattern: Queue Files on Tool Use, Then Lint on Stop

whenever Claude has written code in using its edit tool then what what happens is that it's putting a file in a queue it's putting a file when it was this one here means when it was a markdown or CSS or a typescript or a TSX file then I want you to put that file name in a queue and this runs at

the post tool use here that runs whenever Claude has used his tool to his edit tool or his write tool to make it changes to a file or create a new file then there's one other hook which is the stop hook that's when Claude says okay I'm done with my turn and I'm handing back over to the user and then it's going

starting running another hook that looks at all the files that have been put in the queue and runs the the formatting and linting tools that i wanted to run and why do i put it in

a queue very often when you see when you see with youtube videos about people who tell you how to use cloud hooks they always say yeah you just have this pulse post tool use hook that lints your file after you after cloud is done but the thing is within one turn cloud touches the same file maybe 10 times it's and it's nonsense to run the same linter over the same file 10 times you just let

it finish all its editing during for the turn and then once you have a list of all the files it's touched and then you once uh and then you once uh lint the files so that's that's one thing um for me has been working super well and um that's something that you can use just by um

adding two hooks one for the edit right tool and one for the like one post tool use for the edit right and one for the stop hook and with these two lifecycle hooks you can say hey whatever file you edit change during our last conversation turn I want you now to do those tools

with it I mean you could do other things instead of linting them you could just put them in a list of of files so that you can later have a good overview all the files that cloud works on or whatever and as I said so there's these

Going Further: Using Many Hooks and an HTTP Hook for Observability

28 other hooks and what you can do when when you use all of them which I've also done you can build something that whenever cloud does any of those things

so that at any lifecycle event I'm calling something which is called an HTTP hook which is I'm just calling I'm just asking cloud to make a post request to some to some small tool that I've built and that small tool that that basically that's a session dashboard that shows me whatever

cloud has has worked on and and that tool for example you Michael you can use that you find to find your prompts back because I'm pretty sure they're still on your machine so you can probably find them and going forward with a tool like this you can you can then also always in real

Live Demo: A Real-Time Session Dashboard

time see what's going on I'm just going to show you how the tool looks like so this one for example

you can see here it's it's basically firing in real time I just had it running a few minutes ago those timestamps are UTC though they are one hour behind sorry they're one so that happened actually at 1852 so when I'm just so I leave this window open and I'm going to

just open plot and just ask you to do something maybe create a new session here just say write a new slide after the last that says thank you again it doesn't matter I just want to write anything because what you can now see in in that browser tool when I find my browser again.

Sorry. You can now see that's happening in real time. See, it's using tools, it's reading that HTML file which is the thing, oh, it's already done.

So that was actually pretty uninteresting because it just took a couple of things, it made edits to the file and it's done.

And what you can see here is that for each tool, it can say, hey look, I used this tool, it was this file path and I opened that file and then I did a couple of things. and then here I was done and send it back to the user maybe it's a little bit

more interesting you can see that earlier and when you start a new session you can see what kind of instructions does it load I load it loaded this users cloud MD file and then it loaded a couple of another files and related rule files so it's very interesting for introspection as well and then the other

thing you can do is I can here I have a list of all my sessions and then in that list of sessions I can import every session I can look at all my prompts that I ever sent to Claude and basically can look at what Claude's answer was to that I can go to every session can import that session for right now for the talk April and then in here in my

Transition: From Hooks to Cloud Design

session data so this is now loading this is basically the session data that that contains the transcription of everything that I've done during that session okay that's was the technical part of the talk and now I'm going to talk a little bit or I'm going to show you the new cloud design.

Yeah, you can see what can be done and hopefully you're motivated. For those of you who are experts, we've got some ideas because it's really fascinating. Pardon?

The hooks are in a settings file in the sessions file, but you can also for every skill define a skill specific hooks. So every individual skill that you write also has in the front matter you can define the hooks for that skill.

Okay so now I'm going to show cloud design.

Cloud Design (Research Preview): Capabilities and Workflow

Cloud design was released last week or two weeks ago. It's currently a research preview.

I already started a new project which I called AI Meetup and here you can start with a couple of different things.

You can upload your own design system, if you have one you can upload a whole code base or a Figma file.

What I'm going to do is, I just took a screenshot of Michael's website, because I just thought maybe that's a good thing to do. Let me just see where it is. Metacompiler PNG, here we go. So what I'm going to ask you to do is basically just create a design for that website.

Demo Setup: Designing from a Screenshot or Existing Site

said because why not and what's nice about cloud design is that it's going well if it's doing that thing it's a little different every time but usually oh wow couldn't upload one file it might be it might be too large because I took I took the whole node screenshot from this thing sorry about that maybe let me just see downloads yeah what what I uploaded here the meta compiler compiler. This is, oh no, that is actually not large. That should have worked.

Okay. It's very annoying. I'm going to try that one more time. If not, I'm going to send Glot to the website instead. It should have totally worked, right? It's a tiny.

Okay, in case that doesn't work, I'm just going to ask it to go to the website and obtain some information from there and then create a design for it.

Where's my cloud design? Okay, fine. It's a real shame. Open this website about a sci -fi book, create a modern, create a fresh modern design.

So what it will do is it will ask a couple of question hopefully like what's the audience gonna be, what the content is going to be, so it it takes you to the process that usually if you would be a company giving a desire wanting to create a design that's something like your your design agency would write you some some questionnaire

it would give you sorry higher sorry okay I'm going to try and speak up so I said it's going to ask a couple of questions which is similar to the questionnaire that a design agency would would usually ask you, hey, what's the target audience, how many of this, how many of that, and so on,

and what's the tone and all that. So let's see if it does that.

When Demos Fail: Connectivity Issues and a Service Outage

See, here it says something like deadline exceeded upstream timeout. I'm wondering if cloud design has an extra problem. We are online here, right?

Oh, now I get a 404 even, wow. That hasn't happened before.

But wait, am I online? I am online? online? Can't reach cloud code.

Did we pick a horrible moment to try that? Now it's there. Okay, let's try one more time then.

404. Wow, that's amazing. That was there a second ago. You've seen it.

Okay, wow. Pun? I mean, oh well, something is red. That's not good.

Major outage. All right.

Maybe we do the panel discussion first and we try again in the meantime. So

Wrap-Up

Really wanted to show you cloth design.