Building with AI + Replit

Amie: [00:00:00] Hi everyone. Welcome. Thanks for your patience.

Just gonna get a few more of you admitted here. Hope everyone's doing well on this Monday. Thanks for joining us. I am Amie. I've been leading these workshops for Ben. You might have seen me at one of these or in the community. So thanks for joining today. We have Matt who heads up developer relations that we with us today.

And. If you are on Twitter or x, whatever you wanna call it and you are in the AI space, I'm sure you know who he is. I would call you prolific at this point in terms of the things you're posting these days that you're building with ai, a lot of fun things. One of which we're going to be building today, it sounds I'll hand it over to you, Matt. Actually first before we get started, if you can just stay on mute and then if you have questions, drop them in the chat. I will sprinkle them through or leave them towards the end. And [00:01:00] you.

Matt: Amazing. Thanks Amie. Awesome to be here. Awesome. To join the community.

I'm going to walk through briefly kind of what Replit is. I'll assume most of you have a general understanding since you've been building with Replit through Ben's bytes. But we'll still talk about it. We'll talk about the different features. I'll give a brief introduction to myself. And then I'm gonna walk through building a sample app using agent and using assistant.

And it's actually something I shared on x. A few weeks back, but we're gonna break it down. I'm gonna show you along the way, kind of some tips and tricks for how I built using Replit. But first I'll share my screen. I got two slides to walk through, but I promise I'll keep it, I'll keep it short.

Nobody wants to sit through slides. And this will mostly be focused on building. So you should be able to see Figma here. We're gonna be talking about just how to go from an idea to an application today. This is something I talk about a lot. And I think some people might take it for granted, some of us who are maybe more logical or analytical thinkers, but the process of building with ai, it abstracts away the need to write code, but.

There still is a really big focus on thinking logically breaking down problems. That's what we're gonna talk [00:02:00] about today. And then turning that into prompts for ai, turning it into context that enhance the results that Ag AI can give you. And so my name's Matt head of develop relations at Replit. If you wanna find me on X or YouTube, there are some QR codes.

I'm also on the Replit X and YouTube channels, so you can check those out as well. But like I said brief overview of Replit. Replit is a online development platform. We won't even call it a development platform really. Now it's a building platform that runs entirely in your browser. So if you've tried to write code locally, if you've tried to build projects before, you probably have to download a code editor, set up some directories, configure system dependencies, install Python, install MP.

That can be really hard, right? It can be really confusing as someone who's done this professionally, right? I get confused about it all the time. And I run into errors all the time. Redit is a little bit different because it runs entirely in your browser, and that means there's no installation.

It's all in one tab. And we've added on AI tools that can help you every step of the way. And that's like agent and assistant, which we'll use today. Finally it [00:03:00] comes with everything you need. So red's gonna build a front end, end a backend. This is a little different than. Of other tools you might be familiar with.

So our apps will are mostly full stack applications and you have the ability to add databases directly within the platform, which again. Unique. Finally you can take that and deploy it in just a few clicks. So everything we're gonna be doing today is in one tab on rep.com. It requires one subscription and there will be one bill or one, like thing you have to worry about, so to speak.

So it's really useful in that regard. And I've found it to be like the simplest of a lot of these frameworks when I build, when I've tried out kind of competitors, you're being kicked out to different services that can get confusing. The three components of rep that we'll build with today are the workspace, which is just like the entire functionality of the application, like the actual editing experience the actual editor and then agent, which is our automated developer.

It's good for setting up projects and assistant, which is good for rapid edits to code. So today we're gonna build a little demo that shows a map of San [00:04:00] Francisco's outdoor spaces privately owned. Public Outdoor spaces is the full name. But I'm gonna walk through how I plan an app like this. How I build with agent and assistant and along the way my process as well as tips and tricks. And my hope is that you get more out of this than just me typing in prompts. And you kinda understand first how I think about building with ai, but second how I get around a lot of common challenges that I see when I'm trying to build my apps. And then last, we're gonna actually deploy the application.

So by the end of this we'll have something that works, which is cool. And I'll take questions. We can talk about rep, we can talk about really whatever. But. I'm going to start by sharing a different screen and I'm gonna walk through what I'm thinking about here in Figma. Actually I'll just show you guys what the FI finished product will look like here.

So you should be able to see my entire desktop here, I assume.

Amie: Yep. Yeah, we see it.

Matt: Awesome. Cool, cool. So this is a finished product. This is what we'll be going [00:05:00] for today. And this, these spaces are just basically like public places you can go in San Francisco. Some things about the app, right?

We have an interactive map. These are populated with different icons and there's like a search functionality, which is pretty cool. So you can search for individual locations. This is common, I think, it illustrates common characteristics of applications that we'd want to build or that like we enjoy, like creating, which is that the data's persistent, right?

So if I reload these pages, this page, all of the spaces are still here. There's some customization. We're pulling data from an outside source. We have search we have an interactive visualization. And these are the characteristics of the app I really wanna emphasize because. It's hard to build all these features.

So we're gonna walk through how to get this done. But first we're gonna talk a little bit about the planning process. So when I build up like apps like this, I kind of wanna break things down. I don't always go through this exercise, but I think it's important to do for this one to show you like how I think about apps like this.

