How Senior Engineers Actually Build with AI in 2026 | Build a Full Stack Job Applications Platform

0:00Something changed this year. Every

0:02developer I know is quietly asking the

0:04same question. Do the skills I spent

0:07years building still matter? It's a fair

0:10question. AI writes better code every

0:13month. The gap between junior and senior

0:16is closing. And the more you delegate,

0:18the more the output starts to look the

0:21same. Generic and inconsistent. It's

0:24impressive for 5 minutes of glory on X,

0:27but becomes impossible to maintain by

0:30the third feature. But that's not the

0:32real story. AI doesn't make developers

0:35less valuable. It makes the gap between

0:38developers with a system and developers

0:40without one larger than it's ever been.

0:43Anyone can open up Clawude and get code

0:45out. That's easy. What almost no one

0:48figures out is how to give the agent

0:50enough context, structure, and direction

0:53to build something that holds together,

0:55something you can ship, maintain, and

0:58trust. That's the actual skill, and it's

1:02completely learnable. This is Job Pilot,

1:05a full stack AI agent that finds jobs,

1:09scores each role against your profile,

1:12and then sends real browsers across the

1:15open web to research the company behind

1:18every listing. It writes your cover

1:20letter and tailor your resume to match.

1:23This application would have taken a team

1:26of developers at least a month to build.

1:29Now, I built it on my own in a couple of

1:32days. without writing a single line by

1:35hand. And by the end of this video,

1:37you'll have built it, too. Same stack,

1:40same way I did. If you know basic

1:42JavaScript, you can follow along. But

1:45the app isn't why you're here. You're

1:48here for this. Five open-source agent

1:50skills: architect, remember, review,

1:54recover, and imprint. They'll give your

1:57agent memory, focus, and the ability to

2:00ship without drifting. You install them

2:02once and then use them on every project

2:04after today. They're free, open- source,

2:08and completely yours after this video.

2:10You can get them from a GitHub repo down

2:12below. And I also took the time to write

2:14a full guide covering exactly how to use

2:17each one of these skills in more detail.

2:19I'll put it in the description, too.

2:21Now, the stack next.js GS16, INSForge

2:25for the back end, browser base and stage

2:27hand for real browser automation, GPT40

2:31for intelligence, PostHog for analytics.

2:34By the end, you won't just have a

2:36working AI agent. You'll have a system

2:39for building anything. A system that

2:42doesn't get replaced by the next model,

2:44but instead gets stronger every time you

2:46use it. We are now at a time where one

2:49engineer with the right system has no

2:51ceiling on what gets shipped. So let's

2:55build.

3:06Before we touch a single tool, give me 5

3:09minutes to tell you about the part that

3:12decides whether your build ships or

3:15falls apart halfway through. There's no

3:17quote in this section yet. It's the most

3:20important one in this entire video

3:22because this is the process of how I

3:24think before I write a single prompt.

3:27Without it, even the best model will

3:29drift. It'll start contradicting itself

3:32and just break your codebase. If you've

3:35felt that, you know what I mean. And if

3:37you haven't, first of all, you're crazy.

3:40Great job. But you [music] most likely

3:42will. The problem is that most

3:44developers using AI do the same thing.

3:48They open up the editor, describe what

3:50they want, the code appears, and they

3:53react to whatever comes out. Sometimes

3:55it's great, sometimes it's broken. Fix

3:58it, move on, and repeat. That's great

4:01for demo apps, but that workflow has a

4:05ceiling, and most devs hit it fast. The

4:08problem is that AI has no idea of what

4:11you're building. It knows what you said

4:13in the last message, maybe a few

4:15messages back, but it doesn't know the

4:18decisions you made 3 days ago, what you

4:21decided not to build, your conventions,

4:24your folder structure, or where your

4:26project stands today. So, it guesses and

4:30those guesses compound. 3 weeks in, your

4:33database is full of contradictions that

4:36nobody can fully explain. So, here's how

4:39to fix it. The first half of the fix is

4:43context. Not just telling the agent what

4:46to build, but giving it a complete

4:48picture of the system it's building

4:50inside of. For job pilot, I wrote nine

4:53context files before the agent touched

4:56the line. What the product is and who is

4:58it for? architecture, folder structure,

5:02code standards, UI rules, design tokens,

5:06library specific patterns, a build plan,

5:09and a living progress tracker that

5:11updates as we go. Nine files so that the

5:15agent never has to guess. It is some

5:18real time upfront, but you only have to

5:20write them once. And then these files

5:23travel with the project for its entire

5:25life. And if you keep watching, I'll

5:26show you how we can set them up together

5:28when we start the project. Now, the

5:31second half of the fix are agent skills.

5:34In my previous video, I used spec files.

5:37One spec per feature each build session.

5:41It worked, but it was pretty heavy as

5:44every feature needed a new document. But

5:47this time, I improved that workflow.

5:50What you're watching today is the latest

5:52workflow I'm working with after years of

5:55improving it. This time I replaced specs

5:58with something better. Five agent skills

6:02built from real production builds, real

6:04failures I've encountered, and real

6:06sessions where the agent drifted and I

6:09had to figure out why. Each skill came

6:11from a specific problem that I kept

6:13hitting until I refined the solution.

6:16And each one is just a command you run

6:19inside of your AI session. Here's what

6:21they do and what they prevent. First one

6:23on the list is architect, which you run

6:27before any complex feature. Without it,

6:30you start typing a prompt, the agent

6:33builds, and then halfway through you

6:35realize you never decided how O would

6:38work for this. Your agent just made a

6:40guess, and now you're refactoring with

6:43it. When you run architect, it reads

6:45your context files, asks focused

6:48questions one at a time, surfaces the

6:50decisions you haven't made yet, and

6:52produces a plan. That's the conversation

6:55you should be having before every

6:57serious feature. And now it happens

7:00automatically. The second skill is

7:02called remember. You use it at the end

7:05of every session. Without it, every new

7:08session starts from zero. You spend 10

7:11minutes reexplaining what was decided

7:13yesterday or you don't and the agent

7:16contradicts itself by lunch with it. You

7:19run remember when you wrap up it

7:22compresses what happened, decisions

7:24made, patterns established, progress

7:26completed into a memory file. Then the

7:28next session loads it on open which

7:31gives you continuity without

7:33reexplaining.

7:35Then there's review which you run after

7:38a feature is built. Without it, the

7:41agent finishes a feature 400 lines. You

7:44skim, you commit, and 3 days later you

7:47find a bug. With it, you run review. It

7:51checks if the implementation matched the

7:53plan, if it respects your architecture

7:55boundaries, and if it's production

7:57ready. It then returns issues by

8:00severity, critical, important, minor,

8:04and it never autofixes things, so you

8:06stay in control. I also came up with

8:09recover for when things break. Without

8:12it, something's wrong. You're 4 hours

8:15into a session. You don't know if it's a

8:18targeted bug, a polluted context, or a

8:21wrong assumption from earlier. So, the

8:24AI starts spiraling, and you spiral,

8:26too. With it, you run recover. It

8:30diagnoses which failure mode you're in

8:33and gives you the right correct

8:34response. That's one prompt instead of a

8:37very frustrated afternoon. And finally,

8:41there's imprint, which I use after

8:43building any UIs because without it,

8:47three sessions in your buttons all look

8:50different. spacing is a tiny bit off and

8:53your design system has mistakes that you

8:56didn't really notice with it. When you

8:59run imprint, it captures the new

9:01components patterns into your UI

9:03registry. So you run it across the

9:05codebase, it finds the inconsistencies

9:08and produces a fixed list. That way the

9:11design system stays coherent across

9:14every sessions. Five skills handles

9:18every serious failure mode developers

9:20hit when building with AI agents. Drift,

9:24inconsistency, broken sessions, UI

9:27chaos, and lost memory. One skill for

9:31each one of them. It took a lot of trial

9:33and error and frustration to come up

9:36with them, but here they are, and

9:38they're open source, not just locked to

9:41this project or this stack or this

9:43agent. You can install them once and use

9:46them anywhere. So, I'll leave the link

9:48in the description. And to make it even

9:51easier, I've also put together a guide

9:54covering exactly how to use each skill

9:57in more detail, when to run them, and

10:00how to set up your own context files for

10:02any project you build. I'll put it in

10:04the description, too. So, here's the

10:07full loop. Start every project by

10:10writing context files. nine documents

10:13that give the agent complete knowledge

10:15of what you're building. That's the

10:17foundation. And I just realized that I

10:19didn't go into too much depth about the

10:21nine files in this crash course, but I

10:24did write more about them within the

10:26guide that I just mentioned. So you can

10:28check it out there. But these files are

10:30the foundation. Then you build feature

10:33by feature. Before any complex feature,

10:36run architect. After you implement it,

10:39run imprint if it's UI. review if it's

10:43complex and at the end of the session

10:45remember and when something breaks call

10:48recover context makes sure the agent

10:52knows your system and the skills make

10:54sure that every session is focused every

10:57feature is reviewed and that nothing

10:59gets lost between conversations. That's

11:02the system and it is simple on paper,

11:06but what matters is using it on a real

11:08project under real pressure. And that's

11:11what the rest of this video is for. Here

11:14you just heard about some new skills and

11:16new concepts that you might end up

11:18using. But if you continue watching

11:20until the end, I'll show you how you can

11:23actually use them to build job pilot.

11:26every feature, every session, same

11:28workflow and to also be able to use them

11:31across all of your future projects. And

11:34if you want to go deeper, the Agentic

11:37Dev course teaches all of this from the

11:40ground up, the fundamentals, the

11:42architecture thinking, and the patterns

11:44that made me come up with these five

11:47skills in the first place. So, within

11:49the course, I'll take these skills apart

11:51and show you how you can make yours.

11:54Those are the patterns that make AI work

11:56on serious projects. So, I'll leave the

11:59weight list link in the description so

12:01you can know when the course is out. So,

12:04now that you understand the workflow,

12:06let's learn it and practice it in

12:08action. Time to build.

12:13That's the system and the product you

12:15build with it is almost beside the

12:17point. If you swap job pilot for

12:20anything else, the workflow won't

12:22change, but you still need a stack to

12:24build on. So here's what we are using

12:27for this build and why each piece earns

12:30its spot in an app like this. For the

12:32entire back end, we'll use ins. Job

12:36pilot needs three things on day one. O,

12:40a database and file storage. Almost

12:43every single app needs this. Google and

12:46GitHub login, tables for profiles and

12:49jobs, and a bucket to hold resume PDFs.

12:52Ins gives you all of this in one

12:55platform. And the part that matters for

12:57this is the MCP server because your

13:00agent connects straight to your backend,

13:02reads the live schema, and wires things

13:05all on its own instead of guessing

13:07against an API it half remembers. And

13:10the free tier covers everything that we

13:12built today. So, while we're here, let's

13:14immediately create an account. Click the

13:16Ins link down in the description, sign

13:19up, and you'll be redirected to your

13:21dashboard so that later on we can

13:23immediately start using it. For browser

13:25automation, you'll use browserbase along

13:28with their AI browser SDK, Stage Hand. A

13:32big chunk of Job Pilot runs in a real

13:34browser, reading any job URL you paste

13:38in and sending an agent across the web

13:41to research a company before you apply.

13:43You don't want that running on a

13:45headless browser on your own machine

13:47because it crashes and some companies

13:49can detect it as a bot. Browserbase

13:51instead gives you a real managed browser

13:54in the cloud with session recording and

13:57a live view. You can drop straight into

13:59the app so users watch the agent work.

14:02Stage hand sits on top of that and lets

14:05the agent read and pull data from any

14:07page in plain language instead of using

14:10the brittle CSS selectors. Once again,

14:13it's free to start and everything we'll

14:15do will fall under that free plan. Click

14:18the special link down in the description

14:20so you can follow along and see exactly

14:22what I'm seeing later on when we set it

14:24up. For now, just creating an account is

14:27enough. And for analytics, you'll use

14:30Post Hog. Once people are searching,

14:32researching companies, and tailoring

14:34resumes, you want to see what's actually

14:36happening, which actions get used, what

14:39lands, and where people drop off.

14:42Posthog roles analytics, session

14:45replays, and feature flags into one

14:47tool. And it's super quick to wire up

14:49thanks to their Post Hog wizard. It'll

14:51power your full analytics and help you

14:53use this new workflow that I'm teaching

14:55in this video with so much more

14:57potential because you'll make educated

14:59decisions on what you want to build now

15:01that you can actually build super fast,

15:04allowing you to build the features that

15:05your users actually want. Once again,

15:08their free tier is super generous and

15:11I'll leave the link down in the

15:12description so you can create an account

15:14and later on we can just one-click

15:16install it with a wizard. So, if you

15:18haven't, pause the video and create

15:20accounts as we'll be using them within

15:22the first couple of lessons. If you've

