Ep 1: Borderless Wire

0:09Okay. So, this is the very first

0:09Curiosity Builds video that I'm going to

0:12post. And what we're trying to do here

0:14is show what we're doing over at

0:16Hypandra with not just Curiosity Builds,

0:19the product we are trying to create and

0:22ship, but what we do as a company, how

0:25we've been creating and and how we've

0:27been using AI, particularly through

0:30coding, prompting, um, and getting that

0:33to work for us. So, I thought it'd be

0:35cool, we thought it would be cool to

0:37kind of show some of this in a just a

0:39super simple way. This is very clunky.

0:42Uh, I'm going to be just doing this as I

0:45do it. I'm going to talk through things.

0:47Hopefully, it makes sense. I'm going to

0:50try to keep these to like 15 minutes,

0:52just kind of doing one or two things at

0:53a time to show people, you know, what's

0:56possible, what we're doing, the way we

0:58do it. And it's kind of like live

1:00learning. So, a lot of the stuff that I

1:03encounter on these videos will probably

1:05be things that I'm working through for

1:07the first time or have only worked

1:09through once or twice. So you'll watch

1:11me stumble and I'm sure if you've used

1:14this stuff before, you're way more

1:16advanced than I am. But here we are. So

1:20curiosity builds is this idea that we

1:22came up with letting people's curiosity

1:24drive

1:26learning for them. So, we are taking

1:30what people are interested in, what

1:32they're curious about, what they want to

1:34create, whether it's a tool, an

1:35extension, a website about a topic or an

1:39area or problem that's just been on

1:41their mind. And from there, teaching

1:45them how to use the very modern AI

1:49coding tools that are available to try

1:51to create those things. And the purpose

1:54is to show the power of AI, how it can

1:56be used effectively, how you can

1:59intentionally create using AI without

2:02letting it just deliver what looks like

2:05magic results without understanding them

2:07or really being critical of their

2:11outputs. So, uh, that's very lofty. This

2:15is going to hopefully have shades of

2:17that. Uh, what my curiosity build that

2:20I'm working on is called borderless

2:22wire. This is an idea I had. Um, this is

2:24the preview. It's very messy, so that's

2:27why we're working on it. Um, I wanted to

2:29create a website where you could go to a

2:30globe and click on a country and then

2:34once you're in that country, you get a

2:36little snapshot about the country and

2:38then local news, trying to find local

2:41news sources that are free or allowed to

2:43be

2:45uh kind of collected and then if it's in

2:48a language that's not your native

2:49language, they're translated for you. I

2:51thought that would be really cool and it

2:53has lots of features that I want to

2:55learn how to create. So, we're gonna

2:59we're gonna get off to the races here.

3:01Uh, what I use is cursor. Um, this is

3:04cursor. This is a terminal. Terminals

3:06are available on your computer. Just,

3:08you know, you can pull up a terminal

3:10anytime on your computer, I'm pretty

3:12sure. Just go to your applications and

3:15look for the terminal. uh

3:19applications terminal and it should be

3:22available to you. Or maybe not. I think

3:24it is

3:27terminal.

3:30Yeah, I could just pull it up and open

3:32it up, but cursor puts that terminal in

3:35here and marries it to a bunch of AI

3:38agents. So, I'm using Codex and we're

3:41going to try to get this website to look

3:42a little better. Instead of toggling

3:44back and forth or swiping back and forth

3:46to the preview just to make it easier

3:48for anybody who might be watching, I'm

3:50going to have the preview here. The way

3:52you do that is you copy your URL. This

3:55is just a localhost, so it's just on my

3:57is just a localhost, so it's just on my

3:57computer preview, but you can use any

3:59URL that you want it to show. And then

4:01on a Mac, it's command shiftp simple

4:05browser show. You paste the browser and

4:07then it shows it right here. Hooray.

4:10There we go. So, we can kind of see what

4:11we're working

4:13almost exclusively over here in the

4:15agent because I am not a coder. I'm

4:18learning terms. I'm learning how these

4:20things work while I'm using AI to create

4:24with coding, but I didn't go to school

4:27for it. So, I do need to work with an

4:29agent to describe what I'm trying to

4:31achieve and then that agent works

4:34through the code to try to get the

4:35vision that I'm describing to be

4:37displayed on the page.

4:40lot of back and forth, but it's it's

4:42fun. So, let's just get started.

4:50I want to try to move the globe up to

4:50the top of the page. Right now, it's

4:51sitting on the bottom and it's behind

4:54this scrolling menu

4:58pile, and you can't really see it. It

5:00used to be sitting at the top. So, I