So what we're gonna do [00:06:00] is talk about our potential features and then we're gonna talk about technical requirements, like how we're going to make these features happen. For every single requirement, I'll talk about how I came to the conclusion of what we're going to use. And then from that we're gonna build a prompt.

And so again, my hope here is that you see this and you say, okay, like I don't even know where to start. This gives you a place where you can start. So what we talked about here, let's actually just take this, we'll take a quick screenshot, copy that. Say, this is what we're going for. This is our base, right?

So an interactive map with basic details. We also we also want like search, and then what would be cool is like some filtering note on this this app we have here, there are, there's like a search and some filtering. I'm not actually, we might actually change the design a little bit.

We'll see how close we can get customizable MAC markers. I like emoji, so we're gonna go with like emoji here. We want it to be responsive and mobile friendly. I'll talk about how we can do this in Replit. There's some pretty cool [00:07:00] tools that highlight just how we can do that. And we actually want the map to be a little bit subdued.

You'll see when we build this pretty commonly, we get a very busy map, but this is a much more subdued with the focus being the locations themselves. And then maybe a bonus. I don't know that we're gonna get this to this one today 'cause it's pretty hard, but it would be pretty cool to have like photos of each location.

So that'll be like a stretch. And what I'm thinking here is I like the way this one turned out. I'd say what would be cool is even if we had like a sidebar over here that also had maybe like a list for each location as well as like live filtering here for these. And then this was like a little bit separated from our map.

Perhaps this title could be a bit more creative as well. But this might seem trivial. This might seem simple. I. What I'm doing is breaking down all the functionality that we're we'll need and trying to visualize what we're gonna build. I will say that once you get good at this, you can just start to truly vibe, code or whatever they call it but build things in real [00:08:00] time and design in real time.

But I find sometimes when I just jump into building and I start like just like prompting AI a bunch, I can lose track of what I'm trying to build in the first place and kind of get caught and get like stuck in kind of a loop or lose. Again, lose the vision of where I'm going. So I think this is useful, and once you have your features, you can really start to think about like how are we gonna do these things?

I could just say, I could just ask AI and say, Hey, build me an interactive map with basic details like search and filtering. What I've found is that reduces the likelihood that we're gonna get something workable from ai. I think as models improve, the detail we'll need in our prompts will decrease, right?

As the model get better, gets better, we can give it more like higher level instructions. But for now, if you know the technologies that you're gonna use and you know that they work with AI or you can give them context you're gonna get a better result. So mapping API like. How do we get this map?

I've worked with maps before. I [00:09:00] know that leaflet is a really great framework for React and JavaScript. This is just like knowledge that I already had, but what we could do right is prompt AI and say, Hey, give me a really good mapping framework that works well with React. Again, react, even knowing what React is a presupposition, something that I know from experience works well.

So maybe like even starting at a higher level, let's talk about the stack. I like React. Again, I know mapping frameworks for React, and I also know that Rep, agent and Assistant build builds really well with React. So for the stack we're gonna talk about hey, let's say we're using React, and I think it's actually useful to, to show what we're working with here for assistant.

For agent and assistant rather. If you have never used rep before, this is the site you're gonna land on. We'll go back to our building exercise. I just wanna familiarize everyone with the tools that we'll be building with first. And this is Repli agent. And agent pretty much allows you to just say, Hey, create a link in bio app.

I noticed that's one of the examples [00:10:00] on Ben's bytes, like homepage and start building. And so I mentioned right, repli is a workspace agent is our tool that builds on top of the workspace. What's gonna happen here is agent is just gonna build us a Link bio app that we can deploy. The amazing thing about this is that it'll have kind of a file system. It'll have all of the characteristics that you'd expect from a functioning application that you can then deploy or take elsewhere. So again, the first step here is that it's gonna propose a pro a plan. Then I can then approve that plan, and it's gonna start building notice that, if I open this pane up here, I can actually see the files it's building and how it's structuring my app.

So it has a client, it has a server that's front end, back end, et cetera. An agent starts writing code. So I just wanted to show you guys this before I get too deep in the weeds of our plan to get understanding for what's happening. We're prompting AI to build an app for us, and you can even see that, there's some hints at the type of frameworks that I'll be using.

It's not necessary to know these frameworks. It can help when we're planning, as I'm doing [00:11:00] here. Again, stack, I know it builds well with React. I know that Leaflet is a framework that works really well with React. For mapping, we might need a database. I'm just gonna hold off on like proposing we integrate a database and let agent decide if it, that's the right thing to do.

We need an API to fetch these locations. So this is like the research phase where we're gonna have to figure out how to get that. We want it to be responsive for mobile apps. I've found that, using the phrase responsive and mobile together, like AI gets a really good understanding of what it means when you say that.

Oh, this needs to be mobile friendly. So that's something to bring up, but this works well natively, so let's call it out.

Also, zoom in a little bit here. Finally, we want search functionality and as I drew, we also want like a list with filters. On a sidebar. So these are all things that I think we can just prompt AI natively and then maybe a stretch goal. We get some an API for pictures. So in our prompt, [00:12:00] what I'm thinking is we're doing, we're gonna say something like, Hey, let's create an interactive map of San Francisco's privately owned.

Public Zoom mover a little here. Open Spaces using React and Leaflet. I found that this is like when we're crafting the initial prompt that we're gonna give to agent a mix between staying high level and giving detail. I. Is really important because we wanna get to an MVP and then we want to take time to drill down into adding individual features.

