Vibe Coding for Beginners (Full Course 2026)

Using AI agents to build any app you want is called vibe coding. And vibe

coding is one of the most exciting and fastest moving areas in AI in 2026. And

these AI coding models are getting more powerful every single month. And

beginners are starting to build more and more complex apps with AI writing basically all of the code. And if you're watching this from the sidelines, it might feel like you're falling behind.

But the truth is vibe coding is a lot easier to understand if you just focus for a few hours. The best part is if you have a chat GPT subscription, you now

have access to the best coding tool and best coding model in the world for beginners, codecs and GPT 5.5. Even if

you have zero coding experience, this is going to be the most comprehensive video on Vibe Coding. We're going to be building three types of apps in this video. We're going to build a web app, a

video. We're going to build a web app, a mobile app, and a desktop app. All while

learning the key concepts required for highquality vibe coding. So, if you like in-depth guides on using the most powerful AI tools in the world for business and building applications, make

sure to hit that subscribe button and like button. Let's not waste any more

like button. Let's not waste any more time. Let's dive in. So, this right here

time. Let's dive in. So, this right here is Codeex and it is where I do all of my vibe coding. Now, in order to download

vibe coding. Now, in order to download codecs, what you're going to do is you're going to go to any browser and you are going to type in openai.com/codex.

openai.com/codex.

And then once you do this, your web page will look like this. In which case, you will download for Mac OS. Go through the steps to get it on your computer. Once

you boot up Codeex, it will look like this. And congratulations. Once Codeex

this. And congratulations. Once Codeex

is on your computer and it's booted up, you now have the ability to use the best AI coding tool in the world to create applications like web apps, like desktop

apps, like mobile apps. In fact, in this video, we are going to create a web app and then we're going to turn that web app into a desktop app and then also a mobile app. But before we do this, I

mobile app. But before we do this, I want to talk a little bit about the basics of codecs and the vocabulary that you need to understand in order to vibe

code on CEX. You can basically just type your app idea and it will just create your entire app and then you can begin using it. So when you come to Codeex,

using it. So when you come to Codeex, you are going to see a sidebar. For

simplicity sake, when you create a an application, I think you should create a new project. And you can do this by

new project. And you can do this by pressing start from scratch or you can select the location that you want your app to be in on your computer. As you

know, your computer has files. And so on Mac, uh what I'm going to do is I'm just going to put it in the documents folder.

So I'm going to doubleclick documents.

Then I'm going to hit new folder and I'm going to put simple app and hit enter.

And now we're going to hit open. Now

what we see is within the documents folder and if you just hover over this you see users/Rileley Brown/documents/simple app that is the file path that your

project exists. Now within this you can

project exists. Now within this you can press this button right here which will create a new chat within simple app. And

so I can type something like I want you to create an app. And a very simplified definition of an app is just a folder of code files that runs as software. But if

we click these three dots and we open up the simple app folder, right? If we open this up in Finder, then doubleclick on this, we see that there are actually no

files at all in this folder. How can you create an application without files? And

that is where GPT 5.5 comes in. This is

the AI model that we're going to be using to generate the files that will become the application. Let me show you an example. So I'm going to say I want

an example. So I'm going to say I want you to create a Microsoft Paint app simple web app then run it locally. So

we're just going to run this and the AI coding model which is GPT 5.5 will now begin writing all of the code files for this application. And when it's done, if

this application. And when it's done, if we check on this folder, which is simple app, we are going to see some files. So,

I'm going to pause the video and wait for it to be done. We'll see how long it takes and I'll report back to you. All

right. So, after 5 minutes and 44 seconds, it responded and it said built it as a simple React Vit Paint app and I started it locally. And then it has this little component right here that says

paint website. So, this is the website

paint website. So, this is the website that we've created. And what happens when we hit open? And there we go. Look

at this. So here we have this paint app that we just created. Let's try and test it. You can see that we can actually

it. You can see that we can actually paint directly on this little application here. And let's see if this

application here. And let's see if this paint bucket works. We can let's see if we can make this blue. We click right here. And it does work a lot. And we

here. And it does work a lot. And we

have a color picker. So we can change the color to this. And we have Microsoft Paint that we created in a single prompt. And let's say we want to make an

prompt. And let's say we want to make an edit. So please make this look like

edit. So please make this look like Apple instead of Microsoft in the top

and bottom panel. Please allow me to use undo. If I make a mistake, please make

undo. If I make a mistake, please make this edit. And so we can actually just

this edit. And so we can actually just very easily edit the app that we created because again we're just creating files.

If we go to this simple app folder and we hit open in Finder and we click inside this simple app, you'll see that we've actually created files. And now

the agent, since the agent is working on updating the app, it's actually going to be changing these files. If you've never written a single line of code in your life, you don't need to concern yourself

with what these files do because AI is just that good at coding. But just know that your app lives in these files. And

when it runs, it's running locally on your computer and that's what allows you to preview the app. And you can toggle the preview just by clicking this button

right here. So this is the app that

right here. So this is the app that we're building. And there we go. You can

we're building. And there we go. You can

see here that it made an edit. And now

the app has an Apple style top and bottom panels. And the local app is

bottom panels. And the local app is running here. And so we can click on

running here. And so we can click on this to open up the right side panel. We

can see our app running. Now you can see that this looks a lot more like Apple up here. And we can test the app. We can

here. And we can test the app. We can

see that we can draw. It looks more like Apple. And you can see the undo up here.

Apple. And you can see the undo up here.

And it also said that I can do command- Z. That does indeed work. Okay. So now

Z. That does indeed work. Okay. So now

what if I wanted to save my work in the cloud so that I can work on it from another computer or I could send the link to someone else and they could work on this application. How would I go

about doing that? And the answer is GitHub. And if you're like me and you've

GitHub. And if you're like me and you've never written a line of code, you may think that GitHub is really intimidating and scary. Well, it's not because you

and scary. Well, it's not because you have AI agents. It can handle everything. And what you can do with

everything. And what you can do with GitHub is once you've created an account on GitHub, the way that I recommend you get started is I recommend that you can create a new repository. And I recommend

you can make it private. You should make it private just because it's safer. And

then you can name it whatever you want.

We can call this Paint by Riley. And

since I'm a part of an organization, I can just choose my personal account here. And then I can create a

here. And then I can create a repository. And you can think about this

repository. And you can think about this like you just created a new folder in Google Drive. That's basically how you

