Using Claude Code to build a Monthly Brief Generator

All right, so let's get started.

what we're going to do first is we're going to write the spec or the project brief.

and this is really important.

so you can do it in your favorite word processor and you know there's all sorts of different templates you can use for this, but you can just do it from scratch.

So what we're going to do is we're going to build a newsletter generator.

So the idea I have in mind is there are many meditation retreats being hosted in the tri state area in New York and it would be great to be able to send a newsletter not just to myself but to interested friends maybe monthly about upcoming retreats and particularly in the non dual meditation lineages.

were.

So that's what we're going to do.

I could probably record all this over voice and, and give it straight to an LLM but I like to write so so already what I'm noticing is as I write this I'm bringing in a lot of background knowledge.

I have an idea of like an agentic interface things.

This is primarily going to be generated through chat, and I also have in mind that this is kind of going to be a configurable web app because I want this to be interesting to you too.

And so many organizations want to send newsletters for many different reasons or just any kind of email brief on a weekly or monthly basis.

So I want you to see that so because I trained as a product manager for many years, it's pretty easy for me to break down a somewhat complicated project into small components.

But that's a good skill for anyone to develop.

So the components of this clearly are, you know, we need a tool that does web research.

It needs to draft an email, it needs to send an email.

I want stats on the email and then we need cadence and triggers for drafting and sending the email.

so each of those on its own is sort of its own little feature or mini product and so the work can spread across these focus on web research first.

And I've already been Thinking about this.

So I'm going to consult previous chats to find the sources that I've come up with.

So you can see here, In a previous ChatGPT interaction we got a list of several.

Websites.

that I'm pasting in here.

And I'm not worrying too much about formatting.

I trust that the system will turn this into some kind of structured list.

So that's a pretty good start.

really I'm going to keep it simple here.

So I could have added.

I called this web research but this is really actually web.

I'll call it Web Research.

And then the second piece is something like In a web extraction.

Right.

So the web research piece is trying to find information.

The extraction is actually pulling out the web content.

I'm going to say like not handled by the tool.

So I think that's a v2 feature.

Right.

So I already have a solid list of websites through my own deep research on ChatGPT.

This tool is not going to do additional web research.

but I'm just explaining that here, saying that's a V2, in other words a future version.

And I think it's good to include the things that you don't want to include.

Right.

Say like we're not doing that.

that can be helpful as well.

So web research is done, web extraction is done.

Email drafting, so because I have a little bit of technical knowledge on email, I'm explicitly mentioning the RESEND API which is one way to send email.

and I'm thinking to myself that probably like a mailchimp, I would want to be able to preview the email, either in a web preview or a test send or both.

In terms of email stats, not that important, but I'll just say whatever Resend permits.

agent runs automatically on 25th of each month and scans websites for next two months of retreats.

Example August 25th agent prepares email for that includes retreats coming up in September October.

So we're getting pretty close here to a basic brief.

the only thing that I'm not sure how to handle yet is like let's say the agent prepares an email and I want to make certain changes like delete this or delete that.

Whether I want to do that in the web editor.

Right.

And like change the email myself or prompt it to change the email.

If I'm changing the email in certain ways that I kind of want to always change.

Like I Don't like the way you format this.

So the difference between like one off changes and structural changes, I don't really know how to do that.

So I'm just going to add a section called like Open Questions, you know, how can the user steer the email drafting for both one off changes and structural changes?

You know, for example, remove this event example, you know, use fewer emojis headers.

But I think this is a good enough start.

So what I'm going to do now is I'm just going to export this to Markdown.

So now I have a markdown file.

And so that's been about 15 minutes there.

now I'm going to open up.

Why don't I open up Claude code so that I've got something that will look like what you have.

So this is cloud code.

you can see here I'm working locally, which is fine.

And I'm going to create a new folder here and I'm going to call this Tri State Trica, which is just kind of my project name for this.

Trica is a kind of meditation style.

to.

Okay, so now I've got my folder.

And remember that a web app or piece of software is ultimately just a folder or a series of folders that are nested inside each other.

So when an engineer is running some website or building some website or an application, they have that whole application on their computer in folders.

They work in those folders creating files.

And then when they're ready, they run that application locally on their machine before ultimately deploying it on production.

And that deployment process is where things like GitHub come in, pushing to GitHub where the, where the project folders are stored.

And then you need a server like Vercel is a popular one now that knows how to read and ultimately host the web application.

But before you do any of that, you can run it locally without any kind of deployment tools.

And so that's where we'll start.

So I'm just going to drop in my markdown file.

I, think that worked.

And then I'm going to say build this.