If we don't start high level and we try to go super in the weeds, I've found that that's a very common way to get AI off track when you're building using React and leaflet and. As I mentioned, we're just giving it this prompt ai. Currently it's very difficult to get it to go out and fetch external data sources.

So what we'll do here is we're going to enrich this and we're gonna see if we can find those APIs for [00:13:00] fetching fetching that data. So I'm gonna open Chrome back up. We should be able to see maybe our Lincoln Bio app here. It looks like agent is still working on that initial result. That'll be done soon if you search San Francisco Public publicly, privately owned, public open spaces, acronym's kind of confusing.

If you search for these, you'll get this page. And the cool thing about this page is that it has markers. They're not loading here for some reason. There might be some ad block stuff going on. Interesting. Oh, there we go. It has markers that are only partially loading, but that's why we're building a better version of this, right?

This is the San Francisco site. The cool thing is that there are lists for not only our open spaces, but our public art. And if I click this and click export, now I'm just kinda like digging around, right? It's actually an API endpoint, which is pretty cool. Okay, so this looks promising. What's, what happens?

What happens if we go here? Okay, so we get a bunch of details. And the [00:14:00] other cool thing is that it looks like there's some documentation. This is like really important context, right? So if we're thinking about things that we can give ai, it's almost like we're instructing a junior developer. We're instructing someone it needs step-by-step instructions on how to learn number one about the data source, but then two, how to implement it.

So when we're crafting this prompt, we can say, here's an example of the API. We can say here's the actual documentation about what the API contains and how to implement it. And AI is really good. With being like language agno agnostic, if we can just give it the resources, it'll know what to do.

Same thing is true with agent and AI generally is Hey, just give it the resources and it'll figure out to what to do in what, whatever language it's gonna build. So what we're gonna do here is we're gonna say, this is our privately owned public o open spaces, right? We're gonna say there's the API for that.

Then what we'll do is we'll say, these are the docs on how to implement the API. And there's also some art here too. So Hey, [00:15:00] we're already building. Let's do it. Let's let's map some art as well. So this is art, and then the art docs are here.

So here is the API for fetching the spaces.

Here are the docs,

and then here's the API for fetching art. It's up to date, this to say, and public art. And then we can make this a little bit bigger.

Here are the docs, right? So we're really building out this prompt as to what we're gonna build. This is my super duper prompt you might be saying, right? Hey, what about how is agent gonna know what's in this page? You're just giving at URL, we're gonna get there. And I'll show you some cool stuff.

So maybe our Lincoln Bio app is done. You can see we have page. We can prompt it to [00:16:00] add links to the page. But this is the general idea, right? Like agent set up this entire infrastructure for us, and that's what we're gonna do with this next. This next step. So I just wanted to run this really quick to show you about what we can generate using tools like Agent.

Things are getting better all the time as models improve. And what we're gonna do now with a more advanced example, so this is like agent 1 0 1. You can just like chat. Whatever Agent 2 0 1, what we're doing some research, we're finding context, we're like building some data to then go and prompt agent, which will reproduce a better result.

So this is the agent interface. This is what we'll be doing, and then we're gonna try and deploy this application. But if I go here, I say, okay, let's just paste in this prompt. There's some like weird spacing issues, right? I'm gonna structure this a little bit better for my own sort of, interpretation.

Cool. So now we have these different URLs and one thing you'll notice is that we can take a screenshot or copy the page content. So when we copy the page content, we're just turning everything into [00:17:00] markdown. So what I'm gonna do is add both documentation pages. As content to this prompt. So now what we're doing is we're instructing our ai, what we want, the frameworks that we're using, and then we're providing those API sources both the actual source

and the documentation on how to implement those sources. And so by doing this, the result that we're gonna get should be closer to what we want. I'm gonna click start building here and we can actually go back to Figma quickly and say okay, so let's take a look at our technical requirements. We specified that we want react in our stack.

We specified that we wanted leaflet. We gave it a an API for the locations. Haven't really addressed that, haven't really addressed the search just yet, but I think those will be good follow ups. So hopefully in the next couple seconds, Adrian will propose a plan. Again, we're getting to [00:18:00] MVP here, and then we're gonna start iterating.

And adding additional features.

Amie: Matt, while this is loading ka in the chat asked what system level instructions does agent include? Has a system prompt been shared and curious if they need to include things like, imagine you're an expert software developer or think step by step.

Matt: Great question. Yeah, so we take care of the system, prompt optimization. We have specified quite a few things to agent for building, so you do not need to specify things like you're an expert. You do not need to specify like common like prompt techniques for improvement. We take care, taking care of the optimization for you and that's why I'm focusing on the details of what we're building here and less about trying to prompt engineer my way to something.

So thanks for that question. The prompt hasn't been shared. It's actually proprietary. We use a combination of different models, so there are multiple prompts. There's actually a lot going on behind the scenes here. But thank you for asking. And now we have a plan, [00:19:00] right?

We're gonna create an interactive map. This looks what I want, and you can see follow up functionality actually does include some of the things we're looking for. But I'm just gonna approve the plan and start. And so one of the other things actually to call out since you mentioned prompting, is we have this improved prompt button.

So say if you, we did our like create a link in bio app we can actually do here is click this button and we're going to improve the prompt for you. So if you ever feel like, oh man, I don't even really know where to start planning. This can help you brain brainstorm some of those features. And some of those things that we're building, you can actually go back to our previous example.