Google Drive. That's basically how you can think about it because now it created a link just like in Google Drive that you can copy. And if we go back to

codeex and we can actually say, hey, I like this app. I want to upload it to

GitHub so I can save my work. Please do

that. I created a new repo and you can think of a new repo as like a Google Drive folder and you can paste it in here. Please upload the code here and we

here. Please upload the code here and we can press enter. And if you've never set up GitHub before on your computer, ask Codeex, hey, I want to set up GitHub and

it will authenticate your account. It

will link you to GitHub and you'll sign in and then you'll go back to Codeex and once it's done, it'll give you a uh response that'll look something like this. uploaded it to GitHub. So, if you

this. uploaded it to GitHub. So, if you look at this link right here, right, remember this link just looked like this. This is what it'll look like when

this. This is what it'll look like when there's no files uploaded. But when we hit refresh now, we see all of these different files. And notice here there's

different files. And notice here there's a source file, there's an index.html, there's a package and a package.json.

These are the files that you see here.

If you go back to codeex, we open up the side panel here. We click these three dots. Open in Finder. We open up this

dots. Open in Finder. We open up this app. There you go. index.html package

app. There you go. index.html package

lock.json package.json. Here you go. You

see all of those different files and those are the same files that get uploaded to GitHub. And this is basically a saved version of your app.

So if I make changes to my application right now, like please make paint at the top bar bigger and the three dots to the

left bigger, right? We can make a very simple change. And there you go. It made

simple change. And there you go. It made

it a little bit bigger. And so what this did is this edited those files in this folder right here. Right? In this folder right here, open and finder in this simple app. It changed these files

simple app. It changed these files somewhere in these files. It edited a line of code in these files and that created this change. But GitHub has not

yet changed. Right? If we go to GitHub,

yet changed. Right? If we go to GitHub, right? Where is which is the saved

right? Where is which is the saved version of our app, you can see that 2 minutes ago was our last change and there's only one commit. If we go back to codeex, I can say please commit the

changes to GitHub. That's what you say if you you can picture this as like please update our saved application on Google Drive. That's basically the

Google Drive. That's basically the equivalent for those of you who are fully untechical. This is how you save

fully untechical. This is how you save your work in GitHub. You basically just say please commit the changes to GitHub and it will do that. Now, if we come back to GitHub and we refresh the page,

we see now that we have two commits and it was just updated now. And you can see here make paint title larger. There you

go. You can see that we just made these changes and now all of the code is up to date. Okay. So very very quick review

date. Okay. So very very quick review before we dive into building a more complex application. But in summary, all

complex application. But in summary, all we've done so far is we used codeex which is a desktop app to build an application. In the example that I

application. In the example that I showed you earlier, we decided to create a web app. This is an app that you can open in a browser. Once you deploy it to the internet, which we'll get to later,

this can be opened in any web browser.

The process to create it is you go to codeex, you type in a prompt, and this will send an AI agent, right? In this AI agent will be running a coding model and

in this case it's GPT 5.5.

And it is editing, creating and deleting files. And these files are located in a

files. And these files are located in a project on our computer. And when we run it locally, which means running it on our computer, that means we can view the

app. And you saw the front end of our

app. And you saw the front end of our application was that paint app. And we

made a few edits to this app because again this is a loop, right? Once you

prompt, your agent can create files.

Then you can use the app on your computer and then you can prompt it again, right? You can prompt it again

again, right? You can prompt it again and the agent will make changes and you can go around this loop as many times as you want. And then once we got it to a

you want. And then once we got it to a point where we wanted to save our work, maybe we wanted to share it with a friend so that they could also work on the app, we used the Google Drive for nerds, also known as GitHub and we

created a repository simply by going to GitHub. We created a new repository,

GitHub. We created a new repository, right? When it's on your computer, it's

right? When it's on your computer, it's called a directory. When it's on GitHub, it's called a repository. I have no idea why. And we gave the link to Codeex and

why. And we gave the link to Codeex and it was able to upload the code to GitHub to save our change. And then once we made those little edits, it updated the

repo and that's why you see two commits instead of one. Okay, so now it's time to build a much more complex application. And remember, we're

application. And remember, we're starting with a web app. My idea for a web app is an app that I'm calling shared brain. And so this is the idea. I

shared brain. And so this is the idea. I

want to build a beautiful internal web app that acts as a shared second brain for video ideas. The app will be a place where my team and I can save anything that might become future content.

Whether it's Twitter exposts, YouTube videos, Instagram posts, articles, screenshots reactions references hooks, or loose ideas. Everything should

live in a visual library that feels like my mind. This is my mind. This is

my mind. This is my mind. This is

another app, but they have no shared features. I want the shared features of

features. I want the shared features of my mind. We want a place where we can

my mind. We want a place where we can save our ideas, like a central database hub, and we want it to look really good.

That's the central idea. Every saved

item should automatically pull the best available metadata. This is very

available metadata. This is very important. Part of the reason I love my

important. Part of the reason I love my mind so much is it pulls all of this data. Right? When I save a link to

data. Right? When I save a link to Twitter, it shows this little card. Uh

when I save a link to an Instagram post, for example, it saves this little card.

What I want to do is I want to make sure we get that same effect so that it is a little bit more visual. I want the app to support categories. You know, this is similar to notion. You can add a select

so you can create different categories.

Every idea should also have a film date.

So that's just a date field that I can manually change. The app should be

manually change. The app should be designed both for people and agents.

This is where it gets interesting. Since

this is an internal tool that we're creating, I want my AI agent or any AI agent that I'm using to be able to update it and read from it. So if I want to say, "Hey, we need 10 videos that we

can react to. Please look through the database." It should be able to scour

database." It should be able to scour the database and find the best things that we can react to for a video. That's

the whole point of this application is to give our agents and us a place where we can save uh different ideas and so that is where this comes in. There

should also be an agent skill connected to the app. So when a user signs in, so when user signs in inside the user profile, there should be a copyable skill or instruction block that can be

given to any agent like codeex or cloud code. And that skill should explain how

code. And that skill should explain how to access and operate the second brain.

It should include the required password or access token. So only agents with that credential can use the system. And

then we talk a little bit about how it should feel. This is an app should feel

should feel. This is an app should feel like a premium and calm. It should not look like a generic admin dashboard. It

should feel like a private creative operating system for visual ideas or for video ideas. Visual, searchable and fast