15:24done that, perfect. Now we are ready to

15:27build job pilot feature by feature while

15:30following this workflow that I taught

15:32you in the crash course but that we'll

15:34now together explore throughout the full

15:37build. So let's go.

15:42Okay, I hope you're ready to get started

15:44developing our application in this new

15:47agentic workflow that I want to teach

15:49you. We'll start straight from the

15:52beginning by creating a new empty folder

15:54on our desktop. And you can go ahead and

15:57call it something like job pilot, which

15:59is going to be the name of our

16:01application. And then simply drag and

16:03drop it into your VS code or cursor or

16:06any other text editor or IDE that you

16:09use nowadays. I mean, even the concept

16:11of what a text editor is is changing

16:14nowadays. Cursor and Codeex for some

16:17time have been using this view where on

16:19the left side you have a list of

16:20conversations you have with your agents.

16:22In the middle you have the actual

16:24conversation contents and then on the

16:26right you can have either code or a

16:28preview of the browser. Recently VS Code

16:30came up with that option as well. You

16:32just need to search for the agents

16:34window or click the button in the top

16:36right and it'll open up something that

16:38looks like this where no longer you have

16:40the files on the left side and then the

16:42code in the middle and that's it. where

16:44you have a list of sessions on the left

16:45side and then the actual conversation in

16:48the middle. Love it or hate it, what it

16:50means to be a developer or an engineer

16:52is changing. And that's exactly the goal

16:55of this video to guide you through that

16:57transition smoothly and to help you stay

16:59on top of it. So now that we have an

17:01empty project, go ahead and open up your

17:03integrated terminal while that still

17:05exists. Jokes aside, I think there's

17:08always going to be place for a terminal

17:10and create a new Nex.js application. You

17:13can do that by running mpx create next

17:16app at latest and then just dot to

17:18create it within the current directory.

17:20It'll ask you whether you want to

17:21install the create next app installer.

17:24So just go ahead and say why yes. And

17:26it'll ask you some questions such as

17:28would you like to use the nextgs

17:29defaults. In this case, we're going to

17:31proceed with that as it's going to turn

17:33on TypeScript, ESLint, no React

17:36compiler, T1 CSS, no source directory,

17:39app router, and the default agents.mmd

17:42file. So, let's go with the recommended

17:45options. Give it a minute to set

17:46everything up. Once that's done, you

17:48can, of course, go ahead and run mpm

17:50rundev to spin up the project on

17:53localhost 3000 and then open it up

17:55within your browser. This is new. I

17:57commandcllicked it expecting that it's

17:59going to open it up in my default

18:00browser like it used to do for years,

18:03but instead it actually opened up the

18:05app as a tab in my VS Code window. This

18:07is pretty cool. It's an integrated

18:09browser within which local host links

18:11automatically open up. Pretty cool. You

18:13can use it just as a regular browser or

18:16you can also turn on the inspect element

18:19so you can select specific elements and

18:21then it automatically puts them within

18:24your agentic chat session. I love this.

18:28So far, you had to use a third party app

18:30or a browser extension in order to be

18:32able to do that, but now it's integrated

18:35directly within your VS Code. This is

18:38amazing. So, it knows that this is

18:40referring to your app, that is referring

18:42to an H1, and it even passes a

18:44screenshot to the part that you're

18:46trying to fix. So, now you can just say

18:48modify this, and it'll immediately do

18:50it. Love it. We'll definitely use this

18:53later on. You can also add element to

18:56chat, add screenshot to chat, or add

18:58console logs to chat. Pretty cool stuff.

19:01And there's a full browser console and

19:03elements tab right here. Love it. Now,

19:06let's go ahead and modify some of the

19:08default files right here by heading over

19:10into the app and then page. We can clean

19:13this page up by just running rafc. If

19:16that isn't working for you, you can head

19:18over to extensions and install React

19:22snippets. There's a couple of different

19:24packages. Uh there's the simple React

19:26snippets that I have right now within

19:28which you can simply say sfc to create a

19:31stateless functional component, but

19:32there's also this ES7 react redux react

19:35native snippets that allows you to use

19:37the RAFCE keyword. So you can either use

19:41that or you can use the sfc from the

19:44other one. Either way works for me.

19:47Let's call this page home. And then

19:49within the home, we can simply return an

19:51H1 that says job pilot. And I think I'm

19:55zoomed in a bit too much. So I'll zoom

19:58out a bit. And you can hopefully still

19:59see everything on the screen. Now let's

20:02head over into the globals.css

20:04where we have the default styling. Right

20:07now we want to remove all of that

20:09default styling, but just keep the

20:11import to tailwind CSS so we can use all

20:14of its utilities. Later on, we will fill

20:16in this root as well as the theme in

20:20line as well as some media where it

20:23prefers the color scheme set to dark.

20:26So, we can specify the dark mode of our

20:29application where we'll be able to

20:31modify some root classes and then of

20:33course there is the body uh in case we

20:36want to do some resets. Later on, I'll

20:38provide you with the styling so that we

20:40can focus on what matters and that is

20:42learning about this agentic workflow.

20:44Let's also head over into our public and

20:47remove everything from it. The only

20:49thing we'll keep is the empty public

20:51folder because later on we'll fill it in

20:53with additional assets. So now that we

20:55have an empty slate of our application

20:57like it's completely empty, there's

20:59nothing there. We want to set up our

21:01agentic skills and context files that

21:03we'll use in all of the upcoming lessons

21:05of this video, but also in every

21:08upcoming project that you work on.

21:12To start setting up our agentic

21:14workflow, we'll need some context files.

21:17And just so you don't have to create one

21:19by one by hand, down in the description,

21:21I'll leave a video kit link which is

21:24going to look something like this. Here

21:25you have different useful links such as

21:27the link to the open source codebase of

21:29this project, the deployment, the

21:31assets, and some guides, Discord

21:33channels, and so on. And on the right

21:35side, you have some snippets that I'll

21:36refer to throughout this video. So, I've

21:39put all that neatly in one place so that

21:41you can refer to it as we go through the

21:43build. Let's start off with the assets

21:45part. So, click on this. It'll lead you

21:48to this Google Drive where you can

21:50download the public folder zip as well

21:52as the context zip. Once you get them,

21:55you can unzip them, remove this public

21:57folder, and then simply drag and drop

22:00both of these folders right here at the

22:03root of your application. And you can

22:05say copy folders.

22:07public is going to be simple. Here we

22:09have our job pilot logo as well as the

22:12images we'll be using later on for our

22:14agents dashboard and so on. And then the

22:17context is where the magic happens. But

22:20before I go through each one of these

22:22individually and explain them in this

22:25video, I'll teach you how to take your

22:26agentic development workflow even

22:28further by using custom skills. I've

22:31been writing code using AI for many

22:34years now, but especially throughout the

22:36last 6 to 12 months, I doubled down on

22:38it. Ever since Claude Opus 46 came out,

22:41and since then, I've been improving my

22:43workflows, but I didn't feel like

22:45rewriting all my rules for every single

22:48project. So, skills made a lot of sense.

22:51I created a series of skills that

22:54combine all of my workflows and

22:56learnings and struggles of years of

22:58working with agents into a set of skills

23:00that you can install into any project.

23:02And installing them is super simple. You

23:04just have to run MPX skills at latest

23:07add JavaScript Mastery Pro skills or you

23:10can install them individually. Below you

23:12can find some info on each one of these

23:14skills. But don't worry as that's

23:16exactly the point of this video to teach

23:18you how to use these skills. If you want

23:20to know how I created these skills in

23:22the first place, how I came up with the

23:24ideas, and why I thought these specific

23:26workflows need to be turned into skills,

23:28you'll likely be interested in the

23:30agentic development course that I'm

23:32working on. That's going to be a

23:33collection of all of my learnings over

23:35the years of trying to tell AI to write

23:38code. Now, it actually can, and I'm

23:41ready to compile it into a single

23:43course. So, for now, you can only join

23:45the wait list, but it's going to be out

23:47soon. Now with that in mind, you can

23:49head back over into a terminal and you

23:51can open up a second window and within

23:54it run MPX skills add latest add

23:57JavaScript Mastery Pro skills. It'll ask

24:00you whether you want to install the

24:01skills installer. So you can say Y.

24:03Proceed. And then it'll ask you which

24:05skills you want to install. In this

24:07case, you can select all of them.

24:09There's just five. It'll ask you for

24:11which agents you want to install those

24:13skills. You can select the one you're

24:15using. You have a lot of options right

24:17here. Um, we can use clot code or we can

24:20use something like codeex or gemini.

24:24That's going to be completely up to you.

24:26Of course, there's also cursor, but you

24:28can see for it that's universal and it

24:30works right out of the box. So, press

24:32enter. Install it either on the project

24:34or globally through sim link and proceed

24:38with installation. Now, after now, after

24:41you install it, if you would be so kind,

24:43you can also give this repo a star. So,

24:46as more of us use these skills, we'll

24:48get more issues and pull requests to

24:50improve them even further and make them

24:53better. Once installed, you'll see these

24:56skills appear directly within your

24:57project right within agents. And here

25:00they are. In the crash course, you

25:02already learned about when and how we'll

25:04be using these skills. And very soon,

25:07we'll start putting that to practice.

25:09Now, before we start using our context

25:11files, which are going to work together

25:13with our skills, I want you to think

25:16about something. Imagine you're a

25:18developer and a client comes to you and

25:20says, "Build me a website." With no

25:23brief, no requirements, no design, just

25:27that. What do you do? I mean, you make

25:29guesses, right? Assumptions. You build

25:31something that made sense to you, but

25:33not necessarily what they wanted. That's

25:36exactly what happens when you open up a

25:38chat window like I do right here and

25:41then you tell it something like build me

25:43a SAS app. The model, whichever one

25:46you're using nowadays, isn't stupid. It

25:48just has no idea what you actually want.

25:50So, it fills the gaps with its best

25:52guesses. And three sessions in, those

25:54guesses compound into something that,

25:57well, nobody asked for. So, before we

26:00write a single prompt, we want to give

26:02our agent everything it needs to know.

26:04And that's coming in form of these nine

26:07files. Each one of which gives the agent

26:10a specific layer of knowledge that it

26:12would otherwise have to guess. It starts

26:14with the big picture, which is the

26:17project overview. Here we tell the agent

26:20what job pilot or whatever project

26:22you're working on. Actually, it's a full

26:25stack AI powered job hunting assistant.

26:27The user sets up their profile once,

26:30uploads their resume, and the agent

26:31automatically discovers relevant jobs

26:34from LinkedIn, scoring each one against

26:36the user's profile using GPD40 or later

26:39on we can switch this. So, we tell it

26:42what it is and what problem it solves,

26:44and we tell it about the problem it

26:47solves. Job hunting is one of the most

26:49repetitive and timeconuming tasks a

26:51developer faces.

26:53So, the goal here is to eliminate all of

26:56that. Now, why are we telling it that?

26:59Well, the more context it has, the

27:01better decisions it'll be able to make

27:03with the limited context that we give it

27:05through the prompts. Then, we also give

27:08it every single page and the full user

27:11flow, how the user moves from page to

27:13page and exactly what happens. We also

27:16give it some more information about the

27:18specific functionalities of the app,

27:20which in this case is finding actual

27:23jobs and provide more info. Then a bit

27:26below we talk about what's in scope but

27:29also at the same time and this is

27:31important what's out of scope for this

27:34application. The agent reads this file

27:36once and knows exactly what we're

27:39building and more importantly what we're

27:42not. That way there's no scope creep.

27:45It's simple for it to understand our

27:47success criteria. So once it knows what

27:50we're building, it also needs to know

27:52how it's built. And for that there's

27:55another context file called

27:57architecture.mmd.

28:00You can also open it up in markdown.

28:03It's going to look something like this.

28:04And this file is all about the stack as

28:08well as the folder structure of the

28:09application. The system boundaries and

28:12data flow as well as database schemas

28:15and a set of rules that our AI agent

28:18must never violate. For example, API

28:21routes contain no UI logic. Components

28:24contain no DB logic. Agent code in agent

28:28never imports from components or

28:30actions. Server actions never call

28:32agents. And you you get the idea. That's

28:35the architecture. That was the

28:37architecture. But now it needs to know

28:40what to build and in what order. And

28:43that's what the build plan is for.

28:46Within the build plan, we tell it how we

28:48want to split this build into phases.

28:51For example, we're going to have 25

28:54total features across five phases with

28:57every feature being defined, scoped, and

29:00sequenced correctly. So that way, the

29:03agent never has to decide what comes

29:05next because it already knows it. This

29:07is the road map that we follow for the

29:10entire build. And if you're wondering,

29:12but hey, how do I actually come up with

29:14all of this? or do I have to prompt my

29:17AI agent to create this before we even

29:20begin? The answer is yes. That's

29:23something that we'll dive much deeper