the one thing that I didn't do enough of is specify what I have in mind when it comes to the agent.

Now in previous projects I've done a lot of agent first building and so what I could do is I could export from that project kind of my details of what I want.

But I think instead, since I'm just here, I'm going to say adhere to the Vercel AI SDK when building agent piece out.

so again, just as it's helpful to have technical knowledge with email and you can just say, use the resend API here, I know that Vercel has a good agentic SDK that we're going to use.

but if I, if I was spending more time on this, I would go back to the spec and I would detail out a lot of things around, what I want.

and maybe I'll just say, you know, these things quickly now, which is like, I want to be able to track usage, tokens, cost, etc.

So I need an observability feature.

else?

So observability is a kind of a keyword in AI, which is that as more and more tools become agentic, more and more of the interactions are in chat.

And so if you're going to build an agent you need some kind of portal where you can see all the interactions because, that's where a lot of the debugging will happen.

Right.

invisible.

So in the old kind of way of building we would have users send screenshots of why is it not working for you?

What's the message that you're getting?

And increasingly now, you need these observability tools that an admin can go in and debug.

Well, why did the person ask for this and the agent gave them something different.

Right, what's going on here?

So that's observability, but I think overall that's good.

So let's build it.

so you can see, I bumped us up to Fable, which is very expensive.

but I'm interested to, you know, to see if Fable can do this.

I, I think Opus would be fine as well.

And then high effort is fine.

and let's begin.

The, you know, the only thing, I just don't use Claude that much and so I'm not quite sure if we're hooked up to get or not.

But when you, when you start building, it'll be very important for you to set up version control and Git and GitHub.

I'm not going to cover the specifics of those here, but I would say version control is sort of a must have for your building and git is version control.

So git versus GitHub Git is a tool that your computer comes with and it's what allows you to make these code changes and then commit them to your folder.

Right.

So they, when they get written to their, to your folder, your, your project here.

Right.

I have this project, Tri State, Trica.

it's getting committed and git.

And Git uses a library metaphor.

You know, checking in, checking out books.

okay, we've got a first question.

and I'm just going to just take their recommended approaches throughout.

I, I am looking at these quick, it made good recommendations and you know these are, this is an example of like if you're not technical, having a Next JS app, you know, SQL Light, Drizzle, all these, all these tools and libraries might not be familiar to you.

So that's just, that's, that's a hard part.

Right.

however I would say like as you noted here, the AI had good recommendations throughout and in general it's going to recommend the tools that it knows how to do.

And there's sort of a positive feedback loop right.

Like the more you use tools that AI knows how to do, the more successful the AI will be, the more successful the AI is, the more these tools thrive.

So we are seeing sort of consolidation of a small number of tools that are the ones that AI likes the most.

this interface is a little bit strange.

So it's, it's asked me a few things here.

Does design look okay?

Yeah, so it's sort of quickly written up its design, you know and, and now what we've done is we've moved from my project brief to its sort of design spec, its technical specific.

It's calling it a design.

It's saying this is the architecture, this is the agent, this is the pipeline, is it emails, observability, scheduling, data, model testing.

Yeah, it looks fine.

And these, these these applications are just so easy to modify.

So in general I don't spend much time in this, in this part.

Okay, so here we are, we are going to be initializing the Git repo here.

That's good.

yeah, I was talking about Git before.

you basically just need to have it.

I think, I think that's what all I'll say on it.

So there's just a few technical things that you need no matter what.

years you're going to continue to want to have Git and GitHub and understand version control.

You're going to want to have some kind of IDE or software editor.

Now those are increasingly getting built into Claude, but every once in a while you're still going to need to edit software directly.

You need to like go into a configuration file and add environment variables, for example.

and on that note, environment variables are going to be really important because at the end of the day AI doesn't want to handle and you don't want AI to handle sensitive API keys.

These are things that could give, you know, a tool access to your finances or access to your anthropic API or access to your database API.

Right.

These are API keys or other kinds of key keys that are meant to be very protected.

And Git and GitHub are increasingly good at not even letting you put those into GitHub.

You just can never have API keys in GitHub.

I think GitHub will reject your deployment if you try to do it that way.

Or versa will, and even AI will, will try to like not let you put in API keys, I think.

So.

Right.

So anyway, you're going to need to know how to add environment variables and we'll do that in this project.

in.

You need to basically understand like local versus production.

You need to understand that when you run locally you have your local environment variables and your local server and your local database and you run one instance.

And then when you deploy to production you have production environment variables and production servers and production databases.

So you'll have two different instances of the application.

And that's how all developers work.