5:01want to move it back up to the top to

5:03start so we can get a better look at the

5:06globe itself and decide how we want to

5:08improve it.

5:11I did speech to text. It's just faster.

5:13So, it copied everything in here. I'm

5:15going to send that to my Codex agent.

5:18I'm going to put it into planning mode.

5:20Um, for something this simple, I might

5:22not normally do that, but I want to show

5:24what that does. It also lets me see what

5:26it's thinking, what it's going to do,

5:28and helps me make sure that it

5:30understands me. But you can always say,

5:34no matter what you're doing, whether

5:35it's on chatbt,

5:37claude, or in here in cursor in this

5:40this area where I'm I'm using the AI

5:42agent, you can ask it to confirm it

5:45understands before it acts. And that's

5:47always wise. Uh, but planning mode kind

5:49of does that. So, we'll put it into

5:51planning mode, and it's going to do its

5:52little thinking. Um, and while it does

5:55that, uh, we're gonna watch it. I like

5:59to try to glean what I can from the

6:02thinking mode over here. In fact, I'll

6:04collapse the agent window and make this

6:07a little bigger because this is good

6:09information. And it doesn't just spit

6:11out ones and zeros or numbers or

6:12gobbledegook. It actually puts out full

6:15sentences and paragraphs explaining the

6:16reasoning, which you can go back and

6:18review later if you're interested. And

6:20you should if something happens that's

6:22very are very terrible. It's kind of

6:25good to go back and look through what it

6:27was thinking. So, where should the globe

6:29live? At the top, it's asking me

6:30questions while it's making its plan,

6:31which is also very helpful. At the top

6:34of the hero section above the scrolling

6:35menu content, no overlap.

6:38Other I want it to be the first thing

6:40you see right under the BorderlessWire

6:43you see right under the BorderlessWire

6:43nav bar. All of the other information

6:46that's on the page

6:49can just sit below it. It doesn't need

6:51to be layered. So, it scrolls.

6:55We're probably going to change that

6:56later, but that's kind of I just want to

6:58get that out of the way now because I

6:59just want to focus on the globe, and

7:01it's just so annoying how this is set

7:02up. When you scroll, should the globe

7:04stay sticky in view or scroll away

7:06normally? Scroll away normally like

7:09normal content. All right, let's see

7:11what it does with that.

7:14It's making its plan. And it says,

7:17right, and you can it'll like it's

7:18throwing the plan up here actually. Uh,

7:20additionally, so I can toggle over here

7:22back to the browser, but I can read

7:24through the whole plan, the files. It's

7:26going to use the approach, simplify the

7:28hero layout, so the globe is normal, a

7:30normal block section instead of sticky

7:32overlap backdrop, remove the negative

7:34margin, remove the spacer. Notes, the

7:36current overlap behavior is driven by

7:38the sticky wrapper and the how it works

7:40section. Negative margin top padding.

7:42We'll convert this into a standard

7:45vertical flow. So the globe appears

7:47first under the header and then content

7:49follows. It's really helpful to read

7:51this plan because I am also learning

7:54some terminology and order of operations

7:56here. So in addition to having this do

7:58things that I don't know how to do um in

8:02detail, but I know how to describe and I

8:04know what it is I'm looking for. I'm

8:08getting back this plan that I would

8:12execute if I had gone to coding school

8:14and we didn't have this available. I'

8:16I'd ostensibly I would understand what

8:19I want to and then approach it

8:20similarly. But this is doing it for me,

8:22but then it explains it so I can learn

8:24it. Very important to read this because

8:27it helps you in your prompting and how

8:29you describe things later on so you can

8:31arrive at where you want to be faster.

8:34Um just if I sat here and I have a plan

8:38and I just had it do things. Especially

8:40if I hadn't

8:42worked with this for a while like I

8:44have, I'm going to be just spending

8:46tokens trying to get it, trying to

8:48finesse it where I want. I'm If you've

8:50ever been in chat GPT and you give it a

8:52prompt or you ask it a question, how

8:55many times you have to reprompt it or or

8:57re reframe it so that it gets where you

9:00want it to go because it's making

9:01assumptions and it's taking you to a

9:03place you didn't intend. Um, so it's

9:06good to get this context. You can click

9:07the build button. It turns it into an

9:09agent and then it starts to build and we

9:11can kind of see what it's doing over

9:13here. Um, if this doesn't show up very

9:15well, I can always toggle over to the

9:16main site. Sometimes you can see the

9:19little changes as they happen. Sometimes

9:22it's so much happening in the

9:23background, it doesn't show up visually

9:24until kind of like the very end and it