Someone's struggling a little bit it seems like with the actual links. But Oh, I see. We have to actually add a link, Matt's link test.com/test.

Okay. We don't want that. Save all.[00:20:00]

Interesting. So this one, it seems like it went a bit of a different direction, probably because I didn't improve the prompt. Give the prompt improvements a shot. We've also rolled out recently Replit agent, what we're calling V two in early access. If you want details on how to enable that for your account, you just enable explorer mode.

So you'd go to your, set, your account here, and you toggle down here at the bottom Explorer and that's gonna enable our kind of experimental V two. It's very much an early access. It uses Quad three seven, so you might see some different kind of outputs, but just to call out there that if you wanna give the latest functionality a shot, you can learn more about that.

On X or on our YouTube channel, youtube.com/at repli, I have some, a first look video as well as instructions for how to enable that. But what you'll notice now is agent is like setting up this app. It's actually fixing some errors that it's seeing, right? Okay, it's getting invalid objects.

We're gonna hope that, it gets through most of these. The fun part about building with AI [00:21:00] and what makes these live demos so exciting is that I really don't know what's gonna happen. Sometimes this works, sometimes it doesn't. Right? And then what we're going to do is go in and help agent debug and figure out why things aren't working.

Figure out if things aren't working. And that's building with ai, right? And so that's what we're doing.

Any other questions in the chat while this is building?

Amie: There's one that's not directly related to this but in your experience, I don't know if you've used Relet to connect with Google Services and do you feel like it plays well? I feel like some AI coding tools work well with some technology, some less so have you used or put to interact with Google Console on any level?

Matt: Sure. First we get we, I think, are at our V one, so I'm excited about that. Second one of the cool parts about REP is that we've tried to put everything that you could need when you're building inside of the interface.

So if you wanna do things like add a database or add even object storage, we have [00:22:00] databases. Those are backed by neon, so like production grade databases and object storage is actually backed by Google Cloud storage. So if I wanted to add object storage to this app. You just click object storage. And the cool thing is that like I'll create a new bucket here, is that the eight, you don't actually, don't even have to authenticate with this.

So this is, I know this is not directly answering your question. I'll get there in one second. I just want to point out, there are a lot of things that you can do within Replit and I like highly recommend you give these a shot first. Even in my personal projects, it is so easy to set this up that you don't even have to go to the Google Cloud console and start doing stuff because it's really complicated.

That being said. We support doing anything you can do with code practically. So if you want to implement something that uses an external service, you can totally do that. You just have to get clever about how to prompt AI to get that result. So for example, right? I wanted to build with some APIs and some documentation that agent didn't know anything about.

I gave it context, I broke down the frameworks. We went through that exercise where we mapped out what we're trying to build [00:23:00] and hey, on the first try, agent was actually able to build this thing, right? It's actually impressive. It figured out how to build a full stack application with a server.

I'm gonna guess this is happening in the server, right? That's fetching these two API endpoints it that were not indexed, right? With the way AI works, it's highly unlikely that that our models are underlying models new about these endpoints, but we were able to get them integrated here. So what I would say to that question is.

Yes, we're working on more integrations down the line. It's not optimized for like Google Cloud services, but if you get clever with prompting, if you get clever with using agent and assistant, which is kinda what we're gonna learn today, you can totally build with really anything. So now we can see the map and we can see our spaces.

I don't really like, I don't know what these icons are though. They're like hideous. And I talked about like the map. This is not a good map, or at least I don't like it. So first I'm gonna say, can you make the map more subdued? Let's use a [00:24:00] carto. Theme, and if you've ever built with like maps before, again, this is just like things I, I know from building that I pick up.

As you build more projects with ai, start to take note of the frameworks that you're using, right? This is how I learn about react, about leaflet, about what Cardo is. I had no idea what those things are technologically, I don't really know what they really like, how they work or what they do. Maybe a little bit, the Rick Rubin meme, like I have no technical ability whatsoever or whatever, but.

Technologically, I don't know what these do or how they work, but I know the outputs that they produce and I know what they're compatible with and I have a sense of like how to implement them, which means I can like string together these prompts and get the results that I want. So can you make the map more subdued?

Let's use a cardo theme because these are really simple modifications. I'm gonna give agent two in one shot here and I'm gonna say can you use some playful emoji for the markers? Maybe like trees. For the spaces and something art [00:25:00] deemed for the art. So these are just like we got to our MVP.

This works. This is cool. I can see that it works. And now I'm like, can I polish this up a little bit? Can we make it, move it a little bit closer to what we want? Notice that this is like still hierarchically, this is still within like the MVP type functionality. We don't have search, we don't have filtering.

There's not even a title on this page, but we're gonna get there. We're gonna start chipping away at those features to again, get ourselves closer to what we envisioned here, and that's why it's important to break this down. I would say even another step is thinking about like maybe what are our primary features and then what are.

Our enhancements. And so MVP primary functionality, we have something that works. And so from this thing that works, now we're gonna move towards we're gonna move towards some optimizations. So I'm not actually sure if [00:26:00] it was displaying the art in the first place, but what I'm noticing is that there's no art.

So let's take a look at the console. The console is like output. It's if you run a process, the console, it's like what results. And that's what we're seeing from running the agent here. So what's happening get Popo 200, 200 get public art. 200, 200 means like good response. And then we're getting actually 3 0 4 messages.