So when they're developing software, they're testing it locally on their local frameworks and then they're deploying it in production and in testing again in production.

So it's kind of annoying, right, because you basically have to do everything twice and they're sort of double management, but that's the typical paradigm.

Now I will say for me, when I'm going really fast and loose, I'm oftentimes just deploying straight to production and I'm not testing locally, I just test in production.

And sometimes that's the right way to do it.

But sometimes that can be slow and inefficient because it can take, let's say five minutes for the web app to update.

You know, you need to deploy to a server, the server needs to run, etc.

Etc.

So if I'm testing and every time I'm changing something I need to wait five minutes for it to show up.

That can become very inefficient.

And so that's when I go back to local testing.

because when I'm locally testing all I have to do is refresh the page because there's no external server.

So those are the sort of the key building blocks of software development.

and that's all I would say like related to just prototyping.

Then the deeper piece of it is architecture.

Right.

And so how do these systems talk to each other?

Right.

I have a database that I'm building as part of this prototype, but if I'm building inside of an organization, how does that database talk to other databases, etc.

what are the key choices we want to make?

Right, we just made some choices around JavaScript or TypeScript or Python.

Right.

Languages, databases, testing environments.

Right.

How does the software test?

So there are sort of sweeping architectural changes or architectural decisions that if you are working with peers in an organization, you need a CTO or a sort of architect type engineer to create the norms that all software is going to sit within.

Again, that doesn't mean that you can't run an experiment like we're doing now.

go ahead and run an experiment.

Just understand that in order for that experiment to then get absorbed within the larger initiative, it's going to have to go through some process that meets the norms being set by the cto.

so they might say that's great, but if we're going to do this for real, we need it to hit this database or that's great, but if we're going to do it for real, we need authentication that goes through Google sso.

Right.

Those are the kinds of architectural decisions.

So we're now 30 minutes into the project, and we can see that Fable is building it slowly and steadily.

And we talked about this a little bit, but I think this is one of the big changes that's happened even since we started the fellowship, to now is that increasingly these AI agents, Claude and Chachi pt, when you're using them in this more powerful way in, in their coding environments, you're giving them large complex projects and then you're stepping away so you're not having like a back and forth exchange.

You're giving them a large work task to do that could take them an hour.

this is not large enough, I don't think to take an hour, but it might take 20 minutes.

So we'll see.

If you take a peek in what the tool is doing, you can see that increasingly these LLMs are doing fairly sophisticated planning.

And so this has created a plans directory.

it looks like it's running several sub agents at once.

And so, it's not actually clear to me what's happening right now, but it's certainly doing a lot.

doing.

And for instance, what I notice here is that we're already at 40 something percent of the context window.

It's good to keep an eye on your context window.

As that fills up.

There's more likelihood of the tool losing old context or slowing down or having other problems that it may not always be great at diagnosing.

So I'm keeping an eye on that, but now it does look like it's finally starting to do some actual coding.

thing.

You can see it's running into all sorts of errors and trying to debug the errors and that might be fine, but again that might be the sort of thing that you need to intervene and tell it.

You know, it seems like you're spinning out.

I say that sometimes it seems like you're spinning out.

And this is why I mentioned quickly.

But if you have an app that you've already built, if you, it makes all this stuff so much easier because you can just tell it to use the same libraries, the same tech stack as you used before.

If you don't specify that as we didn't here, it's going to do its best to find the right libraries and it may or may not have up to date information.

Keep in mind these LLMs are snapshots of the Internet at various times.

And so in their snapshot they might have URLs for libraries or versions of libraries that are no longer up to date.

And that might be happening here.

As you can see, it's trying to install SQLite, which is the database, the storage solution that we chose.

and it's having a tough time of.

So it looks like it's approaching the end of its work.

Sometimes I do intervene at the end because, because it may be doing a lot of testing that I don't need it to do.

unless instructed otherwise, sometimes Claude for instance, will run the application and take screenshots of every page, things like that.

and I'm actually not quite sure what it's doing when it talks about ESM seed retest.

so I'm just going to go ahead and say like, please run locally as soon as you can.

I will do the testing.

so one thing to know about CLAUDE code is you can do those kinds of interactions that are interruptive.

It won't.

The AI will make a judgment call whether to stop and respond to you or keep doing what it's doing.

Okay, so I can see what it's doing now is it's building out that observability piece that we were talking about where it can show me how much it's costing to do the web research and.

generate an admin panel around that.

It's a good idea to enable notifications for cloud code so that you can do other things and get a pop up anytime it needs your permission.

Let me see if I've got that enabled.

So if I'm over here.

Okay, so I don't have that working, which I I should get working.