29:24within in the agentic development

29:26course.

29:28But yeah, through the conversation with

29:30AI before you even begin with the build,

29:32you come up with these rules and

29:34different things that you want to build.

29:36It can easily split it into different

29:38features one by one for you and then

29:40that's the plan that we can follow. Of

29:42course, we can choose to deviate from

29:44it, but more or less we're going to

29:46stick with it. So once we know what to

29:48build, then it needs to know how to

29:51write the code. And that's what the code

29:53standards file is for. Here we tell it a

29:57bit about the TypeScript rules. For

29:59example, the naming conventions or NexJS

30:0316 conventions, the file and folder

30:05naming, the component structure, how we

30:08handle specific errors or server

30:11actions.

30:12Basically, every single convention that

30:14you follow that you can think of, write

30:17it down once. And this is what keeps the

30:20agent consistent across every session

30:23instead of simply drifting away into its

30:25own style by week two. And it also needs

30:28to know how to use the tools. So for

30:31that, we have the library docs.md.

30:35This file is not just generic

30:37documentation.

30:38It's on exactly how we use each library

30:42in a specific project like job pilot in

30:45this case. So before using any library

30:48check if an MCP server is configured for

30:50that library read that file and only

30:54then act. In this case we'll be using

30:56ins. So we tell it how we can use it and

30:59some rules that it can follow. Same

31:01thing for o dbqueries and browser base

31:04which we'll be using later on to

31:06actually scrape the data. check for the

31:08MCP of this library that we want to use

31:11and some examples of how we can use it.

31:13Of course, I was super detailed right

31:15here, but these context files are

31:17something that you can build along the

31:19way as you're building the application,

31:21but of course, the more you prepare at

31:23the start, the better. Now, for the UI

31:26layer, there's three files, each

31:28handling a different part. Let's start

31:31with UI tokens. Here we define every

31:34single color, spacing value, border

31:37radius or typography scale and we pull

31:40it directly from the design defined as

31:42CSS variables. The agent will use these

31:46exact values with no hard-coded hex

31:49values or no inconsistency between the

31:51pages. So once it knows the primitives,

31:54we can head over into the UI rules.mmd.

31:58Here we tell it how the UI behaves. uh

32:02things like the font, the layout and how

32:05cards should look like, the button

32:08styles too, the badges and everything.

32:11And this is what keeps every page

32:13feeling like it belongs to the same

32:15product. You know that if you're

32:16building with AI, very often the AI will

32:19start deviating from the general design.

32:22But with this in place, you can

32:23essentially consider it your entire

32:25design system. write the visual rules

32:28here once and then the agent will follow

32:30them across every page. And if you

32:32already have a Figma design, you can use

32:34a Figma MCP or just feed it over into AI

32:38and it'll generate this for you.

32:40Finally, there's the UI registry. This

32:43is a living document, so we're

32:45essentially starting it empty. Later on,

32:47I'll teach you how to use the import

32:49scale, which fills it automatically as

32:51we build components. So, as soon as you

32:53create some of the components, it'll

32:56check if a similar component exists. If

32:58yes, it'll match its exact classes. If

33:01no, it'll build it following the UI

33:03rules and UI tokens and then add it

33:05here. This is super powerful if you're

33:08building without a design, and it's what

33:10keeps your components consistent across

33:12the entire codebase. There's also

33:14another file called progress tracker,

33:16which also begins kind of empty. None of

33:19the check boxes have been checked, but

33:21it'll be automatically updated after we

33:24complete every new feature. So, at the

33:26start of any new session, the agent

33:28knows exactly where we left off with no

33:31reexlaining needed. That's it. These are

33:34the nine files that give the agent the

33:36full picture of what we're building, how

33:39the system works, what to build next,

33:41how to write the code, how to use the

33:44tools, and how the UI should look and

33:46behave. In this case, I was super

33:49detailed. When you're building these for

33:51your projects, you can start slow and

33:53then keep adding things as you go. And

33:56you'll most likely keep adding things as

33:58you switch it from a project to another

34:00project because you'll figure out what

34:02works and you'll want to stick with it,

34:04but then modify just slightly to suit

34:06that new project. In this case, I took

34:09the time and I made it very detailed for

34:11two reasons. First of all, you can

34:14browse these files and try to understand

34:16the process that I follow while writing

34:18them. Again, within the agentic

34:20development course, I'll give you the

34:22full uncut version of me actually

34:24generating these files with AI. And the

34:27second reason is that since we're

34:28building this application together, I

34:30want both of our agents to give us more

34:32or less the same output. The less

34:34specific you are, the less similar and

34:37less perfect output you're going to get.

34:39But with this detailed context files, we

34:42should be getting almost the same output

34:44so that you can easily follow along

34:46until the end of this course. So how do

34:48we tie all of this together? Well, it

34:51has to do with the agents.mmd file,

34:53which right now is completely empty. If

34:56you head back over to your video kit,

34:58you'll see a final agents.md file right

35:01here, which you can copy and simply

35:04paste it right here. It's simple. It

35:06just ties everything together. Here

35:08we're speaking directly to the agent. We

35:10tell it to read in this exact order

35:13before any implementation.

35:15Read all of these nine files. And if you

35:18think that making it read these files is

35:21going to consume a lot of tokens, trust

35:23me, it's going to consume significantly

35:25less tokens than it would take it to

35:28generate some stuff that you'll end up

35:29scrapping and never using and going back

35:32and forth and fixing it. This workflow

35:35is made for the highest speed of

35:37development, but also the lowest token

35:39cost. Trust me on that, and you'll see

35:42for yourself as you continue following

35:44along. There's also some rules that

35:46never change, like no hard-coded hex

35:48values, update the progress tracker

35:50after every feature, load the skill

35:53before touching any third party

35:54libraries, and it lists all the skills

35:57and exactly when to use them. Think of

36:00it like this. The context files are the

36:03knowledge

36:05and the agents. MD file is the

36:07instruction manual that tells the agent

36:10how to use that knowledge. Without it,

36:12the agent might skip a file, read them

36:15in the wrong order, or miss a rule. With

36:18it, every session starts exactly the

36:21same way, consistent, focused, and fully

36:24loaded. If you're using Claude, you'll

36:26need a claw.md file, which in this case

36:29should automatically point to the

36:31agents.mmd file. So, this should be good

36:34no matter which agent you're using.

36:35You'll also notice that under context,

36:38there's this designs folder. This is to

36:40make sure that every page has a visual

36:42reference so that when the agent builds

36:44UI, it's not inventing. It's simply

36:47trying to match what's already there.

36:49That's how you get consistent and

36:51polished UI without correcting it every

36:54session. And if you're finding all this

36:55overwhelming, just follow along with

36:58this video, build it with me, and I

37:00think you're going to get a pretty good

37:02idea of how you can use this workflow

37:04for your own projects. Of course, if you

37:06want to dive deeper and learn how to

37:08create these files from scratch, you can

37:10join the weight list for the full Aente

37:12course. But while that's not out, I

37:15actually already prepared the full AI

37:18development starter kit, including these

37:21context files, workflows, and the skills

37:24that we talked about, all within a

37:26single reference book that you can

37:27always go back to and look at when

37:30you're crafting these for your own

37:31projects. So, now that the context is

37:33ready and our agents MD file is here,

37:36we're officially ready to start

37:38developing our application.

37:41Now, just before we run our first

37:44prompt, I want to tell you about the

37:46workflow that we'll be using. So, no

37:48matter which agent you go with, the

37:50interface is more or less the same. You

37:53can open it up by pressing command

37:55shiftp and then search for chat. At

37:57least that's how it's called in VS Code.

38:00Here you'll see that you have the

38:01regular chat belonging to VS Code,

38:04Microsoft, and Copilot. There's also

38:07claude code and Codex. And these right

38:09here are just extensions. So if you head

38:12over to extensions and search for Codex,

38:15you can see it right here. It has almost

38:1710 million downloads. And as soon as you

38:20install it, it'll appear right here.

38:22Same situation is happening with Claude

38:24or any other agent you decide to use.

38:26You install them and they appear right

38:29here. So this video is completely

38:32agnostic when it comes to the tool

38:33you're using. The thinking and the specs

38:36are what actually matters. the tool is

38:39your call.

38:41That said, here's what I'd recommend.

38:43Claude Code is amazing and you can

38:45totally use it on the sonnet model which

38:48is cost effective and that's what I've

38:50done for the past two videos. In this

38:52one, I'll be using Codex. Lately, I was

38:55able to achieve a lot with very little

38:58token spent and that's what most people

39:00are running these days. It's also the

39:02most budget option available as they

39:04have the go plan for only about eight

39:07bucks per month, a plus plan, and

39:09they're usually giving away a month for

39:11free depending on your region. In my

39:13case, I'll go with plus. Either way,

39:15I'll make sure you don't burn through a

39:17ton of tokens regardless of what you

39:19pick. And sure, you can also use a Codex

39:23app or cursor or whatever you want or

39:25this agent window in VS Code. everything

39:28works. The context and the workflow that

39:31we're going to go through and use

39:33together throughout this video is

39:35agnostic to whichever tools you or your

39:38team are using. So, go ahead and open up

39:40your agent of choice. You can do that by

39:42pressing commandshift I, which

39:44automatically opens up the chat window,

39:47and you can just select the agent you

39:48want to use. So, let's start with

39:51setting up our design foundation.

39:54Everything we defined within UI tokens,

39:57we also need to put within our

39:59globals.css before the agent touches a

40:02single component. We want to do this

40:04first and then every page we build after

40:07will be consistent from the start. If

40:09you skip it, the agent will just start

40:11guessing. So, open up CEX or your agent

40:13of choice. Moving forward, when I say

40:15codex, you can think of that as your own

40:17agent. And let's tell it something like

40:20this. Read the agents.mmd file

40:26and follow the reading order specified.

40:30Confirm once you've read all context

40:33files and are ready to build. With this

40:37prompt, the agent will read everything,

40:40confirm it's loaded, and then we build.

40:42So let's run it once to see what it has

40:44to say. And here you'll also be able to

40:47watch it do its things like read the

40:50agents MD and then finally moving

40:53through the files that we gave it UI

40:55token UI rules UI registry and so on.

40:59Now, we want to make sure that the agent

41:01uses Tailwind CSS V4, not V3. And for

41:06these types of situations, there's a

41:08package called context 7, which has

41:10up-to-date docs for LLMs and AI code

41:13editors.

41:15For example, the NexJS docs was changed

41:1754 minutes ago, better raw 20 hours ago,

41:21and here's Tailwind CSS changed 20 hours

41:24ago. You want to click on it and then we

41:26want to give this info over to our agent

41:29so that it has the latest data

41:30available. We can do that right here

41:32within our terminal by running mpx ctx7

41:36context 7 skills search tailwind CSS.

41:41It'll ask us whether you want to install

41:42the context and then you can select some

41:45of the skills. There's going to be many,

41:47but you can go with Tailwind CSS,

41:50Tailwind CSS patterns, Tailwind CSS

41:54utility components, I think, is going to

41:56be another one that we want to use. Yep,

41:59utility classes right here. And finally,

42:01the best practices. So, that's going to

42:03look something like this. And then press

42:06enter. You can install them right here.

42:08And now the agent will have both our

42:10project tokens and up-to-date Tailwind

42:13CSS v4 knowledge which means that we are

42:15ready to write the globals.css prompt.

42:19In this case we don't have to use the

42:21architect skill because there's no

42:23logic. It's just straightforward setup.

42:26So I'll tell it to read the UI tokens.m

42:30MD file and use Tailwind installed

42:35skills to check the correct Tailwind v4

42:39setup and then set up the globals.css

42:44file. This fairly detailed context and

42:47skill setup allows us to write very

42:49short and quick prompts. So you'll see

42:52now that the setup is done how we can

42:54very quickly progress through the

42:55application given that the right context

42:58has already been put into place. Give it

43:00some time to think about it. And you

43:03might want to pause this video for a

43:05couple of minutes until the agent does

43:06this on your end. For me, it took about

43:083 minutes. It first checked the Tailwind

43:11skills, verified the Nex.js docs, and

43:14only once it understood which

43:16technologies it's working with, it made

43:19sure that the CSS matches the token

43:21specification cleanly. Then it made sure

43:23that the build is running, that the

43:26fonts are being set up properly, and

43:28that's it. It set up Tailm for globals

43:31in app.globals globals using the token

43:33pattern from the context UI tokens a

43:36full theme and it also aligned the

43:39layout with the project font rule by

43:41switching it to enter. Great. So now if

43:43you want to check out the

43:44app.globals.css,

43:46it's going to look something like this.

43:48We get all of these new styles that now

43:50we can use within our application. So,

43:52back within the homepage, if you head

43:54over here and give it a class name of

43:58something like let's head over into our

44:00globals to see which fonts can we use,