video ideas. Visual, searchable and fast and organized enough that a team can use it every day. And then I gave a little I always like to do like in short this is a shared visual second brain. I like to

kind of summarize the main point so that the AI agent knows what's really important to me. And so this is looking pretty good. What I'm going to do is I'm

pretty good. What I'm going to do is I'm just going to copy this whole idea. And

what I'm going to do is I'm going to go ahead and open up codeex. And remember

earlier we created a new project for that simple app which is running the Microsoft Paint. We want to create a new

Microsoft Paint. We want to create a new one. And so we want to create a new

one. And so we want to create a new project. Use existing folder. And one

project. Use existing folder. And one

thing that you can do is you can just hit start from scratch and it will just create a folder automatically. And you

can see here it created new project 9.

And so what I like to do is I just like to immediately rename it. So, I'm just going to rename the folder, rename project, and we can call this my app shared brain. The first thing that I'm

shared brain. The first thing that I'm going to do is I'm going to say here is my app idea. Create a markdown file called my idea and have exactly this.

So, what I want to do is I just want to store my idea in this folder. Right? If

we were to go like this, open this in Finder, click in this project, we want to store a markdown file in here that the agent will have access to. And the

agent's going to create it in a second.

And there you go. Here it shows up. And

now we can see it in our folder. And we

have this markdown folder. We can also open it inside codeex. And here's our idea. And I just like to have this open

idea. And I just like to have this open so the agent can always go back and take a look at our plan. Okay. So before we just send off this prompt and let the agent try and build this entire thing,

what we need to do is we need to set up something that's incredibly important, authentication, database, and storage.

So if you remember earlier, we created this Microsoft Paint app. Remember this

one where you can create uh little drawings you can draw on here. The main

problem with this is if your browser refreshes, poof, your data is gone. And

the reason this happens and the reason your data is gone is because this is just being stored in your browser. It's

very temporary, right? If if you actually wanted to create a good paint app, you would want that data to store somewhere. And since this is a web app,

somewhere. And since this is a web app, it can't really be stored on your computer like cuz what if you want to use it on your phone? What we need to do is we need to create a database where

all of the data is stored. And for that we are going to be using Firebase. We

are going to be using Firebase for three things specifically. So that users can

things specifically. So that users can sign in. We're going to use it for

sign in. We're going to use it for database. So we're going to have these

database. So we're going to have these database tables where everything is stored. And also storage bucket. So we

stored. And also storage bucket. So we

can add assets like images. And this is a little example that I've created before for Twitter. Right?

Authentication is simply signing in or signing up. When you sign up, it allows

signing up. When you sign up, it allows you to create a user and verify that user and make sure it's like a real person so that you can sign in. And then

that person will be entered into a users's table. Then all of the other

users's table. Then all of the other data that is text or maybe it is like a username or it can be something like true or false. This is very very similar to anything that would be in a notion

database. Right? You can create things

database. Right? You can create things like a boolean or a checkbox which is like yes or no. You can also create multi- select. So it's like select you

multi- select. So it's like select you know you can have categories. Those are

the types of things that you would store in the database. And then you need like a a storage bucket and that's what we're also going to be using Firebase for. And

this is to store things like images, videos, or any types of files. So that's

what we're using in Firebase. But before

we can just hop into Codeex and say to build the whole thing, we actually need to create a new project on Firebase. So

we're going to go to firebase.google.com

and then we're going to click get started in console and then we're going to click get or create a new Firebase project. Then the the the ne the

project. Then the the the ne the following steps that I'm about to do will take two to five minutes depending on if you've done it before. And once

we're done, all of the rest of the process is done in codeex. This is the only time we're going to be going off platform. We just need to set up our

platform. We just need to set up our authentication database and storage.

It's really easy once you get the hang of it. We can call this shared app um

of it. We can call this shared app um shared space. I forget what I named the

shared space. I forget what I named the app. That's okay. Um and I'm going to

app. That's okay. Um and I'm going to disable this. Use Gemini and Firebase.

disable this. Use Gemini and Firebase.

disable the enable Google Analytics. We

don't need that for now. All right, your Firebase project is ready. We're going

to hit continue. Now, the first thing that we are going to do is we are going to connect Google Firebase with Codeex.

And so, we just need to add an app and we're going to click on web app. This is

the web app button. And I'm just going to call this shared web register app. It

doesn't matter what you name it. And

this is going to give you a Firebase key. Now,

key. Now, I do not let anyone see this information right here. This is like a password.

right here. This is like a password.

This is a key that lets people access your database storage and authentication. So, do not let anyone

authentication. So, do not let anyone see this. I'm going to copy this for

see this. I'm going to copy this for now. And what I'm going to do is I'm

now. And what I'm going to do is I'm going to go back to codeex and I'm just going to say this is my Firebase information.

Store it. We will use it in just a second. Just going to go ahead and paste

second. Just going to go ahead and paste it in here. Do nothing else markdown.

So we can enter that in codec. So now

we're just giving it that context. Now

there's a few other things that we need to do. So we need to continue to

to do. So we need to continue to console. The first thing that we're

console. The first thing that we're going to do is we're going to set up a database. So we're going to click on

database. So we're going to click on fire store. Now what we want to do is we

fire store. Now what we want to do is we want to initiate the database. We want

to create it so that it exists. And we

can hit create database. Now we're just going to go next. Next. Start in

production mode. Create. And we are done. Once you see this screen, we are

done. Once you see this screen, we are done. You don't need to do anything

done. You don't need to do anything else. Then what we're going to do is

else. Then what we're going to do is we're going to go to uh database and storage and we're going to go down to storage. This process is very very

storage. This process is very very similar. This will require you to

similar. This will require you to upgrade. I think it's like you can do up

upgrade. I think it's like you can do up like $10 and you won't even spend any of the money unless you uh upload a ton of files to this. This is just in case the project gets too big. it'll start

charging you, but you can create a maximum amount you want to spend. So,

we're going to upgrade this project. I'm

going to just choose one of the payments I've already set up. You may need to connect your credit card by doing create billing account. So, we're going to

billing account. So, we're going to click on this one right here. We're

going to set a maximum budget. We can do 20 bucks. And we're going to hit

20 bucks. And we're going to hit continue. Link cloud billing. So,

continue. Link cloud billing. So,

everything is all linked up. And we can hit done. And we can hit continue. And

hit done. And we can hit continue. And