Looks like it's created the app, but I'm going to wait for it to finish before I open.

Okay, looks like we're done.

and we do need to now create the environment variables that we're talking about.

So let's do that.

as we can see also the formatting is not working so I'm just going to let it know that, You know, and I just take a screenshot here.

drop it in.

Okay, So now while CLAUDE code addresses that issue, you can see that in terminal loading up my coding editor to drop in the environment variables and so, again, this is.

I mentioned before why you want an ide is at some point, you're going to need to drop in these variables, I.

Okay.

well.

I'm not going to set up resend right now because that can take 24 hours or so to hook it up to my domain.

So think what we'll do is we'll preview everything except for the auto send.

So what you might do when you're at this stage of the work is have your claude code, in one part of your window and the web app in another part.

So you can see right now it's not loading at all.

So it's clearly working on it.

And again, this might be a really unfamiliar way of working, right.

Like it's been essentially an hour, and we're yet to see any working code at all.

So that can be a little bit bewildering and concerning because you kind of want to see continual progress.

But from my experience, the more you can trust these systems to build long, The more you can trust these systems to carry out complex tasks for you, the better the results.

So it's a bit like baking something in the oven.

You don't want to keep opening the door over and over again to check, for doneness.

You want to let it cook.

So here I'm giving it the nudge that I said.

It seems like you're spitting out.

And again, this, this requires some discernment.

I could be wrong, but I just don't see why it needs to take so long to just get the CSS running.

It seems like, it doesn't, shouldn't have to do to all of these tools.

And this is, this is the cost of working with Fable, right?

Is that these models, they are like gears.

And so right now we're in, we're in overdrive.

And as long as we're in overdrive, it's going to essentially treat everything as a very complicated, complex project.

These tools are still not, we're not really an automatic mode where it knows how to upshift and downshift on its own.

another piece of this is I just don't work in cloud code much and so I don't really know.

For instance, when it says clean, reinstall and real project location, you know what happened?

It might not like that.

I moved it because in the middle of this I moved the folder, which probably created some wonkiness.

In any event, I am going to downshift to Opus now.

Okay.

And so now I've refreshed and you can see now that it's, it's working just fine.

it's still trying to verify that things are working, but we can see ourselves that's working.

And so what it's suggested, and I think it's a good suggestion, is to just, run the pipeline for one source only.

So you can see we've got this agentic interface.

So, the chat is the primary interface.

Let's see what happens when I click run the pipeline.

I stopped cloud code because I didn't need it to be doing all of the confirmation that I was doing it.

So I'm not happy with my first test.

Right.

I said run the pipeline for source 1 only and I'm just not getting a, response of any kind of.

Now this is called checking the console.

I brought up the.

This is another aspect of software development that probably everybody needs to know is how to check for errors.

I'm not seeing any, so I'll say no errors in console.

So now we're kind of in the logging testing part.

Right.

And this is an area that I'm not.

So well educated in.

And I'd like to get more educated.

Right.

Which is how do we do testing, how do we do checking?

Let's see.

Now it says our API key isn't in there.

Okay.

So I may have failed to save the API key.

Uh-huh.

So that was one error.

So it correctly caught that I had not saved the file that I went in and edited.

And then the other error was that it, wasn't rendering errors.

So I'll let it finish its fixes there.

Okay, great.

So now you can see it says thinking.

So that's a promising start.

Then it runs, the pipeline that's like a tool that it's calling.

So all of this is kind of the agent native interface that I was asking for.

And I'm pleased to see that it's executing it.

Of course, I might want to style this better in the future, but I like that I can see what it's thinking.

I like that I can see the tools that it's calling.

Now.

It's not clear to me at all what it's doing.

I, can see that it's thinking.

But this is an area that I sometimes need to work with the AI on is making it maximally legible to the user about what's happening right now.

So all I'm getting is a message that says thinking.

if you contrast that to Claude code, it's very, transparent about what it's doing.

From what I gather that transparency question is A little bit of an open question because I think the more transparent these models are, the easier it is for other models to copy them.

So I think they've been.

It's an ongoing question how much to disclose to the user in terms of its process, processes.

But you can see that it has run the pipeline.

So I mean this is a kind of a technical thing that it's done, but it's showing me that it, it was able to run a run, a, you know, query for one particular source, which is Zen Mountain Monastery.

And it did create, did create it so, so I could click preview here, which I'll do.

And great.

It's written me this draft, here looks really good.

and so I'm actually going to say like, remind me what else you can do.

One of the things that I like about agent native interfaces is they have their own model of what they can do.

They know the tools and skills that they have.

Right.

