From Slack to Shipped - How I Build Features with AI Agents

It is the end of my work week and I am running on caffeine fumes. So, what a better way to end the week with a video.

I wanted to show off what I'm working on, the workflows that I am using today as the developer in this modern AI

world. And I'm working on a React router

world. And I'm working on a React router starter that's runs off of bun. I'm

trying to get everything to work really quickly so I can do live deploys just on Verscell or whatever you want to deploy to so that you can just deploy

and test and do TS code type checking all that super fast and also have good cursor rules for building on top of things also working with lambda concuri form

library something that we've built on top of shad cn and react router 7 for super simple form implementations And so hopefully that'll make some of

this development go quickly. But right

now I've just got a very basic to-do app. They have an advanced form. I

app. They have an advanced form. I

haven't dug too much into all this. It's

been like vibe coding. I've been focused more on the fundamentals of like how tests will work, how GitHub actions will work, cursor rules structure. So I

haven't focused too much on what this app does yet.

And then also like the motto repo setup.

And currently you can add a to-do. You

refresh goes away. I'm not going to add a database to this. That's a little overkill for the starter, but I do want to be able to at least save it within my

my browser local storage. So, I'm going to go over to Slack and I'm going to say

let's explore adding local storage as a way to save our tasks because I don't want to use a database,

but I do want to be able to see my tasks and statuses get updated between page refreshes. Let's keep it simple. Maybe

refreshes. Let's keep it simple. Maybe

some small utility functions, but not too much scope. review the code for React router starter and add a linear

issue to implement this work into our starter team.

So what this is going to do is it's going to go and review the code that we have and think about the idea that I've

created and set up a linear issue for me. So,

some of this is a little overkill because I probably would just work in Slack or even create it directly in linear, but I wanted to showcase how these all work together because it it

can create some pretty cool workloads.

You can do expiration in Slack, get your ideas down, and then once you have your idea down, you can work within linear and I'll showcase that. I'm going to

pause this for now and let this work for a while and I'll come back. It took a few minutes, not terribly long. Like I

said, if I was just like vibe coding on this, I'd probably write out a little more structure and just have it code it directly, but I wanted to show this whole process. So, what this is doing is

whole process. So, what this is doing is it brings in the environment, sets up our cursor rules, give it some context.

It went through and looked through my codebase and structure as it's was wanting to create a context helpful linear issue. And so here it's done

linear issue. And so here it's done that. It's created a linear issue. And

that. It's created a linear issue. And

if I go to my linear, I can see that my triage here and it included my Y summary, some data flow, which is cool.

If I was actually caring about this and working on it, I'd probably want to review this and determine if it was good or not. But the flow that I want to

or not. But the flow that I want to showcase is task creation, context, gathering, execution, and then a review

stage. And I think if you start with

stage. And I think if you start with those kind of processes, that's a lot better than just having a conversation with casually with AI. up your like

research and planning phase, your execution phase, and then finally a review phase. We'll go through each of

review phase. We'll go through each of those and I'm going to go ahead on market in progress and assign it to codegen. And that's going to have me as

codegen. And that's going to have me as an owner and then a codegen as the agent on this. And what you can see now is

on this. And what you can see now is that it's going to take in this task create a new cogen session.

And so I can actually open it here. This

is a new session and it's going to start executing and create a new pull request for me. So like I did last time, I'll

for me. So like I did last time, I'll pause let come back and showcase some of the progress it's making. And then yeah, hopefully let's get to a pull request

and see what happens. Checking on its progress so far. It's pretty cool to see how much it can do and understand from

really just small initial prompts and basically having it make its own prompt and then spinning it off to exe pause again because I don't know how much got left. I'm not really keeping track of

left. I'm not really keeping track of time here. I think about 8 minutes in

time here. I think about 8 minutes in the video, maybe 12 minutes or so into this process. It's added a bunch of code for