44:03there's going to be the font text color

44:07info dark for example. So, you can give

44:09it a class name of something like bg

44:12info dark and also text dash white as

44:17well as text dash 3xl.

44:21And then if you head back, you can see

44:22that all of these styles got applied.

44:24This means that our globals.css

44:27had been set up properly, at least for

44:29the initial primitive colors that we can

44:30use across our application to have

44:33consistent styling. So now that the

44:34globals file has been set up,

44:36immediately in the next lesson, let's

44:38build the homepage.

44:42Now that our design tokens are in place,

44:44we're ready to build the first page. And

44:47this is where everything we set up

44:48starts to pay off. Since we're going to

44:51start a new session, so you can head

44:53over into codeex and exit the current

44:56session, want to start a new context for

44:58every new feature we're building. Start

45:00with a new chat. And whenever you do so,

45:03I always like to tell it to read the

45:05agents.md file and follow the specified

45:07reading order and then confirm once it's

45:10actually read out. You can think of this

45:12as a pre-step that I always like to do

45:14before I start working on more complex

45:16features. And then while it's doing its

45:18thing, we can already start prompting it

45:20to build a feature. So I'll tell it to

45:23build the complete homepage exactly as

45:27shown in and then here we can utilize

45:30our design images under context

45:34landing page.png.

45:36I want to provide it with an image of

45:38the design that you can either find

45:40online or design it using Figma or some

45:44other design tools. So as shown in and

45:47this is going to be the landing page.png

45:50file and want to say use images from the

45:55public folder when needed

45:59and run it just at the right time when

46:02it finished reading the agents MD file

46:04and all the other context files. And

46:06notice just how short that prompt is. No

46:10stack explanation, no folder structure,

46:13no UI rules because the agent already

46:16has all of that from the context files.

46:18We just tell it what to build and where

46:21the visual references. That's it. And

46:23this is where the magic happens. Codex

46:26immediately started treating this as

46:28phase 1 feature 01 homepage. So it's

46:32loading the relevant build skills, the

46:34current homepage layout files, the

46:36Nex.js local docs and available assets.

46:39So we can match the design cleanly

46:41before touching the code. The app is

46:44still very small which is good for

46:46matching the design precisely. It got

46:48the design loaded. It's going to also

46:50take a look at some images. It dissected

46:52it and it's loading the front-end design

46:55guidance. It's using the architect skill

46:58for the homepage structure and the

47:00imprint after implementation so we can

47:02keep this first feature deliberate and

47:05consistent with the project rules. And

47:07all of this is happening from a single

47:10short prompt that we gave it. We're

47:12building a fully designed marketing

47:14homepage that matches the landing page

47:17design with a topnap bar, hero, and

47:20everything else. The language that it's

47:22locking in exactly as shown. Use images

47:25from public complete homepage decisions

47:28that it's making. It made a decision to

47:31split the code into components to stay

47:34within the existing project token system

47:37and to make sure that it works on

47:38desktop but also mobile. It made some

47:41assumptions which is good and then it

47:43created a stepbystep list of how it can

47:46start doing it. Finally, after all of

47:49that, it's moving into implementation

47:52and it'll keep the component shapes

47:54close to the architecture docs.

47:57Now it's editing creating one component

47:59after another. The homepage structure is

48:02done and then it'll even lint it to

48:05check for any TypeScript or app router

48:07issues before it does the required

48:10registry or progress updates in the

48:12visual cleanup. There we go. Lint is

48:15clean. It's going to do another compile

48:18level check to catch any server errors

48:20or next images issues by running mpm run

48:23build. Looks like the production build

48:25failed, which is amazing that we ran it.

48:27So, we're able to notice this issue. And

48:29that's because Next Font couldn't reach

48:31Google Fonts from the sandbox. So, it's

48:33going to rerun that build with network

48:35approval so we can verify the homepage

48:37compiles end to end. The build is

48:41passing. It's doing the final repo

48:43required bookkeeping next, such as

48:46marking the phase one feature homepage

48:4801 complete in the tracker and

48:51imprinting that homepage patterns into

48:53the UI registry so future pages stay

48:56visually consistent. It's updating the

48:59two live docs right now, both the

49:02feature completion and the exact

49:04homepage class patterns we established.

49:07This is great. And I think even at this

49:09point, while we haven't yet checked out

49:11the output, you can see why that initial

49:15grunt work that we needed to do to set

49:17everything up is paying off

49:19significantly. While it's finishing, you

49:22can review the modified files starting

49:25from the globals where it added some new

49:27component specific styles to the layout

49:30where it updated the title and the

49:32description, which is amazing. We didn't

49:35even ask it to do that, but it did it.

49:37Here is the homepage and check just how

49:40clean that is. There's a navbar, there's

49:43a hero, there's a how it works, there's

49:45the features, success stories, call to

49:48action session exactly as I would have

49:50coded it. So to people who say that the

49:53AI generated code isn't clean and

49:56readable and scalable, simply share them

49:58this part of the video. So after the

50:00homepage, there are the individual

50:02components like the call to action

50:04section which is also super clean. the

50:07features section where it even extracted

50:09the data before the actual output. The

50:13hero section, how it works, success

50:15stories, footer, logo, all of these are

50:18just some representational components.

50:20And on top of changing these, it also

50:22updated the progress tracker.md. So we

50:26can go ahead and preview it. It simply

50:28marked the homepage as complete as well

50:32as the UI registry where now it added

50:34some new files like the landing footer

50:38so that if it needs to be reused later

50:40on, it knows exactly how a footer should

50:43look like within our application or

50:45maybe a call to action banner or maybe a

50:48testimonial section. All of these are

50:50likely to appear on other pages. And

50:53now, believe it or not, our agent

50:56documented these features for us. And

50:59thanks to the context system we have put

51:01in place, it'll simply refer to this UI

51:04registry whenever it needs to do

51:06something similar in the future. So, I

51:09guess this is the moment of truth. We

51:12have to run our application and see how

51:15does this homepage look like. I'll open

51:17it up right here in the preview. Zoom it

51:20to a proper size. And check this out.

51:23Besides these buttons, which are fully

51:25dark, which we're going to fix, and I'm

51:27super happy that there's something this

51:29obviously wrong, we're going to fix it.

51:31Don't worry. Take a look at the rest of

51:34the application. I mean, you can hover

51:36over these buttons and they move. The

51:38hero section and the font size and

51:40colors are done incredibly well. The

51:42subheading as well. It used this image

51:45from the assets and displayed it nicely.

51:48There's a second section right here.

51:50Manage your job search with ease.

51:52Another section apply with more

51:54confidence where it used another image.

51:57A full page success stories using Tom

52:00Wilson and its image from the public

52:02folder as well as a little ending part

52:05and then the footer. It did about a 99%

52:09match on the first try with no back and

52:12forth, no corrections, and no

52:14reexplaining the design system. The

52:17context files did the work up front, so

52:20we don't have to do it here. But I

52:22definitely want to fix the buttons. And

52:24thanks to our design system, we only

52:26have to fix it once. This is actually a

52:29situation where I'm going to use this

52:30new VS code add element to chat feature

52:34where I'm going to select a button and

52:36add a corrective prompt

52:39saying that all the buttons on the

52:41screen right now appear fully black

52:44background and dark text which is not

52:47visible on the dark background. Make

52:49them match the actual design and updated

52:52within the registry and the globals. So,

52:55all the buttons on the screen look

52:57great. And you can see that now we're

52:58passing it all the info and the

53:00screenshot. In the screenshot, I can

53:02actually see the text right here, which

53:04is too dark. But, as I said, the

53:06contrast just isn't good. So, we have to

53:09fix it. It's going to trace where button

53:11colors and tokens are defined.

53:14Collect all the project rules. Confirm

53:16the token intent for the button. And all

53:19of this is happening super quickly right

53:21now. It's basically doing it in real

53:22time as I'm speaking. It identified the

53:25button class usage. It found a

53:28conflicting token definitions in the

53:29repo. So, it's going to inspect it

53:31further by allowing it access to the

53:34browser. It'll now take a look at the

53:36application and see why it hasn't been

53:38done properly. It pinpointed the root

53:41cause. The text accent foreground

53:44utility is not taking effect on those

53:46dark CTAs, so they inherit dark text.

53:50It'll simply fix the globals.css, CSS,

53:52which is now super simple, modify it

53:55across all the buttons and update the UI

53:58registry so that mistake doesn't happen

54:00again. But after some time, it found

54:04that the approach wasn't being emitted

54:05into compiled CSS properly. So it tried

54:08switching back to a more reliable

54:10approach, but then at the end of the day

54:12just brought it back to dark buttons.

54:16And it told me that Copilot has been

54:18working for a while and that it can

54:20continue to iterate, but maybe we need

54:22to refine the prompt. And then I figured

54:25that in this case it did it using

54:27Copilot because when we added this

54:30inspect element, it only works with VS

54:34Code's native chat application. But

54:36instead, we can copy this prompt and

54:38paste it as a corrective prompt directly

54:41into the codeex agent or whichever agent

54:43you used because this one already has

54:46all the info from our context and it

54:48should be able to fix it without

54:49necessarily pointing to it. It knows

54:51what the buttons are. So, this was

54:54actually a good experiment. Let's see

54:56how much more powerful this agent is

54:59considering that it has the context from

55:01before when we gave it the task to

55:03actually create this landing page. Oh,

55:06wait. It actually did it super quickly.

55:08It found that the homepage was styling

55:11CTA's ad hoc and it replaced that with

55:14the landing button primary and landing

55:16button secondary classes in globals.

55:19Updated it and now it looks great on the

55:22navbar as well as on the hero section

55:25and everywhere else where the buttons

55:27are being used. I think that's right

55:29here in the footer. So you can see that

55:31one corrective prompt, even without

55:34pointing to it with our finger, was able

55:36to immediately make a huge difference to

55:39our landing page. And that's it. The

55:42homepage is now done. The only thing

55:44that you need to do if you want to stay

55:46consistent with my workflow is to save

55:49the session before we move on. So open

55:52up your chat and simply run forward

55:54slash remember. What this does is it'll

55:57save only the most important parts of

55:59the session so that the agent can refer

56:01to them later on. For example, about the

56:04buttons not being correct. And how can

56:06you know exactly what got saved? Well,

56:09it's simple. You can just head over into

56:11the memory.md file which it now created.

56:14If we preview it in markdown, you can

56:17see right here that the current state is

56:20that the homepage is fully implemented

56:22and matches the design and it knows that

56:24the next session should start with the

56:27second feature of the phase one which is

56:30the authentication. Perfect. So in the

56:33next lesson, let's implement the O.

56:37Now, just before we start adding

56:39authentication to our project, let me

56:41introduce you to the tool that's going

56:43to be powering the entire back end of

56:45this project, including the O. It's

56:48called Ins. And if you haven't heard of

56:50it, pay attention because it changes how

56:53you build backends with AI. Ins gives

56:57your agent a complete backend in one

56:59platform that includes authentication,

57:03database, storage, edge functions, model

57:06gateways, real-time functionalities, and

57:08the vector search and embeddings. And

57:10all of it working directly with your

57:12coding agents, which makes it the

57:14perfect fit for this video and the

57:16workflow that I want to teach you. It's

57:18not retrofitted for AI workflows, but

57:21rather built for them from the ground

57:23up. What that means in practice is

57:25instead of your agent guessing how to

57:27wire up authentication for example or

57:30writing database queries against an API

57:32that it half knows ins ships with an MCP

57:36server. Your agent then connects

57:38directly to your backend reads live

57:40schemas manages tables and configures

57:42authentication based on all of these

57:45tools and knowledge that it has. That's

57:47the difference between a copilot and an

57:49agent that actually builds things for

57:51you from the ground up. And for our job

57:54pilot project, InsForge is going to

57:56handle everything behind the scenes,

57:57including the O, the entire database,

58:00resume storage, and all of it. It's a

58:03single platform, one connection, and no

58:05configuration that we have to manage

58:07ourselves. To start hooking it up, open

58:09up your agents, start a new chat, and

58:12run the remember command. This is the

58:15first time we're using it. Specifically,

58:17we want to say restore what it

58:19remembered before. This is only going to

58:21pull up the most important history so

58:23that it can use that data to do better

58:25work in the future. Now, before we go

58:27ahead and set up ins, go ahead and copy

58:30your entire agents.m MD file as it is

58:34and save it somewhere safe. That's

58:36because when ins

58:38writes its own instructions into agents

58:40and sometimes it may overwrite your

58:42custom content and we need that content

58:44back after the setup. So, make sure to

58:46copy everything that is in here. Then

58:48head back over to InsForge. I'll leave

58:50the link down in the description that

58:52you can click on to follow along and see

58:55exactly what I'm seeing and start

58:57building today. You can log in through

58:59either GitHub or Google. And when you're