now we can start this in production mode. So what I'm going to do is I'm

mode. So what I'm going to do is I'm going to hit create and this will create our storage bucket. So remember we're setting up storage bucket database and then we need to set up authentication.

Authentication is signing into your application. And so we just need to set

application. And so we just need to set this up. Now what we need to do is we're

this up. Now what we need to do is we're going to go to Google. I want people to be able to sign in with Google. I'm sure

when you show up to a website and it has sign in with Google, you feel a sense of relief because it's relatively easy to sign in with Google. You just press a few buttons compared to having to do like email and password. So, I'm going

to enable this. Uh, when you uh select this part right here, it's like it wants you to select a support email. Just

choose whatever one is recommended and then hit save. And now we've set up authentication. So, that first step we

authentication. So, that first step we did where we copied that code, that code will tell Codeex which Firebase project we're using, which is this shared space one. And then we basically enabled

one. And then we basically enabled authentication, storage, and database.

So, Codeex can now communicate with this whole project. And it will see that

whole project. And it will see that we've enabled these three things. And so

now we need to just tell Codeex to build our app. And if we open this up, we can

our app. And if we open this up, we can see that the project is right here. And

don't worry, I'll rotate all these keys if one gets leaked. But I'm just going to say you have everything that you need

to build this app entirely using Firebase for your DB storage and

authentication. I want Google Signin.

authentication. I want Google Signin.

I've already enabled everything. Please,

can you build the entire app? And it

should look good. It should do all of the things that we've listed in the

plan. Spend time thinking and create the

plan. Spend time thinking and create the full app that we've outlined. Now, I

want to see if it can build this app in full. This will probably take about 20

full. This will probably take about 20 to 25 minutes if I had to guess. So, I'm

going to go get a glass of water after I enter this prompt, but we will see if it gets it done. Let's see. All right, look at that. It worked for 25 minutes and 51

at that. It worked for 25 minutes and 51 seconds. We have a local preview. What

seconds. We have a local preview. What

we can do is we can click on local host.

And here we go. We see a sign-in page and it has a continue with Google button. And so, what I can do is I can

button. And so, what I can do is I can hit continue with Google. So, this

Firebase error or off popup blocked might be a limitation of this inapp browser. What I'm going to do is I'm

browser. What I'm going to do is I'm going to go ahead and test this. I'm

going to open this in external browser and let's see, okay, what's going on here? So, we can continue with Google if

here? So, we can continue with Google if we were to sign in with Riley at or kirkwardbrgmail.com and we hit continue. Okay, here we have missing or insufficient permission.

That's very interesting. What happens if we add I'm going to paste a x.com link. Let's see. Ooh, I pasted this

link. Let's see. Ooh, I pasted this x.com link and it automatically switched to X. So, if I hit save item, oh, it

to X. So, if I hit save item, oh, it loaded the data, but it's not like letting me save. Okay, I'm going to hit cancel. I want to figure out why this

cancel. I want to figure out why this is. Here is a really good tip here. You

is. Here is a really good tip here. You

can use inspect element or inspect. So,

if you rightclick on your browser and hit inspect, this is going to open up this side panel here. What you can do, you can go to console. We can just copy all this information here. And we're

going to go back to codeex. And I'm

going to just describe everything that's going on on the external browser. I can

sign in with my account. I tried to add x.com link and the it pulled the correct metadata at least for the the content.

However, when I hit save, it didn't actually add it to the database. I also

saw I didn't have sufficient permissions and then I inspected element and I got this. So, I'm going to go ahead and

this. So, I'm going to go ahead and paste the stuff that was in the console logs. All this is is basically these are

logs. All this is is basically these are just the logs that explain what's going wrong in the console. And oftent times like here it says failed to load resource. The server responded with a

resource. The server responded with a status 403. That's really useful to give

status 403. That's really useful to give to the agent. And so we'll see what it does here. Okay. After 1 minute and 10

does here. Okay. After 1 minute and 10 seconds, it is now done. And here it's running on localhost, but it's also running on this web app server. We can

open this in an external browser. Let's

go ahead and test this. So, we can add an item. Let's go ahead and we can do

an item. Let's go ahead and we can do let's go ahead and paste this link here.

And we can hit save item. And boom.

There you go. This card doesn't look that amazing, but we do indeed have a card saved. And so, if we go to

card saved. And so, if we go to Firebase, right? Remember, we added a

Firebase, right? Remember, we added a database. So, we could go to Firebase

database. So, we could go to Firebase and let's go to the Firebase console.

And so, here's our Firebase project. If

we go into authentication, we can see that we have two users signed up. Those

are both me because I tested the app.

And so in authentication, you can see all of the users who've signed up. And

we can go directly in the database. We

can click on fire store database. And

here we see users. We see that there's one workspace and this workspace has like a unique ID that's right here. And

we can click on items. And then we can click on this one right here. And so

this is the codeex is good for non-coding task. Here is all of the info

non-coding task. Here is all of the info about the thing that we've saved. So if

we go back to our app here, we can see it says codeex is good for non-coding.

And here we see codeex is good for non-coding. So it's being stored in the

non-coding. So it's being stored in the database. And Google Firebase has a

database. And Google Firebase has a different way of viewing the database.

It's not so much like a table like Superbase is for example. But in my opinion, it's much easier to use and it's much easier to edit if you want to add more fields and stuff in the future.

It's a lot more dynamic. What I would also like to test is YouTube. So, let's

go ahead and add. How do we add? Okay,

add an item. Let's go ahead and add a YouTube link. Go ahead and add this

YouTube link. Go ahead and add this YouTube link. Let's see how this saves.

YouTube link. Let's see how this saves.

Oh, okay. It looks like it doesn't have the exact thumbnail that it needs. So

these are I want to give some feedback to codeex. So I'm going to take a

to codeex. So I'm going to take a screenshot and I'm going to go back to codeex and I'm going to say so on the app when I upload an x post it looks

like this. I don't like the blue circle

like this. I don't like the blue circle that's in the xost and then the YouTube video doesn't load the proper thumbnail.

So, I want you to figure out exactly how My mind and other similar apps pull the relevant data so it shows up and shows the thumbnail on YouTube. And then on X,

it should show the first frame if it's a video. If it's a picture, the picture

video. If it's a picture, the picture should show up. And so, please figure out how to do that. It's mostly going to be YouTube videos and X links on here.

So, I want to make sure that these are good. And then also, these aren't