9:27just kind of bam, it's there and you see

9:28if it worked. Um, one thing I've picked

9:31up on over here when working with agent,

9:34especially Codex. By the way, I'm in

9:36Codex uh GPT 5.2. I have all of these

9:40models available to me. Cursor gives you

9:42all of these. You do need to connect

9:43them to your accounts. Um they do have

9:45their native model composer, which is

9:47pretty good, too. Um

9:49so anyway, it's doing what it thinks it

9:53should do and I am not seeing any

9:55results here. But it could be that I

9:56need to refresh. Sometimes that's

9:58required. But look, I don't see it there

10:01at all. Test run not required. If you

10:04want, I can run dev server or tweak

10:05spacing height for the globe section. So

10:08the globe's still sitting behind the

10:10scrolling the scrollable menu that says

10:14BorderlessWire brings you local news

10:15BorderlessWire brings you local news

10:15from anywhere translated. I can't see

10:18the globe at all. We want to bring it

10:19back to front and center.

10:28You might want to go back to an earlier

10:28version of the globe.

10:30It used to sit at the top before we were

10:33tweaking the header components a few

10:36days ago.

10:42It doesn't have the context for that.

10:42Um, but when I do my prompting and when

10:46I talk to agents, these LLMs, whether

10:48it's in cursor or whether it's, you

10:51know, in my own personal life, I just

10:53talk to it naturally. I know there's a

10:56it used to worry not worry me used to

10:58scare me make me a little apprehensive

10:59to get involved with AI when I first

11:01learned about prompting. I thought it

11:03was something very specific and very you

11:06know academic and it can be and it is

11:08and those things are great to have but

11:11if you don't have those at your

11:12fingertips it is perfectly fine to talk

11:16to this thing the way you would talk to

11:18a person if you're able to use speech to

11:20text um or just the way you That is a

11:24great way to entry into this. I have

11:27made it a point to just talk to my LLMs

11:30the way I would talk to other people.

11:32Um, it helps me get my words out. It

11:35helps me describe. It's not always as

11:36concise as it should be. A lot of times

11:38I do a little overexplaining which has

11:41has its drawbacks. It's better than

11:43underexlaining, but it's just it works

11:45work it works for me. Um, and so that's

11:47kind of how how I go through this. So

11:50sometimes this takes a while. also

11:52internet dependent. Um, but it's going

11:54through and it's trying to

11:57uh accomplish what I would like it to

11:59do. So, let's see what it does.

12:14I think what's going on is the hero

12:14section is so long that it's just

12:16extending over the globe. I want the

12:19globe to sit above the hero section

12:22content and not underneath it or below

12:24it.

12:30Now, this is too much of a struggle for

12:30the LLM because sometimes they get kind

12:32of stuck. They don't fully understand

12:36what you're trying to do, no matter how

12:38articulate you might be. Um, you can put

12:41a screenshot in and it is able to look

12:43at it and it can get more information.

12:45Just kind of like a person in some ways,

12:48it's easier to understand what the

12:50description is if you have a visual.

12:52This is able to look at a file, an

12:56image, and extrapolate, which is very

12:59helpful. Okay, now it says refresh and

13:02see.

13:04Maybe I'm on the wrong host.

13:10Let's see.

13:10I did bun dev. So, we're having it

13:13run up another server. It could just be

13:15looking at something incorrect. But if

13:17not,

13:32It's still hidden completely. Are we on

13:32the localhost 3000 or 3001?

13:51So, let's kill this terminal.

13:51We're going to kill the terminal. We're

13:53going to kill this terminal, too.

14:00We're going to open a new terminal

14:00and we are going to run again. And this

14:04just launches the localhost.

14:07just launches the localhost.

14:07uh so I can see what I'm doing. And

14:09yeah, so there we are. It was just kind

14:12of I think it was a cache issue. So

14:15sometimes you have to double check that

14:16and I had to learn that that was

14:20something I might need to do. Restart

14:21the local server or refresh my cache. Um

14:25anyway, it's running on 3000. So I'll

14:28let the agent know. Looking good. It's

14:30running on 3000. So, now we're going to

14:33get into what I really wanted to try,

14:36which is add color. And I'm trying to

14:38keep you these videos short. So, we're

14:40just going to do this one small extra

14:43thing now that we've got this up and

14:44running and visible. We're going to add

14:47some color. I want the color palette to

14:50look like maps you would see in an

14:52atlas. Kind of the pastel blues and

14:55yellows and greens that we're all

14:56familiar with. And I want it applied to

14:59every country.

15:16You can see I kind I I kept holding the

15:16speech to text so it got some of this