59:01in, you can create your project. You can

59:03start with JSM

59:06call it something like job pilot or

59:09maybe your own name and choose the

59:10region that is closest to you. Once you

59:12create it, it's going to load the

59:14interface and you can either install it

59:16through the CLI or you can install it in

59:19agent mode. You can proceed with the CLI

59:21or select any of the agents here. I'll

59:23go ahead and click install on the codeex

59:26part since that's what we're using.

59:28It'll give you the option of the CLI.

59:30So, you can simply copy and paste this

59:32or an MCP, which is what I want to teach

59:34you how to implement. Simply copy the

59:36installation prompt. Open up a new Codex

59:39chat and simply paste what you copied.

59:42I'm using InsForge as my backend

59:44platform. Please run this command to

59:46install the Ins MCP server. And I

59:48believe for this the medium reasoning

59:50model is going to be fine. And I'll be

59:52using GPT 5.5. This should do the trick.

59:54It'll now install the Ins MCP server

59:57with the exact command we provided. Now

59:59it said that the install command failed

1:00:01in sandbox because network access to mpm

1:00:04is blocked. So we can either run it

1:00:06manually or we can approve the

1:00:09permissions. So I'll say approve and

1:00:12it'll try it once again with these added

1:00:15permissions. Either way is totally fine.

1:00:17The next step is to restart the coding

1:00:19agent to check whether it has been

1:00:21installed properly. So to verify the

1:00:24connection we can simply start a new

1:00:26session and tell it something like I'm

1:00:29using ins as my backend platform call

1:00:32ins MCP's fetch docs to learn about ins

1:00:36and now we can see whether it'll

1:00:38actually call the ins mcp and confirm

1:00:41the connection. You can see that right

1:00:44here fetch docs. There we go. And it has

1:00:47the full info. Now open up the

1:00:48agents.mmd file. You can see that ins

1:00:51added its own contents into the

1:00:53agents.mmd file. Thankfully, I told you

1:00:56to copy your previous agents.mmd. So, we

1:00:59can still bring it back. So, right on

1:01:01top of the insk documentation, you can

1:01:03bring back what was previously within

1:01:05your agents.mmd. These instructions are

1:01:08important because they tell the agent

1:01:10how to use the backend. Your custom

1:01:12instructions tell it how to build this

1:01:14specific project, but both need to be

1:01:16here. Neither replaces one another. So

1:01:18now with ins set up we are ready to

1:01:21implement authentication. Go ahead and

1:01:24open up your agent by heading over to

1:01:26codex and within a new chat we can tell

1:01:29it something like check the progress

1:01:32tracker and also the build plan right

1:01:36because there we listed everything we

1:01:38want to do. then use the INSF forge MCP

1:01:43to fetch the latest ins

1:01:47documentation before we start

1:01:50implementing O. So again, you'll see me

1:01:53ask it to pull all the data together

1:01:56before it starts implementing things so

1:01:58that we know it's going to do it in the

1:02:00proper way. It'll read the progress

1:02:01tracker to figure out where we are right

1:02:04now in the process of developing the

1:02:05project. Then it'll check out the build

1:02:08plan to know what it needs to build next

1:02:11and finally fetch the ins docs via the

1:02:14MCP. So notice what's happening here.

1:02:17The agent is checking where we are in

1:02:19the build, what the O requires, and then

1:02:22pulling live ins documentation through

1:02:25an MCP, not some outdated data. So now

1:02:28it's going to confirm the build plan.

1:02:30The next feature is O covering UI,

1:02:33Google GitHub, OOTH, callback handling,

1:02:35and so on. It has the latest ins docs

1:02:37and the only thing you have to do now is

1:02:39to say something like start or go ahead

1:02:42given all the context we have that's

1:02:44enough to spin it up and give it the

1:02:46permission to start developing the

1:02:48feature O2 in this case O since this one

1:02:52touches routing middleware client server

1:02:55boundaries and the login UI it's going

1:02:57to use the architect skill to form the

1:03:00blueprint it knows that it has to be a

1:03:02custom ins flow and it pulled the latest

1:03:04nextGS6 16 docs where it noticed that

1:03:07middleware was replaced with proxy.

1:03:09Since most of the codebase online has

1:03:12been written with older versions of

1:03:13Nex.js, if we didn't have these very

1:03:16detailed instructions on pulling the

1:03:17latest docs and using them, it is highly

1:03:19likely that the agent would have used

1:03:22the older version of the middleware and

1:03:24placed it at the wrong spot, therefore

1:03:26breaking the app. But since we have all

1:03:28of this setup done, it did it properly.

1:03:31So, let's give it some time and see the

1:03:33implementation. Feel free to pause the

1:03:35video um as this actually took 8 minutes

1:03:38for me on medium reasoning. But yeah,

1:03:41after 8 minutes or so, it implemented

1:03:43the full O feature includes the insk O

1:03:48setup, the OOTH start routes with Google

1:03:51and GitHub, server routes for OOTH

1:03:54callback exchange, refresh and logout

1:03:56routes, Nex.js 16 route protection via

1:03:59proxy. So definitely make sure that you

1:04:01have a proxy right here in the root of

1:04:03the application and not a middleware

1:04:05file because this changed in next.js

1:04:08version 16 and our agent caught it.

1:04:11Added login UI which we'll check out

1:04:13soon. Minimal protected placeholders and

1:04:16it updated the progress tracker and UI

1:04:18registry. We also have to add thev file

1:04:21to our application because currently

1:04:23doesn't exist. And in there we have to

1:04:25add the next public ins URL and ins add

1:04:28an add-on key. So, let's do that right

1:04:30away. We don't want the agent to handle

1:04:33our environment variables. We're going

1:04:34to do it ourselves by creating a

1:04:37new.env.local.

1:04:38Heading back over to our ins dashboard

1:04:42under install at the bottom there's

1:04:44going to be API keys. It's always great

1:04:46to fetch them in case we need to use

1:04:48them later on. So, I'll look at the

1:04:50project URL. That's going to be ins

1:04:54project URL. And after that we'll have

1:04:57the next public ins URL as well as the

1:05:00next public inson key. So prep both of

1:05:04them and then simply paste the keys you

1:05:07can get directly from the dashboard. We

1:05:09can revisit this later on in case we

1:05:11need to update them. But yeah, let's go

1:05:13ahead and check it out. If you head over

1:05:15to your localhost 3000, either open it

1:05:17locally or you can open it up in your

1:05:19browser. Click get started and it'll

1:05:22redirect you to this beautifully

1:05:24designed authentication page. And now

1:05:27one thing that I want to point out here

1:05:29is that we never actually gave it a

1:05:32design for the o page itself. Keep that

1:05:35in mind. We did give it a design for the

1:05:38landing page and that included some

1:05:40primitives, some assets that it can use

1:05:42and the general idea of where we want to

1:05:44take the design of this application. But

1:05:47off page we didn't give it a design for.

1:05:50And take a look at just how polished and

1:05:53on brand this looks like. But now the

1:05:55big question is can we actually log in?

1:05:57I'll go ahead and proceed with Google.

1:05:59And it says we could not start that

1:06:01signin method. Please try again. And I'm

1:06:04actually super glad this happened

1:06:06because I get a chance to show you

1:06:08another one of the skills that I created

1:06:10and that'll become a huge part of your

1:06:12workflow. It's called recover. So go

1:06:15ahead and open up the chat that you were

1:06:18within and in the same window use the

1:06:21recover skill. So when something goes

1:06:24wrong during build, it's going to

1:06:26diagnose the problem and fix it properly

1:06:29and not just lose its way around it. So

1:06:31in most cases, it's going to be just

1:06:33enough for you to pass the error message

1:06:35that you're seeing. But you can also add

1:06:37some additional context like

1:06:38authentication is not working properly.

1:06:41Press enter and just watch how it'll

1:06:43recover itself.

1:06:45figure out exactly what the issue is,

1:06:47diagnose the problem, and then make only

1:06:50one targeted change once the root cause

1:06:53is clear. Looks like failure mode one, a

1:06:55specific thing is broken. And it was

1:06:57able to find it within a second. Root

1:07:00cause next public ins for URL is set to

1:07:02an IK key value, not the ins backend

1:07:05URL. So, we have to make the next public

1:07:07ins for URL this one right here. So

1:07:10simply head over into ourv and make sure

1:07:12that the next public infford URL is set

1:07:14to an actual URL and not a key that I

1:07:17had right here. This was on me, but

1:07:20again I'm glad to show you just how

1:07:22powerful the recover skill is. So once

1:07:24you fix the envitize

1:07:29and you'll be redirected back to your

1:07:31profile.

1:07:33Currently there is nothing there but

1:07:35just the fact that we are logged in is

1:07:37perfect.

1:07:39You can go ahead and log out if you want

1:07:41to. That's working as well. Now, if you

1:07:44go to the profile, it's going to bring

1:07:45you back to the O. And once again, you

1:07:48can just log in. And that's it. We're

1:07:51in. So, now that we know that the

1:07:53feature has been implemented properly,

1:07:55we can make use of another skill called

1:07:57review. So, after building a feature, we

1:08:00want to verify that it matches what was

1:08:02planned, respecting the system

1:08:04architecture and design standards, and

1:08:07is ready to proceed. The skill is super

1:08:09quick, less than a minute. It gives us

1:08:11back the findings. The critical one that

1:08:13oath wasn't able to start without the

1:08:16proper env. That's on me. Uh that the O

1:08:19route handlers do not follow the

1:08:21required error handling. Okay. Do not

1:08:24wrap the route logic in try catch as

1:08:26project standards require every route

1:08:28handler to catch log errors and return

1:08:30human safe responses. The ooth buttons

1:08:33use a link to sideffecting API routes.

1:08:37In production link behavior can include

1:08:39pre-fetching, navigation optimizations,

1:08:41side effects and so on. So that's

1:08:43something that we can fix. So it found

1:08:45the issues. The plan pieces are mostly

1:08:47present. Login UI, Google GitHub oath

1:08:50routes and so on. Some issues that we've

1:08:52seen. So now before we move on to

1:08:54implementing the next feature and you

1:08:56can see it already knows what it is

1:08:57because of our context files, we can

1:08:59tell it to fix it. It quickly noticed

1:09:02that we fixed the env issue oursel and

1:09:05then it also fixed the following review

1:09:07issues and updated the UI registry for

1:09:09the button and the pattern. So that's

1:09:11great. We'll need to restart the Nex.js

1:09:14server to pick up the corrected env. But

1:09:17yeah, now that everything is done, I

1:09:19also want to run the imprint skill. So

1:09:21after building any UI components, we

1:09:23want to extract the visual patterns that

1:09:25matter for consistency and save them to

1:09:28the UI registry. In this case, it looks

1:09:30like it already updated the UI registry,

1:09:32but just in case it missed some stuff

1:09:34while doing the review, I'll run this

1:09:36skill manually. And in about 10 seconds,

1:09:38it imprinted the login card. So, the

1:09:41final thing we need to do is run the

1:09:43remember skill to save what matters at

1:09:45the end of the session because this was

1:09:47a good one. And you can also run save.

1:09:50And finally, it saved it all in the

1:09:52memory. So that in the next session, we

1:09:54can simply run remember restore to pick

1:09:56it up from here. Let's keep building.

1:10:00Now that we have the landing page, the

1:10:03auth

1:10:04page, I think this is the right point to

1:10:07start tracking what's happening within

1:10:10your application. Because that's the

1:10:12question that most developers never ask

1:10:14until it's too late. How do you know

1:10:16that your app is actually working the

1:10:18way you think it is? Not does it

1:10:20compile, but are users actually finding

1:10:23the jobs within the platform? Are they

1:10:25generating the cover letters or creating

1:10:27their accounts and profiles? Without

1:10:30that data, you're just guessing. And

1:10:32guessing on a product you just shipped

1:10:34is how you end up optimizing the wrong

1:10:36things. That's why I want to introduce

1:10:38Post Hog in this stack. It's open-

1:10:41source, built for engineers, not

1:10:43marketers. And it includes event

1:10:46tracking, funnels, session replays,

1:10:48feature flags, all within one platform.

1:10:51As we continue developing Job Pilot,

1:10:53you'll see exactly what it does, but

1:10:55basically it tracks every meaningful

1:10:57user action and it powers the three

1:11:00analytics charts that we'll show on the

1:11:02dashboard. Every job search, every cover

1:11:04letter generated, and every resume that

1:11:07we created for our users, and Posthog

1:11:10will capture it. So, let's set it up.

1:11:13Click the Post Hog link down in the

1:11:14description and create your free account

1:11:16if you don't have one already. You can

1:11:18choose your region and sign in with any

1:11:21platform that you prefer. If you're

1:11:22creating it for the first time, you need

1:11:24to create a new organization. You can

1:11:26call it something like JSM_. And then

1:11:28enter either your name or the name of