good. And then also, these aren't showing up in masonry grid format. These

should be next to each other. This is

two consecutive that I posted and they're kind of on top of each other.

So, please can you figure that out?

Okay. So, it looks like that it's done.

So, I'm just going to copy this localhost link right here. And I'm just going to go ahead and open up my browser. And we are just going to paste

browser. And we are just going to paste this in right here. And let's go ahead and test it. So, what I want to do is I want to add a new item. And we can add the tweet here. Um, let's go ahead and

add this tweet. Let's see what happens if we save the item. There we go. This

is right. And if we actually go to this link right here, we see that it is this podcast. So it is this link. So there's

podcast. So it is this link. So there's

this copy right here. Then there's a video that starts out on this frame.

This is really cool. And it has this frame right here. It shows up. It looks

pretty cool. We can click on it. And

here are some notes. Okay. Saved post

from X. Okay. Save post from X. So I

could say interesting podcast for comms. And do I need a save or is it just automatically saved? Okay,

cool. It automatically saves. So, it

saves in the database. What happens if we add a YouTube video? So, I'm going to go ahead and add a YouTube video here.

Um, this is one of my videos. So, let's

see how it does. There we go. And it

even pulled in the title. So, the codeex full 2026. This is really cool. And so,

full 2026. This is really cool. And so,

can I add them to a category? Status

categories. How do I do this? Save for

future review. Add a category. Okay, I

see. So I can put long form or I can put reaction. Actually, let's So it doesn't

reaction. Actually, let's So it doesn't show up here, but we do see long form.

Can I Oh, so the category shows up here.

So it is showing up in the database. So

if we add reaction to the categories here, we should see reaction here. So I

can now filter it by reaction or long form or all categories. Very cool. Mind

you, this is two prompts. I believe two or three prompts we've created this. Now

let's go ahead and test Instagram. So if

we add a new item and I will snag this Instagram video from Timothy Shalamé.

And if we paste this here, what happens if we hit save item? Wow, it pulls all of the data. It has a weird format.

Basketball. This is pretty cool. Okay.

And these are different sizes, which is fine. That's part of a masonry grid,

fine. That's part of a masonry grid, which is similar to my mind. And so this app is starting to look a lot better, right? We can have we do Instagram.

right? We can have we do Instagram.

Let's see what happens if we upload a screenshot. So I'm just going to take a

screenshot. So I'm just going to take a screenshot of myself right here. This is

what it looks like if we were to add an item. We could Can we drag this? No, I

item. We could Can we drag this? No, I

don't think we can do that. I'm going to copy this image here. I'm going to choose a file. Let's go ahead and upload this. Save this item. Let's see if the

this. Save this item. Let's see if the screenshot works. Ooh, I think we might

screenshot works. Ooh, I think we might have run into an error. This is good.

Okay. Storage is unauthorized. So, what

we need to do is we need to go to codecs. Great job with Twitter, YouTube,

codecs. Great job with Twitter, YouTube, and Instagram. Those work, but

and Instagram. Those work, but screenshots do not work. I got this error. And I'm going to go ahead and

error. And I'm going to go ahead and paste in that error message. And we can run it. Let's see what the issue is. All

run it. Let's see what the issue is. All

right. So, it said fixed and deployed the storage rule. So, the issue was that the screenshot hits the Firebase storage before there was an item in the document. Okay. Let's go ahead and go

document. Okay. Let's go ahead and go ahead and test this. So, if we refresh this right here, we should be able to go like this. Add item. Choose a file.

like this. Add item. Choose a file.

Let's go ahead and upload that same image here. Let's go ahead and save it.

image here. Let's go ahead and save it.

Okay. So, there's the screenshot. It

shows up in the grid. Now, what we want to do is I want to come up with a better format for the title, right? This title

is pretty crazy. So, we want to use a lightweight AI model to title these automatically. And so, I'm going to just

automatically. And so, I'm going to just screenshot this. And I use a an app

screenshot this. And I use a an app called CleanShot X. And this app allows me to very easily just draw on the image. And I find it to be much easier,

image. And I find it to be much easier, especially when you're taking screenshots of a lot of images. Now, we

can go back to codecs. Okay, the naming of these is getting a little bit weird.

What I want to do is I want to add a lightweight AI model using the OpenAI API, which analyzes any type of data really quickly and then comes up with a better title for it. If there's a clean

title anywhere in the description or of the screenshot, like it should default to the most conservative, simple, like literal title for it and it should be

short and less than six words. Yeah, it

should communicate things concisely and and we're going to use a lightweight AI model for this. Okay, so uh I want to explain something really quickly. So, we

want to use AI within our app. And this

means we want to use the chat GPT technology to analyze all of the items that get inserted into our app. And so,

chat GPT will very quickly use AI to analyze it and create a good title. And

so, in order to add the chat GBT technology into our app, we need an API.

And so, we are going to use the chat GPT API. And what this will do is this API

API. And what this will do is this API will allow us to insert the chatgbt technology into our app very similar to like a tool like Perplexity which uses

all of the other companies APIs and puts it into their app. And that's where you hear the term chat GPT wrapper. The

thing about the API is in order to use the API it actually costs money, right?

Every time someone uses your app and creates a title, it costs money and it will probably be less than a cent every time someone adds something. probably

much less than a cent because it's very little amount of words or tokens but nonetheless you are going to need a key.

So in order to use the chatbt API you need a key. The same thing if you were using the Anthropic API, right? If you

were using Enthropic, if you're using Nano Banana from Google, you would need an API key. In order to use the chat GPT

API, you can simply look up Open AI platform. And you can click on this

platform. And you can click on this right here. And then you're going to

right here. And then you're going to sign in. And once you're signed in,

sign in. And once you're signed in, you're going to click on API keys. And

then what you're going to do is you're going to create a new secret key. And

you're going to come up with a name. And

I'm going to type in my name. We can

call this shared brain which is the name of our app. I'm going to pause the video right now because I do not want this key to be shown. Okay, so I copied the key to my clipboard and I'm going to go back

to codeex and within codeex I'm going to say here is my API key. Okay, so I pasted my key below and now I'm going to press enter and so now my prompt is

running. My API key is included. I'm

running. My API key is included. I'm

going to add is it should analyze screenshots as well. Okay, so it's done. So it used

as well. Okay, so it's done. So it used 4.1 nano, which is a very fast model, which is actually what we want. So if we go back to our app here, we can actually