So what is a 3 0 4 status code? Not 3 0 4 stainless steel. The requested resource has not changed. Which means is this probably cached, which is like a good thing. So what we're seeing here is like we're seeing the trees, but we're not seeing any art. A lot of people will say, okay, Matt, like how do I debug this exactly what I'm doing?

And then I'm gonna tell agent, Hey, we're seeing we popo marked as trees, but I don't see. Any art and when we can rely on agent has access [00:27:00] to the console, it actually has access to a lot of the same logs that we're seeing. So helping it by giving it, useful debugging information it might not have otherwise is the best way to move forward.

So you can see that agent has the ability to take a screenshot, potentially problematic, is that it? It can't render emojis. But the cool thing is that, it'll ask us to, to do things to verify verify the output. So what I'll do here is it's asking of us if this is returning data, I'm gonna copy this.

I'll say it looks like

we're gonna go step by step here into bugging this. So it also looks that we we have an error in our dev tolls console. So what's going on here? Ooh. Okay. So if you don't know about dev tools, we have some dev tools here. That's the same thing, like if you're on a page and you click this, these are the chrome dev tools, but this is just for being in our browser.

And one interesting thing to note is that we found a dev tools error. [00:28:00] So what I can do is copy this guy. So I click this element, I click copy, and they say we're seeing an error in dev tools. It looks like it's making some changes. There might be actually even some typos here that were truncated. So maybe this will fix it, maybe it won't.

But what I wanna call out is that debugging, you actually don't have to know how to code to like debug applications. And it's one of the biggest skills I see that people need to learn when they're building with ai and that I had to learn honestly. Okay, now we just get the art coordinates are invalid, so that's cool.

So first. Warning, each child in a list should have a unique, it probably should be an ID of some sort property. So that's like a react thing. So that's one issue. Second, I think agent added some debugging stuff and now we're getting invalid art coordinates, so that's actually really useful. So we're seeing an error in dev tools and it looks [00:29:00] like the art locations are invalid.

And I think this is enough context, so we're just going to pass this to agent. So really what we're doing as humans here, we're facilitating the debugging process by inspecting different parts of the application. And as we get better at the models, as we get better at building agent, billing assistant, we're gonna do more of this for you.

We already are in that kind of V two early access I mentioned. But for now, doing stuff like this is how we help agent get these problems fixed and you can see like what's going on here.

Amie: So real quick, Matt, with agent versus assistant. When it comes to debugging, are you using agent or can you maybe clear up some like when to use assistant, when to use agent and where Debugging falls.

Matt: For sure. I actually think debugging is done in both at a broader level, when to [00:30:00] use agent First, we're just setting up our project and we're getting to an MVP. In my brain when I think MVP or like large features, I'm thinking about agent because agent is Terraform. It's like changing our entire project, right?

Like agent set this entire project up and agent's best for like large edits. And because I'm still working towards that, like when we talked about en Figma. What are our primary features and what are our enhancements? We're still working towards that primary feature. So I think okay, agent, agent takes a little bit longer to make these changes since they're bigger changes, assistance's a little bit faster.

So when I get down to those enhancements and I want a bit of a tighter feedback loop, like I wanna move a little faster, we're gonna move over to assistant. I think at a high level, that's how I think about it. You can debug in any tool and that's what we're doing here. But as a framework, that's how I think about it.

And. It looks like we're getting both art and our spaces now. So hopefully that answers your question. It looks like there's still like a lot of errors in the dev tools. I'm actually gonna reload this to make sure I know what's stale and [00:31:00] what's not. Yeah. So we're gonna copy this and we're gonna say there are still errors with duplicate.

Keys. We'll see if Agent can fix that. And speaking of agent Assistant, I think after this point we are at a really good sort of MVP, so to speak, and then we can move over to assistant and see in the remaining time how much we can dial this in. Amie, what do you think? How long are we gonna go here?

How long do we have until we have to shift to like just q and a?

Amie: I think we can push it to 10 10 or, sorry, 1250. A little. Like a little, a few minutes over that. I have two questions to ask towards the end, but so far I've, I managed to pepper them through.

Matt: Amazing. Perfect. We'll keep answering questions as we go here and we'll see how far we can get in the time we have remaining.

Again, small things like if the application's working and I see something in the console, I know intuitively it's gonna be a one-shot fix, just from my experience in fixing different types of problems. It might not be like a very satisfying answer of I just know, but I [00:32:00] know from building with these tools a lot.

And so the more you build with the tools and the more you pay attention to how they work, the better you can get at debugging things. And the better you can understand, number one, what AI is good at solving and what it's not. It looks like we might actually still have the same issues.

If you're prompting AI and you get like a result, like something, and it doesn't fix it on the first shot, don't just keep. Sending the same prompt, for example, if I just kept saying the same thing, it's pretty unlikely that the situation's gonna change since then. This is a statistical model, right?

I'm not giving it any new information. Trying the same thing and expecting different results. Reigns true with AI as well. We're not gonna do that, but I think it's actually a really good time to switch over to assistant, given that we're at this MVP. We have some like weird stuff going on in dev tools, some warnings.

An assistant might be able to help us out with those as well. So I'm gonna open up assistant again. Because we're at our MVP and because we're now just like adding functionality on top of the base feature of the app it's a good time to switch. What you'll notice is that the app turned off, and I also wanna call out some things about what's gonna happen [00:33:00] when I'm prompting assistant.