1:11:31your organization. And then also select

1:11:33your role. Most likely it's going to be

1:11:35an engineering. And if you have a second

1:11:38also you can say JavaScript mastery

1:11:40right here in where did you hear about

1:11:42us? So let's create the organization.

1:11:45and it's going to ask you what do you

1:11:47want to do with Post Hog. In this case,

1:11:50we want to understand how our users

1:11:52behave. That's the closest match to what

1:11:54we're building. We can turn on the

1:11:56product analytics, the session replay,

1:11:58the web analytics, and later on we'll be

1:12:00able to add all of this additional stuff

1:12:02as well. So, let's go. I'll say it out

1:12:05loud. Post Hog has the best iname setup

1:12:09wizard. You just used one single command

1:12:11and no matter which framework you use,

1:12:14it'll install and set up Post Hog and

1:12:17also add the initial event tracking

1:12:20specifically tailored to the application

1:12:22that you're building. So back within the

1:12:24application, you can open up a new

1:12:25terminal and run MPX-Y

1:12:28add post hog wizard at latest and you

1:12:30can also add the region. I'll expand

1:12:32this so we can see what's happening.

1:12:34It'll likely ask you whether you want to

1:12:36install the post hog wizard installer.

1:12:39And as it says, let's do 2 hours of work

1:12:41in 8 minutes. Directory recognized.

1:12:45Framework is here. And we want to do the

1:12:47post hog integration. So continue.

1:12:50It's going to ask us to authenticate

1:12:52within our browser. That was quick. And

1:12:55now on the left side, it'll keep telling

1:12:57us some stuff about the agent and how it

1:13:00works, like some helpful tips in a game

1:13:02while it's loading the next level. Here,

1:13:05it's not loading the next level, but

1:13:06rather analyzing our project and setting

1:13:09up its own tasks. First, it needs to

1:13:12plan which event it's going to track.

1:13:14Then, it needs to install Post Hog,

1:13:16initialize the Post Hog client, capture

1:13:18the events, identify users, and finally

1:13:22create the Post Hog dashboard. This is

1:13:24going to take a couple of minutes. So,

1:13:26go grab some coffee and pause the video

1:13:29and I'll be right back. And after the

1:13:32setup is done, it'll detect all of the

1:13:34agents we have. And it's asking us

1:13:36whether we want to install the Post Hog

1:13:38MCP server and plugin as well. I'll

1:13:40proceed with doing that and I'll do it

1:13:42for Visual Studio Code and Cloud Code.

1:13:44And we'll give it access to everything.

1:13:47Now, what this does is it allows you to

1:13:49just ask your agent plain text questions

1:13:52about some of the funnels or features

1:13:54within your application and then it can

1:13:56access all of the data from your Post

1:13:59Hog dashboard and make more intelligent

1:14:01decisions on implementing some things

1:14:03within the codebase. For example, you

1:14:05can ask it what are the top five errors

1:14:07in my project this week. is going to

1:14:09return it and then you can continue

1:14:11speaking with your agent to fix them or

1:14:13show me a full stack trace for the most

1:14:15recent crash and then propose a fix. You

1:14:18can go deeper across many different use

1:14:20cases, but yeah, definitely go ahead and

1:14:22install it. So now that Post Hog has

1:14:24been initialized, I'll head back over to

1:14:26our agent. We'll start a new codec

1:14:29session. We can tell it to use Post Hog

1:14:32to track some events within our current

1:14:36application.

1:14:38Even though we don't have a lot

1:14:39happening right now, it should be able

1:14:41to use the MCP and our current codebase

1:14:44and figure out a couple of things it can

1:14:46track already just so we can verify

1:14:48everything is working. The agent nicely

1:14:51understands that the current UI is still

1:14:53in the O foundation phase. So most of

1:14:56the approved business events don't have

1:14:57live workflows yet. It's going to add it

1:15:00just for initialization, user identify

1:15:02and reset, and a typed server tracking

1:15:05helper for the approved event names for

1:15:07the profile job flows later on. That's

1:15:11all that I need for now. And there we

1:15:12go. It added a couple of events that

1:15:14allow us to identify our users on logout

1:15:18or when they visit the dashboard and so

1:15:20on. So, let's quickly test it out by

1:15:22heading back over here. I'll sign out.

1:15:25I'll continue with GitHub one more time

1:15:27to log in.

1:15:29visit the homepage, the profile, the

1:15:31find jobs, and the dashboard. And back

1:15:34within the onboarding, you should be

1:15:35able to see installation complete. If

1:15:38for you, for some reason, it still says

1:15:40that it's waiting for some events to

1:15:42happen, what you can do is click need to

1:15:44set up manually, choose Nex.js, and then

1:15:48right here under the second step, you

1:15:50can manually copy the env.local.

1:15:54then restart the application, log out

1:15:57and log in one more time and switch a

1:15:59couple of pages. And at that time, it

1:16:01should say that it auto captured

1:16:03something new. Either way, you can click

1:16:05skip or next to continue setting up our

1:16:08configuration. I'll leave all of these

1:16:10three options turned on, such as auto

1:16:12capturing front-end interactions so that

1:16:14we automatically track clicks, submits,

1:16:17and more. I mean, a couple of years ago,

1:16:19I wouldn't know what to do with that

1:16:20data. But now that we have the AI, it

1:16:23can make sense of it. So, you're

1:16:25immediately getting so much more

1:16:26valuable info. Heat maps are useful if

1:16:29you can capture generally where people

1:16:31are clicking, moving their mouse, and

1:16:33scrolling to. And then also web vitals,

1:16:36super useful info to have. While we're

1:16:38here, you can also enable session

1:16:40replays because sometimes it might not

1:16:42be clear what's happening just from the

1:16:44clicks. If a user stops scrolling and

1:16:46just stares at one portion of the

1:16:48screen, you want to get in their shoes

1:16:50and see what they're seeing. That's what

1:16:52the session replays are for. So, I'll

1:16:54enable them, too. And finally, you can

1:16:56choose between one of the two free

1:16:58plans, either pay as you go, starting

1:17:00completely for free, giving you up to 1

1:17:02million events, 5,000 session

1:17:05recordings, and 1 million feature flag

1:17:07experiments, or for now, you can just

1:17:09start completely for free. That'll bring

1:17:11you directly into your Post Hog

1:17:13dashboard. There's a quick start that

1:17:15you can start off with, but also under

1:17:17browse, you can head over into activity

1:17:19and check out exactly what is happening

1:17:21within your application. You can see

1:17:23that we're trying to identify some

1:17:25users. Those users are clicking the form

1:17:28and moving across our application. This

1:17:31is just the start. We've started

1:17:33collecting the data. But later on, as we

1:17:35implement some actual features of our

1:17:37app, we'll start making sense of the

1:17:39data. And the biggest help for that is

1:17:41going to be Post Hog AI. So stay with

1:17:44me. Let's implement a couple features

1:17:45together and then we'll come back to

1:17:47Posthog to show you how to truly

1:17:49understand what your users are actually

1:17:51using your app for and how you can

1:17:54improve it based off of the data that

1:17:56we're now tracking.

1:17:58Great work. Once that is done, you can

1:18:00get back to one of your agent chats and

1:18:03tell it that I've initialized PostHog

1:18:05using the Post Hog wizard. So review it

1:18:09by using the review skill

1:18:12and remember

1:18:14save what we did. That way we'll update

1:18:17our context and we'll be able to move

1:18:19directly to the next feature. And this

1:18:22is also a cool little tip that shows you

1:18:24that you can use multiple skills in the

1:18:26same prompt. This took less than a

1:18:28minute. It provided us with a review.

1:18:31Everything passed and it saved it to

1:18:33memory. So in the next lesson, let's

1:18:35focus on maybe the most important part

1:18:37of the app, and that is the database

1:18:39schema.

1:18:42The database schema is the foundation

1:18:45everything else sits on top of. If you

1:18:47get this wrong, you'll be tracing bugs

1:18:49all the way to bad column decisions you

1:18:52made at this point. So this is exactly

1:18:54the moment to use our architect skill

1:18:56before touching anything. So go ahead

1:18:58and open up your agent. And in this

1:19:00case, I actually want to switch over to

1:19:02cloud code to show you that these

1:19:04context files and the workflow that I'm

1:19:07teaching you is completely agent

1:19:09agnostic. I'll use something like sonnet

1:19:11on a high effort within it. You also

1:19:14want to make sure that you have access

1:19:15to the skills. So if you run something

1:19:17like remember, it needs to be there. If

1:19:19it's not, you can open up the terminal

1:19:22in a new window and run MPX skills add

1:19:25latest add JavaScript mastery pro

1:19:28skills. Add all five skills and make

1:19:31sure to add them for cloud code. Once

1:19:33that is done, you can run remember like

1:19:36this and say restore to restore the

1:19:38previous session. It'll automatically

1:19:41figure out what we want to do. Reading

1:19:43the memory file and project context to

1:19:45restore the session state.

1:19:47Perfect. Post hog got implemented wired

1:19:50up. And now we have to do the database

1:19:52schema. Now we can use the architect

1:19:55skill to tell it to architect the

1:19:58feature number four. It'll read all the

1:20:02relevant context files before it talks

1:20:04to us and produce a full implementation

1:20:07plan for the database schema, tables,

1:20:10columns, types, relationships,

1:20:12absolutely everything. And it'll give us

1:20:14that plan so that we can actually review

1:20:17it and tell it whether it's a go or a

1:20:19nogo. And pretty quickly, actually in 30

1:20:22seconds, the agent came back to me and

1:20:25it looks like it wants to have a

1:20:26conversation. First, it's making sure

1:20:28that we're speaking the same language.

1:20:31Rowle security policy. I understand this

1:20:33as posgress RLS rule attached to the

1:20:36table that automatically filters every

1:20:38query to only the current user's rows

1:20:41using o ID. Users can never read or

1:20:44write another user's data even if they

1:20:47craft a direct API call. Is that right?

1:20:50Yeah, that is right. Authenticated

1:20:52access only. Yep, that is pretty clear.

1:20:55And then schema creation. Yep, this is

1:20:57exactly what we want to do against the

1:21:00ins posgress database not generating

1:21:02migration files. I think the reason why

1:21:04it's asking me all of these decisions is

1:21:06because I had not the plan mode, but I

1:21:09think I had the thinking turned on. It

1:21:12might not even be necessary. So for now,

1:21:13I'll simply tell it to proceed with

1:21:16suggested decisions and then it'll get

1:21:19the implementation plan and start

1:21:21working on it. There we go. This is a

1:21:23pretty hefty plan, 12 steps. Confirm and

1:21:26I'll start building. And I'm super glad

1:21:28it asked me to confirm because we

1:21:31installed the Ins MCP for Codeex. But to

1:21:34make it truly agnostic, you also have to

1:21:36install it for the other agent you're

1:21:38using. So back within InsForge, you can

1:21:40click install. Go ahead and choose cloud

1:21:42code which is the first version and you

1:21:44can do it either through CLI or MCP.

1:21:47Either way works. Let's do CLI this

1:21:49time. I'll just tell it I confirm. But

1:21:52before do the following

1:21:56and then paste what we have. So that way

1:21:58it'll get all the information about ins

1:22:01and it'll know how to set up our Ins

1:22:03database properly. The ins cli is now

1:22:06installed and linked and now it'll load

1:22:08the ins skills before proceeding. That's

1:22:10exactly what I meant when I said that

1:22:12Ins was built agentic from the ground

1:22:15up. So agents can work with it so

1:22:18naturally and build entire backend

1:22:20systems with o databases and more. There

1:22:23we go. Clean slate, no tables, no

1:22:26migrations. Let's proceed with the full

1:22:28implementation. I'm assuming this one

1:22:30will take a bit longer. So pause the

1:22:33video and I'll be right back. And after

1:22:36doing some thinking and implementing and

1:22:38then thinking and reading and writing it

1:22:42finalized the feature updated the

1:22:44progress tracker in the UI registry. So

1:22:46phase one with features from 0 to 4 for

1:22:50being the database schema are now

1:22:52completed. It updated the progress

1:22:54tracker and it applied the migrations.

1:22:57The backend through ins is now built.

1:23:01Four tables applied via CLI migrations.

1:23:04There is tables for profiles, agent

1:23:06runs, jobs, and agent logs. All of which

1:23:09are going to start making sense very

1:23:10soon as soon as we start adding the

1:23:12features. Only the authenticated users

1:23:14can perform operations and the rest of

1:23:16the stuff has been completed. Now, if

1:23:18you head back over to InsForge,

1:23:21specifically under database, you'll see

1:23:23four different tables, which means that

1:23:25all of them have been successfully

1:23:27created. The agent didn't write a

1:23:29migration file or configure a connection

1:23:32string. It created all four tables

1:23:35directly through the INSForge MCP. And