15:19other context in there. Sometimes I

15:21would go through, depending on what this

15:23was, I might go through and delete it

15:24because I don't want to confuse it or

15:25cause a hallucination. But I think this

15:28is fine. It understands I'm going to

15:30make a video. So, it is going through.

15:33It's doing what it hopes it's supposed

15:36to do. And we'll see if it added color

15:38to this at all. So, not quite yet. It's

15:41saying there's some issues, but this is

15:43good for us to look at. So, in the local

15:45preview, whether it's here or

15:49here,

15:50it will show you issues down here and

15:53you can pop those open. I don't So,

15:56yeah, there's a console and so there's

15:58an unknown expression mod. So,

16:01We could work through this if I was, you

16:03know, super up to speed on how to debug

16:08and fix console errors. I dive in, but I

16:10don't know how to do that. I'm going to

16:12click this copy button. I'm going to go

16:14back over to my terminal, and I'm going

16:16to put this just in there verbatim, and

16:18it's going to read the error and try to

16:21figure out how to fix it.

16:24One of the great things about having an

16:26AI tool like this is I know what I'm

16:29looking for. I know how to describe it,

16:30but I don't quite know how to sequence

16:34the building and what downstream effects

16:37cause different things to happen. So,

16:40the agent can help me work through that.

16:43I'll show correctly if you want

16:44different tone balance. Yeah, pallet

16:46doesn't show correctly, but we're back

16:47to one the other issue. So, we'll copy

16:49that that in there and see if it can

16:53solve it for us. And if it can't, then

16:56what we will do is go back through

16:59prompt. But this should come up now no

17:02problem.

17:07Hopefully I won't eat those words in a

17:07second, but I'm pretty sure this will

17:09work.

17:11There you go. Look at that. So, a little

17:14bit of back and forth, but not too much.

17:17I don't like how the US and Canada are

17:20the same color. Um, so I do think I want

17:24to ask it to go through and try to space

17:27the colors out a little more

17:30a little more um evenly. So let's try.

17:37All right, this looks great. The only

17:38thing is I want to make sure if possible

17:41that two countries that are bordering

17:43each other or at least significantly

17:45bordering each other don't have the same

17:47color. Right now I see China and

17:50Mongolia, India and Pakistan, the US and

17:53Canada all have the same color. So let's

17:57try to break it up and make it a little

17:58more interesting to the eye.

18:04Now that it's applied the colors

18:04correctly, it probably won't have an

18:06issue making these adjustments. We just

18:08had to work through getting the pallet

18:10on here. Um, sometimes what happens is

18:13it's on there and it doesn't look like

18:15it. Like I said, there was a cache

18:16refresh, but other times there could be

18:18invisible things over the top that are

18:20blocking that you don't know that it's

18:22it's sitting there, but it's part of UI

18:25design. Um, and it can really affect

18:28what you're seeing. Okay. Yeah, look.

18:30So, we changed Canada's color a little

18:33bit or no, I clicked on it. Sorry.

18:39Features that we'll talk about and work

18:39on in the next little video.

18:42But if this gets this correct, then I'm

18:44going to commit this, which is saving

18:46the changes, and then uh we'll work on

18:49something else later. But I'm liking how

18:51this looks. Uh yeah,

18:58I'm liking how this looks. If we can

18:58just get the color spacing a little more

19:00clear, it' be great.

19:07The next thing I want to work on is

19:07probably this zoom um to be a little

19:11more full page.

19:19All of this is code by the way that it's

19:19writing. So you can see the code that's

19:21there. The Codexists. It's not a

19:22there. The Codexists. It's not a

19:22mystery. It's not some magic spell. It

19:24is available to copy, paste, save,

19:26share. Um once you've created it, have

19:29people look at it. Um so there it is.

19:32Give it a refresh. All right, we're

19:33giving it a refresh. What did you do?

19:35Hey, look at that.

19:39Okay.

19:40Oh, look at that. Yeah. Yeah, I like it.

19:44There might be some things we're not

19:46seeing, but overall, good enough for me

19:49for now. So, in order to make sure this

19:52doesn't go anywhere, we don't lose it,

19:53we're going to type, we're going to tell

19:55it to commit this,

19:58and then it'll save the changes locally

20:00and nothing will be

20:03affected should we work on other stuff.

20:06So, that's the first uh video that I'm

20:08going to do and hopefully I'll keep

20:10doing more and I'll get better at

20:11describing things. If you have any

20:13questions about what I'm doing or any

20:15opinions or feedback, I will read the

20:17comments for sure because I'm learning

20:18too. Um, it's fun stuff. Yes. Yes.