By default, there's some behaviors that assistant has, but you can go to these assistant settings to actually configure. Some things so you can change the model. You can also auto apply changes or auto restart the application after changes run. Those are two things to call out. Some kind of like assistant advanced functionality, tips and tricks, et cetera.

But what we're gonna do here is the first thing, let's see if assistant can help us out with our dev tools error. So I'm gonna copy this and. It's also useful to look at this and say, can I isolate where this is actually coming? Coming from, I noticed it says art markers, usually errors in general will start at a high level and then drill down into the details.

Art markers, source components, map markers. That's really useful. That's a really useful context, right? This is probably a part of our app source, client source components map. There's markers. So something in this file is not working the way I would expect. So this didn't [00:34:00] work with agent, but what I'm gonna try to do here is I'm gonna hit at, and then I'm gonna mention the files to really target the edits to that file.

Assistant knows about all the files. You can actually see that when I hit the at symbol, the files with a check are indexed by assistant. So you don't have to worry about those. But when I mention a file specifically, it's going to know to like hone in on that. And I'm gonna say there are key errors.

That's it. And I'm just gonna paste in the context here. Let's see what assistant comes up with for us. So again, what we're doing here is we're drilling down to like address a specific problem and see if we can provide a little bit more context for assistant which should be able to fix it.

Also worth calling out assistant already on clo Claude Sonnet three seven. So you're gonna get the latest functionality from assistant. Because we use a combination of models, you'll have to, if you wanna give our early access preview agent a shot, that will run cloud three seven as well. I'm gonna rerun this app by clicking that button again.

If you enable a setting, it'll do it automatically. It looks like we're still getting these errors. So this is something [00:35:00] it looks like it might actually have to do with the fact that. So this is actually just an observation. What's probably happening now that I'm thinking about it a little bit more is that there are some of these with the same address.

Yep. And the address is being used as the key. So what's happening, what I noticed was there are only eight errors, but we have 80 spaces or whatever. And these are listing specific, these are listing specific addresses in the log I. The problem is that the key that a assistant's using, or agent or whatever is actually corresponds to the address, and there are duplicate addresses.

So now we need to translate this into an easy to understand sentence that we'll get at the crux of the issue. The keys you are using for the map markers are based on the addresses, but the open spaces and the art. Some, we'll say [00:36:00] some have the same address, modify the keys. So they're all unique.

And again, we have to understand the problem before AI is gonna fix it for us. And so this is again, drilling down deeper into the code. It might be this is the more complicated part. If you haven't, written code or built with AI before, this is where it can get intimidating.

'cause you have these big red errors, but none of what I'm doing actually requires writing code. It's really just like trying to dig into this thing and reverse engineer it and understand how it works. So let's see if let's see if this works for fixing the key errors. Okay, so now we only get one.

We only get one error. I think we're gonna call that a win for now. I don't wanna focus too much on boring console errors, but we've narrowed it down. There's only one thing with a key collision that indicates like we're getting closer. So we're gonna move on and let's talk about adding some of our other [00:37:00] functionality.

One thing I like to do when I'm chatting with agent or assistant, when I start on new features, I create a new chat. The chat provides context to these files and so we can think about, the context is what's being passed the model. If we wanna focus on a new feature, we create a new chat that kind of clears up the context.

Let's head over to Figma. It looks like we're getting closer to time, so let's focus on one of these things. Let's say search and filtering. So let's add search and filtering to our app, and a title's an easy one, as well as a playful title and theme to the page. I'm just gonna give this a kind of broad prompt and see how assistant does.

Usually it's better to get really detailed, but again, assistant's actually been getting a lot better because it uses Quad three seven because it knows about all the different files in the directory. I'm gonna give it something a little bit more broad and see what happens. So it's gonna update the map component to add a title.

Then we're gonna create a search component. One way to learn if you wanna really improve. [00:38:00] Your ability to build with these tools. It's useful to learn frameworks. It's what I've been hinting throughout this workshop. When I talked about at first in Figma, knowing what these things are, knowing what, certain key terms that might produce better results are if you pay attention, this isn't, will actually teach you how to do these things.

Hey, what, okay, it's updating the map component, what's going on? Because there's like some filtering going on in here. If I really wanted to learn about React, I could be like what is this thing? Let's use Memo. I could ask Assistant what Use Memo is. If I wanted to learn about the popups or like how they're working here, I could start to look into these things and even noticing things like, okay, it's editing this CSS file, CSS probably plays some role in what we're building, so see if this works.

Yep, we got an error. That's okay. We expect errors, it's okay. It's this is like Bob Ross type stuff, right? If you ever watch Bob Ross, it's a happy little error. We're gonna get errors, we're gonna work through 'em [00:39:00] again. Most of the time you can just paste in the file and it assistant knows there's some sort of dependency.

And I think it's, the other thing, when we're building, we have checkpoints. So the great thing is that if this breaks and I really really mess something up. I can always roll back to a set of changes so you don't have to worry about errors. We're getting a lot of errors as a matter of fact.

So this might have actually been too broad of a change. We're gonna try fixing these.

If this doesn't work, what I would do is just jump back up to probably this checkpoint. And resume from there. So you can think about the smallest viable change that you can make when you're prompting. That's another really good tip, right? As AI models get better, as we sonnets better, three seven's better than three five, we're using three seven here.