1:23:38that's what agent native infrastructure

1:23:40looks like in practice. Agent logs is

1:23:43going to be the agents paper trail. Like

1:23:46every step that it takes during a run

1:23:48will get written right here with info,

1:23:50success, warnings, errors. So if

1:23:52something goes wrong during a job

1:23:54search, this is where you find out

1:23:56exactly what happened and why. But

1:23:59again, that's going to start making more

1:24:00sense soon. agent runs. Every LinkedIn

1:24:04search the agent performs gets logged

1:24:06right here. Job title, searched,

1:24:08location, how many jobs were found, when

1:24:11it started and completed. This is how

1:24:13the dashboard knows what searches

1:24:15happened. Finally, the jobs, every job

1:24:18discovered or imported, match score,

1:24:21cover letter, specifically made for each

1:24:24user. That's the entire job hunting

1:24:26history in one table. And then there are

1:24:29the profiles. Every user's career data

1:24:32will live right here. Name, skills,

1:24:34experience, resume, LinkedIn contact ID.

1:24:38This is what the agent reads when it

1:24:40scores a job against you. And if you

1:24:42open up storage here, you'll see just

1:24:45empty résumés. Every ré operation in

1:24:48this app will read and write to this

1:24:51bucket. And since we can already see the

1:24:53four database tables and the storage

1:24:55bucket, that tells us that everything

1:24:57has been implemented properly. So you

1:25:00can run forward sl remember

1:25:03to use the remember skill and say save.

1:25:06It'll figure out that we wanted to use

1:25:08the remember skill and update the

1:25:11memory. So if you check it out, you'll

1:25:14see that the phase one foundation is

1:25:15100% complete, features one to four,

1:25:18live ins backend has all four tables, 20

1:25:21RLS policies, two triggers, and one

1:25:24private storage bucket types exists.

1:25:28No app level code touches the DB yet.

1:25:31That's going to start soon in phase two.

1:25:33And it says that these open questions

1:25:34from previous sessions haven't been

1:25:36resolved. I didn't consider them that

1:25:37important, but it's good that it's

1:25:39keeping track. So from the next lesson

1:25:41onward, we'll start focusing on the

1:25:43profile page UI. And considering that

1:25:46the phase one is now done, I think it's

1:25:48due time to actually push this code over

1:25:50to GitHub. So head over to

1:25:53github.com/new

1:25:55and create a new repo which you can call

1:25:58job pilot or whichever name you prefer.

1:26:01Then just create it. And you can push

1:26:04over to it

1:26:06by opening the terminal. And we can do

1:26:09this manually. And even though you don't

1:26:10have to do this manually, you can just

1:26:12copy and paste all that into your agent.

1:26:14Old habits die hard. So I'll say get

1:26:16init

1:26:18add dot get commit-m

1:26:21implement everything up to phase one get

1:26:26branch

1:26:28dash m main get remote add origin and

1:26:33finally get push u origin main.

1:26:38Perfect.

1:26:39Now, if you go back and reload, you'll

1:26:42be able to see your code appear right

1:26:43here. And I always like to clean it up a

1:26:46bit. So, you can hide the releases,

1:26:47deployments, and packages. Give it some

1:26:49topics such as agentic workflows because

1:26:52that's what we're working on right here.

1:26:55Later on, we'll be able to add the

1:26:57deployed version or deployed link of our

1:26:59application. And for now, we can give a

1:27:02quick description of the app. I believe

1:27:04our agent or the wrote that for us right

1:27:07here in the root of the application

1:27:11AI powered job search assistance for

1:27:14matching roles, tailored resumes and

1:27:16faster applications. You never know

1:27:18who's looking at your profile and it's

1:27:20always good to tidy it up a bit and to

1:27:22stay consistent. So now that the latest

1:27:25changes have been pushed, we are ready

1:27:27to start focusing on phase two of the

1:27:29application. Great job coming this far.

1:27:35And let's dive right into the phase two.

1:27:38If you head over into the build plan,

1:27:40you'll see that our database schema is

1:27:42done and we are ready to begin phase

1:27:44two, which is the profile page. Starting

1:27:46with the UI, you always want to separate

1:27:49the concerns. Do the UI first and then

1:27:52the logic second. So in this case, we'll

1:27:54first build a complete profile page with

1:27:56UI with mock data without save logic.

1:28:00Within the UI, the profile will need the

1:28:02attention banner at the top, completion

1:28:04percentage ring, missing field tags

1:28:06highlighted, and so on, connected

1:28:08account section, resume section, profile

1:28:11information form with clearly labeled

1:28:13sections, and then save profile button

1:28:15at the bottom. So, let's simply open up

1:28:17a new window. I'll head over to clot

1:28:20code, and I'll tell it to remember, but

1:28:23specifically restore what we remembered

1:28:25before. It'll read the memory file and

1:28:28restore our session.

1:28:30There we go. Now it knows exactly what

1:28:32we focused on.

1:28:34So the next thing we have to do is

1:28:35simply tell it to build a profile UI.

1:28:38And just so it stops asking these open

1:28:39questions, I'll say you can close the

1:28:43open questions. And then we can tell it

1:28:45to build the complete profile exactly as

1:28:49shown in the profile.png.

1:28:53That's going to be within context

1:28:55designs profile. And run it. Let's give

1:28:58it some time to implement it and then

1:29:00we'll go over it together. After getting

1:29:02the full context, it's going to start

1:29:03building the profile page components.

1:29:05It'll start by writing some to-dos for

1:29:07itself. Looking at the design, it needs

1:29:09to build these components, the profile

1:29:11attention banner, the connected

1:29:13accounts, resume section, profile form,

1:29:15and then update the page to compose

1:29:17everything. Then it formed that into a

1:29:19list of to-dos, and it'll proceed

1:29:22working on them one by one. And after a

1:29:24couple of minutes after it implemented

1:29:26it, it also updated both context files

1:29:29in parallel. The progress tracker where

1:29:32it now says that it implemented the

1:29:34profile page UI as well as it marked it

1:29:37as complete right here. It also modified

1:29:40the UI registry to add the components

1:29:42that now it knows how to build and it

1:29:44gave us a quick rundown of everything

1:29:46that was implemented. So what do you say

1:29:48that we go ahead and check it out? Back

1:29:49within the application, if you head over

1:29:51to the profile page, you should be able

1:29:53to see something that looks like this.

1:29:55Oh, and before, as I was building the

1:29:57application, I first experienced an

1:29:59issue with the redirect to the profile

1:30:01page. This specifically happens when you

1:30:03sign out and then try to sign back in.

1:30:06If that happens to you, you can very

1:30:07easily fix it by telling the agent

1:30:10what's happening. Run the review, fix

1:30:12the homepage button, and make sure that

1:30:14the profile page is accessible after

1:30:16login. So take a look at how well this

1:30:18matches the design of our application.

1:30:20Even without comparing it to the

1:30:22original, it's looking amazing. But if

1:30:24there's something that is off, you can

1:30:26simply take a screenshot from here and

1:30:28also take a screenshot from the final

1:30:30design and tell it to fix it. So profile

1:30:33is 70% done. We need to insert some more

1:30:36information for better matches. We'll

1:30:38soon need to connect our LinkedIn

1:30:40account. Then here we'll be able to

1:30:42upload our resume, enter our profile

1:30:44information, and with all of that info,

1:30:47soon enough, this application will

1:30:49simplify our job application process

1:30:51significantly. In this case, it already

1:30:54updated the UI registry. But in case you

1:30:58want to be sure, you can just run

1:30:59imprint manually, and then it'll check

1:31:01whether it added some new components

1:31:03that we might want to reuse later on. It

1:31:05says this was already done during the

1:31:07build session, so that's amazing. With

1:31:09that in mind, you can simply run

1:31:10remember save to save what we did in

1:31:13this session. That'll save it to our

1:31:15memory, which means that immediately in

1:31:17the next lesson, we can start working on

1:31:19the profile save logic. So, let's do

1:31:23that next.

1:31:25Now that the UI is done, let's wire it

1:31:28up. The profile form looks good, but it

1:31:31doesn't do anything yet. No saves, no

1:31:34database rights, and no file uploads. So

1:31:37let's change that. First we want to open

1:31:40up the chat and we want to restore the

1:31:43latest session or in this case since

1:31:45we're working just on the profile the UI

1:31:47first and now the logic we can keep it

1:31:49within the same page. What we want to do

1:31:51in this lesson has some real logic

1:31:53behind it through server actions file

1:31:56uploads through ins for storage

1:31:58completion tracking and path

1:32:00revalidation. So before the agent

1:32:02touches any of it we need to plan it. So

1:32:05switch over to the plan mode. You can do

1:32:08that right here from edit to plan mode

1:32:11and then use the architect skill that we

1:32:15have and tell it to architect the

1:32:17feature 06

1:32:20and press enter. Feature 06 is obviously

1:32:23coming from the build plan. So if you

1:32:25take a look at right here, you'll see

1:32:27that we need to wire up the profile form

1:32:30to insb

1:32:31through server actions. Resume uploaded

1:32:34to ins storage. Resume PDF saved to

1:32:37profiles is complete set to true.

1:32:40Completion percentage and missing fields

1:32:42calculated form prefilleds with existing

1:32:44data and revalidate on save. So let's

1:32:49see how well it's going to plan the

1:32:50feature and then we can actually start

1:32:52executing it. and it thought through all

1:32:55the key decisions and wrote the plan.

1:32:57The plan is thorough and aligns with the

1:33:00project architecture. So, it's just

1:33:01going to verify in sport storage SDK

1:33:04types and any existing usage and then it

1:33:07has everything it needs. It created its

1:33:09plan right here under feature 06 profile

1:33:12save logic. You can even review it. This

1:33:15is the full plan and we can open it and

1:33:18preview it in markdown. So, think of

1:33:20this as a more detailed version of our

1:33:23build plan right here. Using the

1:33:25architect skill in plan mode makes it

1:33:27super powerful and I think it started

1:33:29building it out on its own. So, after

1:33:31you review the plan, you can switch back

1:33:34to the editing mode. Again, sonnet with

1:33:37medium or high thinking is going to be

1:33:38enough because it doesn't have to do the

1:33:40thinking. It has to just write code

1:33:43which has become a commodity nowadays.

1:33:45It's all about the thinking. So now we

1:33:47can simply say to implement the feature

1:33:5006. So picking exactly where we left

1:33:52off, it'll start implementing the full

1:33:55logic. Couple of minutes after the

1:33:57feature 06 is now complete. And here's

1:34:00what was built. It added the actions

1:34:02file. Under actions, it added a

1:34:04profile.ts action file with two actions.

1:34:08Save profile and upload resume. And then

1:34:11under profile util it added a calculate

1:34:14completion shared between page and

1:34:16server action. It also modified five

1:34:19additional files. So now we want to test

1:34:21the form by saving some real info and

1:34:23then reload the page to check whether

1:34:25it's working properly. Make sure your

1:34:27application is running on localhost

1:34:293000. You can see that now we're at 0%.

1:34:34And we can start filling in some info.

1:34:36I'm Adrian at JSMy. For some reason, I

1:34:40cannot enter my email most likely

1:34:42because it should be picked from my

1:34:44account, but okay, we're going to look

1:34:45into this later. Here, you can enter the

1:34:48phone number. For now, I'll enter some

1:34:50random numbers. Location, let's go with

1:34:53New York, maybe one day. Then you can

1:34:57enter your LinkedIn URL as well as your

1:34:59GitHub one. For work, you can choose

1:35:02your work authorization, some

1:35:03professional info, experience level,

1:35:05years of experience, technologies you're

1:35:08proficient in. Notice how nicely it adds

1:35:11these chips as you type, industries

1:35:13worked in, and then you can add work

1:35:15experience. I mean, this is a pretty

1:35:17hefty form and it would take a lot of

1:35:19time to design and develop it, but here

1:35:22it just feels so natural. We can do JS

1:35:25mastery. Of course, here you would

1:35:28actually be entering the data for

1:35:29yourself. I don't remember when we

1:35:31started it, but it's going to be about

1:35:3210 years now. Oh, and there's no end

1:35:35date in sight. Key responsibilities,

1:35:37I guess, everything. Of course, you can

1:35:40be a bit more detailed, so you give your

1:35:41AI a bit more info to work with. You can

1:35:43go ahead and fill in your education,

1:35:46which year you graduated, institution

1:35:48name, and so on. And which position are

1:35:50you seeking, whether you want it to be

1:35:52remote or on site, and then an optional

1:35:55salary expectation.

1:35:57Cover letter, we can make it concise,

1:36:00and prefer locations if you have any. Go

1:36:03ahead and save the profile.

1:36:05It says profile saved successfully,

1:36:07which is great. So now if you reload,

1:36:10oops, it looks like it didn't save what

1:36:13we just wrote. I guess I should have