refresh it. So let's go ahead and

refresh it. So let's go ahead and refresh. And what we can do is let's do

refresh. And what we can do is let's do x.com.

x.com.

Let's do this one of me. We can hit save. And it just does save post from X.

save. And it just does save post from X.

Oh, codeex for non-coding tasks. It

renamed it. Okay, so that's pretty good.

It renamed it codeex for non-coding tasks. and it used AI to generate this.

tasks. and it used AI to generate this.

Let's try it one more time. Let's do a uh let's do a YouTube video. Let's do

this video and we will save this item.

Competition is for losers by Peter Teal.

Competition is for losers. Okay, so AI is now renaming it depending on what it is. For whatever reason, the YouTube

is. For whatever reason, the YouTube videos are showing this like weird uh thing right here. So, if we go back to codeex and we paste in this screenshot, please make the YouTube videos like it

has like this weird like overlay. Make

it like a red play button instead and make it like better. And while that's loading, I'm just going to take a screenshot of this. I want to reorganize this part right here. So, I'm just take a screenshot. And now I'm going to

a screenshot. And now I'm going to square this in. And I just want to like hone the agents attention to this part right here. And we're going to go back

right here. And we're going to go back to codeex. And I'm going to say I'm

to codeex. And I'm going to say I'm going to now double tap for uh whisper flow. flow. And by the way, I'm using

flow. flow. And by the way, I'm using whisper flow to speak into codec. So,

I'm going to double tap. Okay. What I

want to do is I want to change it so that where it shows your second brain, like where I type into the search bar, what I want to have happen is I want all

of the filters to be drop down. So, like

they should be um to the right of the search bar. And so, I want there to be a

search bar. And so, I want there to be a category dropdown. And so, I want it to

category dropdown. And so, I want it to be default like all cate all categories.

And then I want there to be a platform dropdown where I can select the platform. And by default it's all

platform. And by default it's all platforms. And so that way we have different filters. And then since this

different filters. And then since this is an internal tool, I want all users to show up as well. So I want to be able to filter by user. And that means right now I'm signed in as someone and I want to

be able to by default it is my posts, right? It should not show the other

right? It should not show the other users posts because it's autofiltered, but I do want to be able to see all of the posts. And that's you might need to

the posts. And that's you might need to change the permissions because remember this is an internal tool. I want to be able to see everyone else's. If I select all users or select the other users and

this will be an internal tool. So if I have someone else sign in from my team I should see their name as an option but by default I should only see mine. So

there's going to be user, there's going to be platform and there's going to be categories. Then we press stop

categories. Then we press stop recording. I like to just record my

recording. I like to just record my voice. Go look directly at the app.

voice. Go look directly at the app.

Speak speak. Once I'm done, I come back to codeex. And now we can fire off this

to codeex. And now we can fire off this prompt as well. While that is working, we can check on the previous one that we made. Look, there we go. Our YouTube

made. Look, there we go. Our YouTube

videos are fixed. So, we can filter by YouTube. And you can see now we have the

YouTube. And you can see now we have the red plus sign. I think this is starting to look pretty good. Additionally, I

want you to use a different font. And

then I want you to please make the background more gray and make it like a very slight gradient from gray to like a slightly darker gray just to give it a

little bit more energy. And somehow make the cards a little bit better. Maybe add

a slight border around them. Don't go

too crazy. This app is starting to look a little bland to me. I want it to just like spice up the edges a little bit.

And since these are completely unrelated, I'm just going to let this one finish. And then as soon as this

one finish. And then as soon as this one's done, it'll enter it in the prompt. And this is called queuing. So

prompt. And this is called queuing. So

by default it cues. So your prompt will just sit here and wait for the agent to be done and then it'll be entered. Or

you can steer it by pressing steer. Or

you can press command enter. It'll enter

your prompt into this. All right. So I

think it was a matter of six or seven prompts. We created this app right here.

prompts. We created this app right here.

It looks a lot like my mind and we can very easily upload links. AI analyzes

it, titles it. It pulls the graphics to make it kind of this like graphical interface. So I can very easily see what

interface. So I can very easily see what the post is about. So this is really cool. I can filter by post. So what I'm

cool. I can filter by post. So what I'm going to do here, I actually want to check the multiplayer nature of this. So

if I sign out right now and I hit continue with Google, and we sign in as my other account, I can switch to my other account, Riley 1, and then I can switch back to my posts. Let's go ahead

and add a new item. I'm going to go ahead and add a x.com link. We'll choose

a random one. This one looks good. Now,

what I'm going to do is I'm going to hit save item. Open AI agent builder at dev

save item. Open AI agent builder at dev day. That's exactly what this is. This

day. That's exactly what this is. This

is really cool. So, it it uses AI to name it. And now I can click all users.

name it. And now I can click all users.

So, now it shows mine and my whole team.

So, we have a second brain that is multiplayer in nature. And I think this is looking pretty damn good. All right.

So now it's time to take our app that right now it is running on localhost 5175.

This means it's running locally on our machine. If you were to send someone

machine. If you were to send someone this link right here, localhost 5175, and they entered it in their browser, they would get nothing. And what we want to do is we want to put it on the actual

internet. And the way that we do this is

internet. And the way that we do this is we are going to deploy it. And

personally, I'm going to be using Versell. And you can very easily set up

Versell. And you can very easily set up Verscell by going to plugins and we're going to search for Versell. And you're

going to download this plugin. And then

watch how easy this is. Deploy to

Versel. Then give me public link. One

other thing that you're going to need to do, I need to put into Firebase approved authentication links. I'll explain this

authentication links. I'll explain this in just a second. So now it has been deployed to the internet. And so all I have to do is click on this link and this will take me to a real website. So

this is a real deployed website on the internet. But check this out. When I hit

internet. But check this out. When I hit continue with Google, I get an error.

This is an unauthorized domain. So what

we need to do is the reason I asked it to give us a domain to put in the authorized domain in Firebase is we actually need to give this new domain permission to use the authentication.

And so we are going to just copy this link right here. Now, we're going to go to the same Firebrace project that we created earlier. And now, what we're

created earlier. And now, what we're going to do is we're going to go to authentication, and we are going to go to settings. We're going to go to

to settings. We're going to go to authorized domains. And notice here

authorized domains. And notice here there's localhost. And so, this is why

there's localhost. And so, this is why localhost works by default. It's