The sort of maximum or the largest possible change you can make with one prompt is [00:40:00] going to get bigger. And so figuring out. Like in this prompt I gave assistant three things. Like that's search filtering in a playful title. That's a lot. I can guarantee you if we gave this to an older model, it wouldn't have worked.

But as the models get better, you can actually ask them to do more. Okay. So we have some functionality, there's some overlapping. Let's let's see if we can fix this. So the search bar overlaps with the title. Move it to the right, or let's say left of the page, move the zoom icons for leaflet to the bottom right.

And we're getting close on time, so this might be our final final push here for features. But again, what I'm trying to emphasize, these are all kind of concepts of building with ai. I'm learning about how this application works. I'm inspecting what agent's doing because agent can and assistant can teach me about how to build these, about these functions and build these tools.

And we're slowly getting there. And we're using these [00:41:00] checkpoints. I haven't actually had to roll anything back yet as a feedback loop. This did not do what I want it to do, and that's okay. 'cause what I'm gonna do is click go to this checkpoint. So again, if we experiment with something, I can roll a checkpoint back.

That prompt didn't work. And I don't really like the functionality here. So I'm gonna start a new chat. I'm gonna drop this in. We're gonna see if we can be a bit more specific. Move this search bar. To the left of the page we're actually gonna remove this and we're gonna try and keep it simple and see if this fixes our problem.

So you'll notice it is responsive. I mentioned building on mobile. So one cool thing, another tip and trick. So if you click this little icon, you can see different displays. So we can see what it would look like on an iPhone 12. And it is responsive. It does work on mobile. I think we have, we need some we need some help with, positioning. These are areas we might need to dig into a little bit more here. Okay. And there you go. It's not mobile friendly, but we got our title, we got our filtering, [00:42:00] and we got our search, which works on in real time on both locations and titles. Cool. It looks like we might have lost our our tool tip, which is a bummer when I click this.

It should show the description like it did before. Oh, we can see there's some stuff going on the left there that we might need to get into, but we're at 1150, so I wanna save time for questions. What we'll do before we get to the questions since we've built this app, it has persistent storage, it has the functionality we wanted, we got.

I would say 85 or 90% there. I think polishing touches would be a little tool tip, figuring out what the heck is going on with this weird stuff. Fixing a little bit of the format matting, arranging this, we really have 40, maybe less 40 minutes to walk through this example.

So we got really far, what we're gonna do is go to deploy. Rep's gonna tell us what kind of deployment we watch or want. If you don't really know what these are, it's okay. It's usually really good to [00:43:00] just go with our recommendations and if you wanna learn more. This is like handy video. I don't know who that guy is, but you can just watch that and I'll walk through it.

We're gonna go with Autoscale. We'll call this Ben's Bytes, SF oppos Privately owned Public Open Spaces. We'll click Deploy. You can pass through build commands. You can pass through. Secrets. That's one of the other amazing things about rep and agent assistant. We'll manage your secrets for you.

We'll take care of all of the build, deploy stuff so you don't have to worry about it. And yeah, very simple. We're going end to end idea to application with some external data, with some external APIs. And this should be done in a couple minutes. So I think now's probably a good time to talk about questions and we can just dive into those.

Amie: Yeah, this was great. As someone who used to make no code tutorials it's fascinating and amazing to watch all these things being built, but, and I think about like how we used to have to try and hack it together with no code tools and we might take it for granted how like easy it was to do [00:44:00] it like in less than an hour.

With ai. I think this was awesome and it was, it really does show though, like the true nature of building with AI is like working through these little errors because it seemed like a small thing to just add search functionality, but before ai, it wouldn't have been such an easy thing to do.

So you just have to take that into consideration. I feel like.

Matt: For sure, a hundred percent. And I can also say just one, one second. The V two Yeah. That we're working on in that explorer mode, which I showed you guys how to enable. I'll drop a link in the comments is much better at doing some of that stuff, but Totally.

I appreciate it.

Amie: Yeah. All right. So some questions we got one was around databases and how to think about databases from a non DEB perspective. You know how like. When you're building these out and you're building these like data, maybe data heavy apps, potentially, how can you think about like costs and how to, how do you prevent building something that, gives you a crazy bill at the end of the month?

Matt: For sure. If we think from first principles also, let's see what we got. It works. [00:45:00] I'm gonna dive into databases here. If you guys wanna check this out. Yeah, there's some weird stuff going on there. Since you're on the call. You can scan that QR code and check it out since we deployed this databases.

I come from a data background, so maybe I know more about databases than most people. If you don't know what a database is, it's just like a Google sheet. It's like rows and columns that you can connect to each other through IDs and primary keys, right? So just wanna make sure everybody understands.

We could go talk a long for a long time about databases, but when you add a database, what are you doing? We're using what's called Neon as our provider for databases to add. What we call a serverless database using Postgres. Break that down. Postgres is just a type of database. Don't worry about that.

It has an elephant for a logo. It's cool. Serverless means if you're using it, you get charged. If you're not using it, you don't. It scales up and down from zero to one, which is like our autoscale deployments. They're like serverless in some sense. If you're using it, it'll accrue cost. If you're not, it won't.