1:36:14tested it by filling it just a couple of

1:36:16spots and not everything. But that's

1:36:18fine because this is the perfect place

1:36:20to use the review skill. I'll simply

1:36:22turn on the review and tell it form

1:36:26saving doesn't

1:36:28work. And now it'll review the type of

1:36:30bug we're experiencing, figure out

1:36:32exactly where it's coming from, and

1:36:35figure out a way to fix it. So, let's

1:36:37give it a minute. Very quickly, it came

1:36:39back with a full review. Developer

1:36:41reports form saving doesn't work. It

1:36:43figured out there's a couple of

1:36:44mismatches.

1:36:46Server actions are called directly from

1:36:48client components. They require being

1:36:50imported and called as functions, which

1:36:52is what the code does. So, this part

1:36:54should work. Server actions inside start

1:36:57transition in XJS must be called

1:36:59differently. Okay, I'm pretty sure this

1:37:01is going to be the fix. So, it posed

1:37:03some other issues that it found. a

1:37:05couple of critical ones, a couple of

1:37:06important ones, and then a minor one.

1:37:08Resolve issues one, two, and three

1:37:10before moving on. So, I'll simply say

1:37:13resolve

1:37:16and then we'll retest it. And very

1:37:18quickly, it applied all three fixes. So,

1:37:21now if I try changing my name right here

1:37:24to something like Adrian and then click

1:37:26save profile, it's going to say save

1:37:29profile successfully. the name is going

1:37:31to remain there, but then when I reload,

1:37:33it's actually gone. So, it still didn't

1:37:36fix it. I'll add review one more time

1:37:40and tell it that even though we get

1:37:44profile saved successfully after

1:37:46clicking the button, after reloading,

1:37:50the data is still

1:37:53not being saved. Let's give it a second

1:37:55chance. This is the first time it

1:37:58actually didn't fix it right after the

1:37:59first one. And about 2 minutes after

1:38:01it's back with another solution. The

1:38:04proxy.ts file exists with the correct

1:38:07route protection logic, but it is not

1:38:09wired as a Nex.js middleware. Next

1:38:12middleware must be in a file named

1:38:14exactly middleware.ts

1:38:16at the project root. Proxy is therefore

1:38:20never executed. But I'm not sure whether

1:38:22this is correct because if you take a

1:38:24look at the latest page of the docs

1:38:26directly in Nex.js, it's now called a

1:38:28proxy. Starting with NexJS16, middleware

1:38:31is now called a proxy. The functionality

1:38:34remains the same. So the way it works,

1:38:36you create a proxy file instead of a

1:38:38middleware file. And if you go ahead and

1:38:40search for middleware, rewrites you to

1:38:43proxy. So in this case, I think the AI

1:38:45made a mistake. So what we can do next

1:38:47is tell it once again to review its

1:38:49implementation by checking the

1:38:51documentation page that we found and

1:38:53then verifying his claim about the issue

1:38:56number one that it specified. Sometimes

1:38:59you still have to take the wheel and

1:39:01immediately in a matter of seconds it

1:39:04retracted what it thought was wrong

1:39:06about the code. So third times the

1:39:08charm. Let's see if it can actually fix

1:39:10it now or will I have to teach you some

1:39:12other way to fix these types of issues

1:39:14where AI really loses its mind. Either

1:39:17way works for me and that's because

1:39:19these videos are unscripted as it's the

1:39:21only way you can really learn a lot from

1:39:23them. Okay, so now it came back with two

1:39:26fixes. backfill the missing profile row.

1:39:29So, it's going to insert some of the

1:39:31info that was missing from before and

1:39:33then detect the zero rows updated in

1:39:35save profile. Okay, sure. That's a very

1:39:38simple fix. So, let's see whether that's

1:39:40going to make a big change. Very

1:39:42quickly, both fixes got applied. So, if

1:39:45we head back over here, you'll see that

1:39:48now our email is getting prefilled from

1:39:50our authentication info, which is great.

1:39:52And if I enter my name and click save

1:39:55profile, it actually jumped up to 22%

1:39:58and my name is filled in. And it's there

1:40:01even after I reload. So, let me go ahead

1:40:03and fill out some more fields. For

1:40:04example, the full personal info part and

1:40:07click save. It's still here. And we're

1:40:09now at 44%. So, just so you don't have

1:40:12to watch me refill everything I've done

1:40:14before, I'll go ahead and pause the

1:40:16recording and then you can do the same

1:40:17thing on your end and we can continue

1:40:19then. And finally, we are at 100.

1:40:22Potentially, after we upload the resume,

1:40:24it's going to say that the profile

1:40:26doesn't need any more attention. But

1:40:27right now, it says 100%. So, it is a bit

1:40:30misleading. I'll simply take a

1:40:32screenshot, go back to the code, and

1:40:34hold shift to be able to drag and drop

1:40:37files into it. And then I'll tell it

1:40:40when at 100%. It shouldn't say profile

1:40:46needs attention. Fix it. This is just a

1:40:49very simple corrective fix. There we go.

1:40:52It is done. So now when you're at 100,

1:40:54that banner will simply disappear. So

1:40:57let's update the progress tracker and

1:41:01run remember

1:41:03save to save all of it to the memory.

1:41:06After that is done, the profile now

1:41:08saves. And if I'm not mistaken, the résé

1:41:11form should allow us to upload them

1:41:13already. So I'll simply Google for a

1:41:16fake ré.pdf. PDF and I'll download it as

1:41:19a PDF and then you can simply drag and

1:41:22drop it. Notice how nice this looks

1:41:24like. It'll upload it.

1:41:27Resume uploaded successfully. And if you

1:41:29reload, we'll also be able to view the

1:41:31current resume if we had the permissions

1:41:33to do so. That's a little fix that we

1:41:35can make. When we click on that button,

1:41:37we can't actually see it. So, I'll copy

1:41:40this error and say review. When clicking

1:41:45on view current resume, it leads to and

1:41:50then you can paste the URL that it leads

1:41:52to and then say what it shows. It'll

1:41:55analyze it, figure out what the issue is

1:41:58and allow us to preview the resume that

1:42:00we just uploaded. The diagnosis is

1:42:02thankfully very straightforward as it

1:42:04says right here. The issue is that the

1:42:06get public URL was used on a private

1:42:09bucket which was architecturally wrong.

1:42:12as the build plan states to create

1:42:13résumés storage bucket with

1:42:15authenticated access only and feature 04

1:42:19explicitly created it as private. So we

1:42:21should instead use the download via

1:42:23server route handler instead. So let's

1:42:25just say resolve. There we go. The

1:42:28changes got applied. So now if we view

1:42:30the current resume, it'll simply

1:42:32downloaded and displayed in the browser.

1:42:34Wonderful. Profile saved, résumé

1:42:37uploaded, URL written back to the

1:42:40database. And there was zero

1:42:42infrastructure that we had to manage.

1:42:44Ins handled the storage, the database,

1:42:47write, the RLS policies, and we just

1:42:50told the app what to save. Most back-end

1:42:52platforms were built for humans clicking

1:42:55through dashboards. Ins was built from

1:42:58the ground up for the agents. The MCP

1:43:01gives codecs or cloud code direct access

1:43:04to your schema, migrations, o and

1:43:07storage, all without leaving the

1:43:09session. They just relaunched as the

1:43:11open-source AWS for coding agents and

1:43:15shipped backend branching, git style

1:43:17branching for your entire backend. So

1:43:19your agent can experiment safely without

1:43:22touching production. It's open- source Y

1:43:25Combinatorbacked and again I'll leave

1:43:28the link down in the description to

1:43:29check it out. But yeah, this is great.

1:43:31With that, the full profile page is

1:43:34done. So in the next step we have to

1:43:36make AI extract the additional profile

1:43:38data from the resume. So let's do that

1:43:41next.

1:43:44The profile form now works. So let's

1:43:47make it smart. Right now users have to

1:43:50fill in all of this information

1:43:52manually. And let's be honest nowadays

1:43:54people have troubles filling in just

1:43:56their first, last name, and maybe the

1:43:58age, let alone this many fields. So

1:44:01instead, with the feature that we're

1:44:03going to implement right now, they will

1:44:05upload their resume, hit one button, and

1:44:08an AI will read that PDF and fill every

1:44:11field that it can automatically find.

1:44:13Name, skills, work experience,

1:44:16education, all populated within a couple

1:44:18of seconds. The user just has to review

1:44:20it, edit it if needed, and save it. So,

1:44:24let's dive right in. Let's open up one

1:44:27of our chats that we had right before.

1:44:30start a new one. And we're going to use

1:44:33the remember restore skill to load up

1:44:36the memory. Now, for this feature, I

1:44:39chose gp40 to extract all of this info,

1:44:42which means that we'll need an API key.

1:44:44So, head over to platform.openai.com

1:44:48and sign in. Once you're in, you can

1:44:50create your API key, call it something

1:44:53like job pilot,

1:44:56and create it. Then, copy it. And back

1:44:59within our application under env.local,

1:45:03you can write open AAI

1:45:05API_key

1:45:07and paste the key you just copied. Make

1:45:09sure that you have at least some kind of

1:45:10a subscription over an open AI or

1:45:13whichever other AI API key you decide to

1:45:16use. I'm sure you'll find one somewhere

1:45:18because nowadays it's always useful to

1:45:20have your AI API key on top of the

1:45:23agents that we chat with such as chat

1:45:25GPT or that we code with such as Claw

1:45:27Code. Again, you can use any model from

1:45:29Enthropic, Gemini, or whatever you're

1:45:31comfortable with. It's the same pattern.

1:45:33Just grab the key. Once you have it,

1:45:35let's go back to our chat and tell it

1:45:37that the OpenAI API key is already

1:45:40inv.local.

1:45:42And we simply want it to architect the

1:45:45feature 7. You can see that it even has

1:45:47that in mind. It says run architect for

1:45:49feature 7 AI profile extraction from

1:45:52resume flow button download PDF from ins

1:45:56then PDF parse extracts text then GPT40

1:46:00returns structure JSON form fields

1:46:02populate and user reviews and saves it

1:46:04manually. So this is exactly correct.

1:46:08I'll say correct. Open AAI is there.

1:46:11Architect feature 07. Again, you can run

1:46:14this in plan mode so that it gives you

1:46:16back the plan, but it doesn't touch the

1:46:18codebase yet until you verify how it

1:46:20looks like. So that once it actually

1:46:22comes back with a plan, we can say

1:46:24implement feature07

1:46:26and we can turn it to edit automatically

1:46:29mode. But again, let's see what it comes

1:46:32back with. And it came back with a

1:46:34complete plan. I thought switching it

1:46:36from plan to edit mode midprompt, it's

1:46:39not going to switch it immediately, but

1:46:41it looks like it did. So, it already

1:46:42started implementing that plan. If

1:46:44that's the case, that's okay with me.

1:46:46I'll just occasionally give it

1:46:47additional permissions. If it didn't

1:46:49automatically start working for you on

1:46:51the feature, instead, if it gave you a

1:46:53plan, then you can simply tell it to

1:46:55implement feature 07. And then it'll

1:46:57proceed going through the steps. And in

1:46:59about 2 minutes, feature 7 is now

1:47:01complete. It added only one new file,

1:47:04the profile page client, which is a thin

1:47:07client wrapper that owns the ref

1:47:09bridging the resume section and the

1:47:11profile form. And then it went ahead and

1:47:14modified a couple of file such as the

1:47:16profile actions file inside of which it

1:47:19added the extract profile server action

1:47:22which takes it from ins storage,

1:47:24extracts it, sends it over to GPT40 and

1:47:28then returns the extracted profile. And

1:47:30then in the resume section, there's now

1:47:32an extract profile button. So, let's go

1:47:35ahead and test it by heading back to

1:47:37your application. Uploading your resume.

1:47:40Looks like here I uploaded a fake

1:47:42profile, but it might be better to

1:47:44upload your real developer profile. I

1:47:47found something like this. This is John

1:47:49Doe. So, I've downloaded it in PDF and

1:47:52uploaded it right here. So, now click

1:47:54extract profile. And it'll tell you

1:47:56failed to extract profile from resume.

1:47:58Back within the application, it looks

1:48:00like we get an error, which is great.

1:48:02Setting up fake worker failed with a

1:48:05reason message. So, what we can do is

1:48:08open up the chat and tell it to use the

1:48:12review feature and say when clicking

1:48:15extract profile, I get this message. And

1:48:18in the console, and now we can copy and

1:48:21paste what it says right here. I get

1:48:23this. And now based on the review skill

1:48:27and the additional info that we pass it,

1:48:29it should be able to figure out what

1:48:30went wrong and fix it. So let's give it

1:48:33some time. And very quickly, the fix is

1:48:36in. Here's what changed. PDF parse v2 is

1:48:39built on PDFJS disc and always spawns a