automatically a uh authorized domain.

And that's why anytime you're using localhost, it just works. You can use authentication. But we actually need to

authentication. But we actually need to add the domain for the Verscell app. And

if we were to add a custom domain, we would need to add that one as well. So

we need to hit add. Now check this out.

If we go back to shared brain, let's give it a refresh. Continue with Google.

And now it works. And so now I can sign in with the same account that I signed in with before. And I should see all of my data. I do indeed. We can zoom in

my data. I do indeed. We can zoom in here. Here's all of my data. It's on the

here. Here's all of my data. It's on the sharedbrainer riley.cell.app.

sharedbrainer riley.cell.app.

And that's it. We have a web app that has been deployed to Verscell. It is on the internet. It is a real website on

the internet. It is a real website on the internet and all we did to get there is we prompted codecs. The agent which is GPT 5.5 created some files. We

iterated and the agent made changes to those files. We took a look. We added

those files. We took a look. We added

authentication database so our data is stored. We added a storage bucket so we

stored. We added a storage bucket so we can add those screenshots and even videos as well. And we deployed it to Verscell. We used GitHub to save our

Verscell. We used GitHub to save our work. Now it's on the internet. Now what

work. Now it's on the internet. Now what

I want to talk about is how do we go from a web app to a desktop app and mobile app. And instead of me answering

mobile app. And instead of me answering this question, let's just go to Codeex.

So on Codex, I'm going to use this prompt right here. All right. So I want to turn this application into a desktop app and an iOS app. We're going to use Electron and Swift. Electron is just a

stack. It's kind of like a wrapper of a

stack. It's kind of like a wrapper of a web app but turned into a desktop app.

And I have found it to be the easiest to use. And we're going to use Swift. And

use. And we're going to use Swift. And

this is for the mobile. And I want to get a plan. I want a plan to do this.

And it will communicate with the same backend. And all the database storage

backend. And all the database storage and au authentication will remain let's say connected. And I want all these apps

say connected. And I want all these apps to work together. So my team can use any version. And then we're saying make a

version. And then we're saying make a markdown file plan. So we're going to have Codeex come up with a plan to convert this app into a desktop app and a Swift application. Okay. So it created

this entire plan here. And rather than creating a new project and creating completely new context for a new agent to implement this plan, I actually don't even know the answer to this. I said,

should we do this in this project here at this file path or should we make new projects for each of these? And it said do it in this project. And so what the way that it's the agent is planning on doing this is it's actually going to

create an apps folder and then it will have the web app, it'll have a desktop app and an iOS app all in one project which is this my apps shared brain

project. So what we're going to do here

project. So what we're going to do here is since it already knows all of the information about our web app and it's kind of already thought a lot about the plan, I'm going to go ahead and let it cook. All right, so I think it's ready.

cook. All right, so I think it's ready.

So I'm just going to say, okay, please take a deep look at the plan that you created. Here's the plan. By the time

created. Here's the plan. By the time you are done, I want to be able to use all three of these applications together. Make them perfect and ready to

together. Make them perfect and ready to use for my team on any of these three platforms. Don't stop until you're done.

Let's go ahead. We are going to see if the AI agent, this will probably take 40 minutes. I'm going to go get lunch while

minutes. I'm going to go get lunch while this is working. We will see how far it gets and see if it's able to take our web app and turn it into a desktop app that we can download and an iOS app that we could send to the app store. All

right, take a look at this. It just

worked for 29 minutes and 52 seconds.

And so what we just asked it to do is we asked it to create a desktop app and an iOS app. And so now what we are going to

iOS app. And so now what we are going to ask it to do is we are going to say can you please run the desktop app application. This should be able to just

application. This should be able to just do everything that you need to run the application. So it should be able to run

application. So it should be able to run it and we should open it like a desktop app. Oh wow. Here we go. So this just

app. Oh wow. Here we go. So this just opened on my computer. I see a desktop app. It's not on the right screen here.

app. It's not on the right screen here.

Maybe I can move it over here. I don't

know if you can see this. I actually

can't move it. Let's see if I can full screen it. So, I can indeed full screen

screen it. So, I can indeed full screen it, but I actually can't move it around.

I'm going to make sure that we tell Codeex this. Right. By the way, I cannot

Codeex this. Right. By the way, I cannot move the window around. Please allow me to like grab the top of the window and move it around.

But let's see if we can sign in. So, we

can full screen it. Continue with

Google. Okay, let's sign in with Riley at not a number. Okay, error off popup blocked. Additionally, I got this error.

blocked. Additionally, I got this error.

It did let me sign in, but when I I it took me to the web app to sign in and then back to the app and I still see this. So, we're just putting this error

this. So, we're just putting this error in here. Okay, so it just reloaded up.

in here. Okay, so it just reloaded up.

And let me just really quickly break this app down. So, this is an Electron app. This is running on our computer and

app. This is running on our computer and it even created this little icon for it and called it shared brain. Yeah, it

doesn't have rounded edges like the other icons, just this kind of square, but it has an icon on our computer. So,

if we just hit continue with Google.

Okay, it opened this up. And now we can hit open shared brain. Let's see if we log in. Yes, look at that. In a couple

log in. Yes, look at that. In a couple of prompts, we have logged into a desktop app that looks exactly like our web app. And so we can actually just if

web app. And so we can actually just if we go like this, we should be logged in.

All right. So here we have an identical application and maybe there's going to be some slight differences here. We have

a desktop app here on the left and our web app here on the right. We have

created a desktop version. This is

running Electron. And let's see what happens if we were to add something on the desktop. So if we add something on

the desktop. So if we add something on the desktop, we can go x.com. Let's go

ahead and add this post here. We can

click this. Okay, this got added. So,

this is a tweet of an SVG generator. We

can click on this app icon creation using AI workflow. That's accurate. And

it's synced to our desktop app which we can view just like this. Wow, it is almost identical. This is very cool. So,

almost identical. This is very cool. So,

we have this desktop app. Let's do let's try let's add one more. So, we should do some testing. add this. It's a company,

some testing. add this. It's a company, a link of a tweet that I saved about a new company releasing a product called HQ. If we hit save, it should use AI to

HQ. If we hit save, it should use AI to generate everything. And now we can

generate everything. And now we can enter it. Wow, this looks good. This

enter it. Wow, this looks good. This

kind of looks better. Yeah, I think this looks better than this. But there we go.