And so it's reminding me, yep, I can do the pipeline, I can do drafts, I can manage subscribers, I can do config stuff, observability.

like I'd like you to do a full run, you know, prepare newsletter for Aug in September.

and so then the web development becomes, you know, increasingly building tools so that the user and the agent can talk to each other.

For instance, right now, you know, this idea of pipeline, it's a bit technical for me, like I don't really think in pipelines, but I'm saying okay, okay, do a full run, you know, prepare a newsletter for Aug in September.

And you can see it says okay, I'm checking the configuration.

Right.

yep, window months is already set to two.

which covers August and September.

I'll kick off.

So I really love that interface.

I think that's quite magical where I can say something in my mental model and it can say okay, here's what I think you're saying and here's how my mental model works.

And then development continues from there to create a better fit between the user's mental model and the system's mental model.

let's let it finish this up and then we can do a little bit of reflection on, on what we learned from this.

Okay, so that run is complete and you know even this is great, right?

It actually is letting me know that several of these URLs errored out.

So we're going to have to look at that.

we can even say what's the process for me to manage calendar.

Right.

I actually like don't know the process.

I see that there's a preview page and a dashboard page.

I can work with the agent directly.

let's look at the dashboard here.

So you can see this is a, this is a different, this is a different interface than, than what I've done in the past.

But I didn't remember, I didn't stipulate very clearly what I wanted for observability.

So this is fine.

and you can see the cost for each of these runs.

where's the total cost?

Does it give it to me?

Yeah, so I've spent 64 cents so far, on this work.

I'll probably clean this up at some point.

yeah, so for instance, like right now it looks like there's no interface for Yeah, there's no interface for changing the URLs, which I'll probably want at some point.

this preview here, is history.

You know, there's certainly some things that I'm going to want to change.

and so maybe what we'll do is we'll just close on that.

So for instance, I'll say like, You know, and again I would probably make this a document.

Again I would say like you V2 Tri State.

Right.

So I want that This is looking good in terms of.

Containing the URLs, so that's good.

But I need to be able to.

So I want to fix that.

you know, here's an example.

Like I know for instance that the issue here is that Agent is generating markdown responses, but they are not formatted and then I can just paste that in.

Anything else, maybe that's like pressing.

I'd like to persist chats.

So there's just so much like little lingo that's shortcut, you know, for engineers and AI to talk to each other.

When I say persist chats, I mean ability to go back and see previous chats with Agent.

anything else that's like a must right now?

Okay.

I added ability to export sources to CSV so that I can go back later into another LLM and say like here's a CSV of sources I have now enrich this, you know, enrich this source list.

and so that's how I would encourage you to think is, again, give it a bunch of things to fix.

Right?

So I gave it four features to improve.

So let's sort of synthesize.

We spend about 90 minutes building a app from scratch that started with writing a project brief in English.

and we broke down the project into its components, web research, which we decided the tool would not do, web extraction, which it does do.

And we provided some sources from previous research.

We had done email drafting, email sending, email stats and cadence and triggers.

so that project brief took about 20 minutes.

Then the next hour or so was the tool working.

It asked a few questions up front which we were able to answer pretty quickly.

and then for the most part it worked on its own.

It needed us to grant permissions at times.

And so that's why notifications is really great.

You don't want to be just sitting staring at the agent for 60 minutes.

You want to be doing other work.

But at times you'll need to be interrupted to go give permissions to the agent.

And then finally we did have to briefly open up a code editor ourselves to add an API key.

so that was the next 60 minutes.

And then we spent about 10, 15 minutes testing.

and in our testing we found a number of issues that we packaged up and put into a V2 request for the agent.

we can see that the agent used up about half of our five hour limit.

We're on max, which means, max I think is the 200amonth plan.

we used git for version control, but we did not yet deploy to production.

So we just have the tool running locally.

And in the end that may be enough for us.

There's not really clear that we need this to be hosted on the web, unless we want other people to use it.

But even sending out emails this could just be a locally run tool and that would be fine for, for my purposes we didn't set up resend because it's going to take some time to be able to send this from an email account that I trust.

but we did make it really easy to copy and paste.

Okay, so it looks like that looks like these changes are live so we can update.

again it says localhost here showing you that it's, it's new.

we have chats now so I can say can see when I click Dashboard now I see sources so this is where I can manage all of that.

And export a CSV as we discussed.

Just checking for anything else that it's done preview now I can click the previous one and see that so that's great.

so I think we'll pause there.

hopefully this has been a helpful tutorial for using cloud code and helping you get up to speed so you can run your own complex projects and let me know if you have any questions.

Thanks.