process. It's added a bunch of code for me. I have a new puller request I can go

me. I have a new puller request I can go check out.

Also, this is was me watching it in this UI. I could have been keeping up here

UI. I could have been keeping up here also and it's going to add a comment I think here in a second based off and summarize the work that it did for me.

But because I have it in linear, I'm doing my project management in linear, I can track progress on things. And we'll

see in a second. I like to add subtasks from code reviews under here and manage those. Let's see. Hopefully. Oh, these

those. Let's see. Hopefully. Oh, these

Oh, this is cool. Okay, so the linting did fail and some of this is from old code. One thing

that's cool about codegen is when your tests fail, it will actually go and it will spin up another agent

and they call this like a sub agent. So,

it's going to automatically come in to my PR and in case that I do get an error, say one of my test is working is broken or the code that I put up broke another

test, it can come in here, look at the failures, and then run its own process to go and fix those. So, I'm going to

let it do that so we can get to a clean state. And I'll come back. In the

state. And I'll come back. In the

meantime, I'm just going to go ahead and run what I wanted to do. And this is a co-pilot request. So, Copilot will

co-pilot request. So, Copilot will review the code. Codeilot's going to run a review here. It's going to take a few minutes, I believe. Pretty quick.

Usually, Code Rabbit sometimes takes a little bit longer. I don't know how they do those up. Um, so I'm going to keep an

eye out for a co-pilot review.

So here's my summary and it's got some reviews that it's suggesting we change. Copy my pull

request. We'll go back to Slack. So

request. We'll go back to Slack. So

going to copy in my pull request here.

And I have a snippet here for a pull request prompt. So, I'll include this in if I read a blog post about

this, I'll include pull prompt for how to extract reviews for a pull request.

And it's going to come in here and it's going to find and share with me all of the reviews for that pull request. So, I'm going let

it do that. This one won't take as long as mostly all it's doing is just looking at using the GitHub CLI and reading the comments on the PR and then it's going

to tell me what I should pay attention to. So, basically, we're done here and

to. So, basically, we're done here and I'm going to make this into some subtasks. And let's go back to

some subtasks. And let's go back to this. I'm going to copy this.

this. I'm going to copy this.

copy URL here and then let's turn each of these

issues into sub issues underneath our linear issue. So what I'm expecting to

linear issue. So what I'm expecting to be done is for each of these requests or these comments, I'm going to go over here and linear becomes kind of

your command center.

So, we have this parent issue that's in progress here. Go here. Boom. And then

progress here. Go here. Boom. And then

we have our review here. That's cool.

So, it's really neat to have this set up because they're crafting a great developer centric experience around all

this.

I'm hoping when this finishes, we'll see, I think, four subtasks pop up. So, I'll pause for a minute and skip

up. So, I'll pause for a minute and skip to that.

We see it created four sub issues, which is what I was expecting. So, error sub issues. And now I can come in here and

issues. And now I can come in here and because it had all the context, it took those comments and then it's being real smart now. Why do we want to do this?

smart now. Why do we want to do this?

what we're doing acceptance criteria for each of these.

That's pretty cool. Now, for each of these, I can basically just spin it off and have cogen work on them.

If I was really being thoughtful about my work, I would probably review all of them. I just want to show the power of

them. I just want to show the power of how you can use linear as a command center

and have visuals and keep up to date with your little team of agents following the full process of okay,

let's pick a task, let's do a first research and plan implementation and linear.

Let's kick it off. Let's fix the tests that were failing even though that was a wild side journey that we went on.

Then let's review the code. Let's fix

the code. And then by the end of all this, I'm not going to wait for this whole thing to be done. But by the end of all this, we should have a working

preview. And maybe I can postpended that

preview. And maybe I can postpended that on the end of this video later. But I'm

going to sign off and go enjoy my Friday evening. And I just wanted to showcase

evening. And I just wanted to showcase this full workflow because I think it's really cool and I think it's a powerful way to utilize new coding agents code gen