If you wanna learn about the ins and outs of database billing, you can go to [00:46:00] the neon docs and they'll tell you all about exactly how they charge and what they charge for. What you don't have to worry about is if you're building on Repli and nobody uses your database, nobody looks at your app, which was, which would be sad, you won't get billed for it.

That's important. And second, at any time you can go to the homepage and you can go to this usage pane. And you can see exactly what you're getting billed for. So you can go to storage, you can see which apps are using a lot of storage. You could go to these different things and understand exactly the cost.

So Postgres storage and Postgres compute, right? Like we can understand at a very granular level. Granular level. How much costs these things are accruing as terms of optimization, right? Like you just have to think about how many times the database is ca being called, how many times it's being written.

Or if you're performing really complex operations. Optimization is like a tricky problem, especially if we're building with ai. So I don't wanna spend too much time talking about that, but at a high level, that's how you can think about managing databases.

Amie: Yeah, [00:47:00] and I'll just add too, if you are getting to that place in your builds, you can probably start working with AI to like work on optimizing code to optimize like your database API calls and stuff.

Totally. Okay, another question is a lot of people love the idea of p ds as a prompt to get started with building with a ID ai. So those are like product requirement documents. So where do you stand on that? If you were doing this without an audience, without a time limit, would you go into chat bt and get a whole like PRD outlined or do you just keep it casual now that.

Matt: For more complex projects. I think that's totally useful. I think I do it just because I've been doing this for a while, it's like kind of second nature, which, we can't assume that people know what they're doing, what, we can't understand that people have the same experience.

The cool thing about Agent is that I know it's gonna lay out the I don't have to worry about this layout. If I was using a different tool, I would have to worry about that, right? Oh, do I want to initialize this thing with V or with Next js? And then there's all these headaches. One of the great things about Agent is it takes care of a lot of that stuff for you.

I think if A PRD [00:48:00] helps you think through problems logically, for this workshop, I specifically did this because this is like my PRD. It helps me think through the problems, what we're trying to build, what we're gonna use for the technical requirements. I came up with this myself because I've built this before and I know what works.

I think. Even what Amie said before about oh, if you want to know how to optimize databases, just ask ai. If you wanna know how to structure your app and write a PRD, I think asking AI is a really good option. And that's how I've been learning a lot of stuff as well. So Totally. If that works for you, I think that's a great option.

Amie: Likewise. And then for people that are just getting started with building obviously a lot of these builders have like token limits. Tied to their plans. Do you have any advice when you're building with Repli how to get the most outta your plan and tokens without blowing through them on please fix air type of situation.

Matt: Yeah, for sure. So first assistant is cheaper. I'll mention resource usage assistant is like more lightweight. So the check checkpoints cost, quote, unquote less. [00:49:00] There's less usage. Couple things, first, with your plan. Any rep plan, you get $25 in credits. So like you're paying $15 if you pay for the year or whatever, or $25 a month, you're getting that amount of credits back.

So you can use agent and assistant for free until you start, essentially, until you start getting billed. Second, I. Assistance, like more lightweight. It's also cheaper. And then in terms of like optimization, what I was mentioning earlier, if you bump into an error, do not continue to ask the same question with no additional context.

AI, because it's a, it is a model. It's unlikely that if you keep feeding it the same information that you're gonna get back a different answer. So if you get into a death loop or, whatever people want to call it, stop chill. Maybe take a walk, honestly, if I'm stuck on a problem, right?

What do you do? Take a break, try to think about it. Really if you're prompting, this is where I would say we get into more advanced debugging. Try to think about what are the sources of information that you can find that could give more context to why this error is happening or why it's not doing what you [00:50:00] want it to do.

And so when we debugged that console error, we didn't actually get to a resolution, but I said, oh, something is going wrong in like our marker file. So I was looking at that file and then if you can isolate the error further. Okay, maybe it's this. Line in this file, or maybe there's another place that we could log, right?

Like, where can we look in our code for information that corresponds to, what's being output? I'm gonna have a video out on this soon. Because I think debugging and like understanding why things happen is really important and it helps you avoid just like banging your head on your keyboard and getting the same answer.

Amie: Yeah, totally. I went through a whole like, debugging session this past week, and I just realized, I was like jumping the gun with the AI on how something should work, and I missed a key part of the like step by step. And like you said, these are models. They don't, they can't read our mind.

Sometimes just rechecking what you've told. To do and making sure you actually did that helps to the errors because sometimes you get that, ah, I know what the problem is, response back and then it works for sure. Cool. Awesome. [00:51:00] Thank you so much. This has been awesome to watch and you made this like very simple to follow and understand.

So always love that. And everyone really appreciates that you came with with Figma and outline how you thought about this and that's really helpful too. Amazing. Yeah. Thanks for your time and if anyone has any more questions, feel free to ping me in the Slack community and I can try and and help you out there.

But yeah, thanks again Matt.

Matt: Thank you so much for having me. I'm really grateful to, to have the opportunity and I hope everybody maybe learned something today. So thanks.

Amie: Yeah. And if you don't follow Matt on Twitter, I will drop his, twitter here real quick. Follow him. He is always sharing like awesome videos and things that he is building and good tips and tricks.

So highly recommend it. But yeah, that's all we have for today. See everyone, hopefully the next one. And Matt would love to have you back again sometime maybe with another feature rollout or something. Yeah, take care.

Matt: Amazing. Thanks again, y'all

Amie: right. Bye everyone.