We have this notes app. Very similar to my mind. This is a desktop app. This is

my mind. This is a desktop app. This is

a web app. Now that brings me to the iOS app that remember it already built. We

just haven't run the app yet. So what we want to do is we want to go back to codeex. And so I want to say remember

codeex. And so I want to say remember earlier we made a mobile app. I want to run this. Please run the Xcode project.

run this. Please run the Xcode project.

I'll explain this in just a second. So

while this gets set up, in order for you to run iOS apps on your computer, you need an app called Xcode. So, Apple

created Xcode, which is their own developer platform, which allows you to run iOS apps on your computer using something called Simulator. So, you're

going to need Xcode and Simulator. And

in the link in the description below, I will put a full guide on how to get started using Xcode and Simulator. And

it's relatively easy to set up. You do

need a Mac for this. It's going to run it in an iPhone simulator directly on my computer. And look at this. It says the

computer. And look at this. It says the simulator build is underway. Firebase

and Google Signin packages resolved.

Xcode is compiling the native app. Now

the iOS app is built successfully for the simulator. I'm booting an iPhone

the simulator. I'm booting an iPhone simulator. Now look, there we go. Here's

simulator. Now look, there we go. Here's

the simulator.

It should open up the app. Let's give it a second. There we go. Look at this.

a second. There we go. Look at this.

Shared brain. This is an app that's on our computer. Let's go ahead and sign in

our computer. Let's go ahead and sign in with Google. Let's see if this works.

with Google. Let's see if this works.

Continue. Okay. I'm going to enter my information. Okay. Now, we'll hit

information. Okay. Now, we'll hit continue. Keychain error. Interesting.

continue. Keychain error. Interesting.

So, what I'm going to do is I'm just going to screenshot this, right? And

we're just going to toss this bad boy in here. And I'm going to say I got this

here. And I'm going to say I got this error on sign in. Okay. So, it is done.

Let's go ahead and open this back up. If

we go simulator, sign in with Google. Continue. All

right. Let's see what happens if we hit continue this time. Boom. on codeex. We

created, look at this. This is actually crazy. Oh my god. We created a web app

crazy. Oh my god. We created a web app that has a backend database and storage.

And then in less than seven prompts, we converted this web app into an Electron app that works perfectly. This is a desktop app. Downloaded to my computer.

desktop app. Downloaded to my computer.

Here it is in shared brain. And then we created the iOS app version of this app.

I I it's just it's it's literally it's mind-blowing. I can't sometimes I just

mind-blowing. I can't sometimes I just can't even fathom that you can do this now. And we basically got 98% of the

now. And we basically got 98% of the work done in a single prompt. That's

pretty awesome to me. Anyway, let's get back to the to the video. And so now, if we wanted to iterate on this iOS app, we can very easily do so. We can just start asking for some changes on the search

bar. Please ch make the placeholder text

bar. Please ch make the placeholder text just say search instead of search your second whatever because it's being cut off.

Oo.

Oh, okay. So, in the details for each one, like if I click on an item in the list, uh it shows title, notes, status,

plan, film date, add film date, clear film date. Everything here is just a

film date. Everything here is just a little too like clunky and not very good. There's too many components. I

good. There's too many components. I

want everything simplified. So think

deep and just fix the formatting like for all of the info about each one.

There's a lot of simplification you can do here. And then the plus sign to add a

do here. And then the plus sign to add a new one. I want this to actually be like

new one. I want this to actually be like a button on the bottom right of the phone that hovers over everything that I can press. It should be a big plus

can press. It should be a big plus button. So move that to the bottom right

button. So move that to the bottom right of the phone overlay. This is a common design I've seen. All right. So we're

making like six different changes here.

And it is really this easy. And we can run this. And so now this is just going

run this. And so now this is just going to change the iOS app. And we can actually specify that iOS app changes only. And it looks like that it's done.

only. And it looks like that it's done.

We can come over here and let's see what it looks like. It is much more simplified. So if you look at this, it

simplified. So if you look at this, it does look a lot better. Let's see if the placeholder text is just search. It is.

Now there's this overlay button right here that is plus that allows us to add an item, which I think is better. And

this app is looking pretty good. And I

actually was just reminded of a feature that we asked to add earlier, which is I wanted agents to be able to add things to our second brain. So if we copy these

instructions right here, and if we actually let's just go to a new chat and say use this skill, add these tweets to

my shared brain. Okay, let's see if this works. Okay, so it's done. It said added

works. Okay, so it's done. It said added all three tweets to shared brain using the Google authenticated Firebase session. The feature that I wanted I

session. The feature that I wanted I wanted to allow for agents to add things to my second brain on my behalf. Let's

see. Wait. Oh, this just is my post.

Let's see all users. Oh, it did it. So,

there you go. It added this codeex for everyday work cla review and Claude Opus 4.7. So, the agents were able to add it.

4.7. So, the agents were able to add it.

However, I'm not sure what account it's from, but this is really cool. The agent

feature does work. The agent can add things to the database as we originally designed. So, in summary, in this video,

designed. So, in summary, in this video, we created three apps using codecs. We

created this full web app and in a couple of prompts, we converted it into a desktop app and an iOS app that shares that same backend and storage and

everything. And now this is usable by

everything. And now this is usable by everyone on my team at this exact domain. They can sign in, they can add

domain. They can sign in, they can add to the second brain, and they are able to see all of our posts. And so this is more than enough for you to get started and start experimenting with building a

web app, a desktop app, or an iOS app. I

could push this all the way to the end and get this app on TestFlight and then onto the app store and even put a payw wall on it and start making money. Uh, I

could also put the desktop download link on the internet, but that's not in the scope of this video. I'm going to make dedicated videos on how to create a desktop app and how to create an iOS

app. These are very deep videos that are

app. These are very deep videos that are this video would be 6 hours if I went into all of the details of iOS apps and desktop apps. So, I think this is a good

desktop apps. So, I think this is a good stopping point for you to get your feet wet. If you have a chatbt subscription,

wet. If you have a chatbt subscription, you can literally use codecs. Try to

build an app. You can use Firebase. If

you don't want to use Firebase, you can use Superbase or Neon for the backend database and storage. I really want to know what you guys are building, so let me know in the comments. But this is a really fun video. We are actually going

to use this internally, and I'm really excited to see what you build. Anyway,

let me know what you guys build in the comments. I'll see you here for the next

comments. I'll see you here for the next