5 linear all together to follow this process and yeah I hope you found it useful.

This was not the video I was expecting it to be but thanks for going on this journey with me and hopefully I can share working to do with local storage

here tonight. Okay. I had to come back

here tonight. Okay. I had to come back and clean up a few things because and I'll talk about what I had to do. I was

last at the coffee shop. I was wanting to get home so I could have a fun evening with my family and I forgot to

add the context of where I wanted these pull requests to go. Actually, on my drive home, it worked and it created some pull requests and it was just all into the main branch, which sometimes is

what you want if you're working from main. But we have a feature branch open.

main. But we have a feature branch open.

So we have this feature branch here that's open. And we want all of these to

that's open. And we want all of these to work and make a new PR into our feature

branch. So I want to always provide code

branch. So I want to always provide code gen two contexts. One, the target repo and two I guess that matters if you're

in an organization that has a bunch of repositories like we do. and then do the base branch for the PR. And that will help give it the context of where it

should go. Okay, so I cleaned that up,

should go. Okay, so I cleaned that up, picked these four off again, and I'm going to pause and we'll come back and I'll merge it all together. I'm

going to try to get it working and show a demo of what we have at the end. Okay,

now we're going to GitHub. Trying to get all of these to be green checks here.

So, this one's still not green.

See why?

So, it's running into an issue with use href within a router component. So,

I'm going to pull that down and I'm going to have it look at how we can test with React Router and hopefully that will fix that.

And everything merged in.

Took longer than I wanted to. We can now add a task. Oh no.

Be right back.

I was a little surprised that it failed because earlier when I was testing before I merged some things in, it wasn't and it was working and I was able to refresh.

So there's two things I'm looking at. I'm

wanting to see why I can't add a task obviously, but also there's like this slight.

So, if I go back to this state, there's no difference in what it looks like when I refresh. But if I refresh here, you can

refresh. But if I refresh here, you can see it goes to the original state. And I

don't like that. Might have something to do with hydration errors.

But we can look at the application and the state here with the values and you can see it it does update in

real time or almost near real time with our local storage. So that was the goal.

It would be much better if it added a to-do. I'm going to try to fix that real quick.

So this is why you have to pay attention to what it's doing under the hood. Uh we had allow client submit

the hood. Uh we had allow client submit for tests, unit tests, and you don't want to change your components for doing

that within unit tests. So

it's tricky. If AI really cares and is focusing on getting the test to pass, then it might sometimes add things that you don't want in your code.

So, you have to watch out for that.

And just like that was the problem.

I can refresh now and it keeps the state. That's great.

Can add new tasks. Can delete tasks.

Mark them as checked. All right. I'm

going to call that a night. Merge these

videos and write a blog post. And I hope you enjoyed this journey. I thought this would be like a 20-minute video and then I went on way too many rabbit trails.

But I hope you learned a thing or two. I

think in closing, what I want to get at is start with the exploration and the research. go to a game plan and

have a solid understanding of what your expected outcome is going to be. Then go

to execution and make sure that your execution is well pointed towards a solid understanding of what you want to do not towards like I mentioned if you

are executing towards just passing tests and you might be missing some code quality and some other things that you're wanting to execute towards. And

ideally the product and how the user is going to be using the product is what you should be executing towards. and

also how you can maintain and scale and and work with other people. There's a

lot of things to consider when working on a big project at least. And then

finally, the review step, using the tools to make sure that you're catching bugs, you're writing your tests

thoughtfully, your linting and type checking is solid, and that you're not adding any security gaps. Okay, that's

the full process. I don't think it matters what tools you use. Codegen's

great.

In the last video, I used repo prompt and I used 03 Pro. Now, I could use GPT5 and cursor is obviously great. Warp I

love. So, I like them all. Let me know if you have any tools that you like that I should try out. And yeah, just hope you learned something. Thanks.