The Elephant in the IDE: How AI is Changing Web Development featuring Replit

I heard you on my Wireless back in 52? Lying awake in tant and tuning in on you? If I was young it didn't stop you coming through?

Oh, oh?

They took the credit for your second symphony? Rewritten by machine on new technology? And now I understand the supernova scene? I met your children? What did you tell them? Video kill the radio star? Video killed the radio star? In my mind and in my car? We can't rewind, we've gone too far? You hear the die back and you remember the jingles used to count? You were the first one, you were the last one? Video killed the radio star? Video killed the radio star? It's in my mind and in my car? We got rewind? We've gone too far, too far? All right? Video kill the radio star? Video kill the radio star? In my mind and in my car? We can't rewind, we've gone too far? Pictures came and broke your heart? So put all the blame on vcr? You are the radio star? Radio star.

It hello, Internet.

How are you all doing today?

I'm super excited to start a new series and I think it's better to.

Say the whole D hug is super excited to start a new series and.

The series will be about AI for developers.

So we are starting with Replit, right?

And I will give it up to Aman from Replit. All right, thank you. Yeah. Hey everyone, my name is Aman Mather, product manager here at Replit. I'm super excited to be here with you today. Quick context on what we'll be doing. I'll share a little bit more about replit, show it in action for a general business use case, and then my teammate Horatio from Replit will come in and also show some more HubSpot specific workflows and then we'll have some time at the end for Q and A. And yeah, that's the. That's the plan for today. So quickly, a little bit about what Relet is. Replit is a tool which makes it easy for anyone to create software. We have a history as a collaborative browser based development environment, but over the past few months or few years, I should say, as AI models have gotten a lot better. Replit has really embraced and been one of the key players in bringing AI coding tools to the masses. Our product relet agent, which we launched in September last year, has grown quite a bit. We've had over a million apps created with the Replit agent since then. So quickly on what Replit does, Replit is a tool where you can describe your idea in natural language, write a simple prompt and then get a working first version of it. We have a full suite of tools so you can take your ideas from just an idea formed in your mind to a production application. Right now we support Python and JavaScript stacks out of the box. You can also deploy your project directly to Google Cloud infrastructure and you can also connect a postgres database which is backed by neon. All of this is available directly from your web browser or any mobile device with our native iOS and Android apps. So Replit has this big mission of enabling the next billion software creators and emphasis on the word creator there because our whole thesis is that as models get better and as models progress, what making software looks like is actually going to change quite a bit. We started out focused more on education and educators, then we worked more with professional engineers and developers and we've kind of landed in the space of what we call citizen developers who are people with a less traditional coding background, but who are excited to build and excited to learn. These are often folks on design teams, product teams, data marketing, anyone who has software shaped problems and wants to build solutions quickly. We also have a large user base of engineers and developers who use Replit to build zero to one projects and to test out new ideas, and who also use the core kind of editor and IDE functionality. So I'm going to jump into a quick live demo here. Hopefully everything works well and I'll show you a quick example of how Replit works in action. So what I'm going to show here is an example of me building a site for my startup, for example, which helps companies do SEO and email marketing. So I'm going to be showing a pretty general use case of what some of our business users coming in may want. And the goal here is to create a site which helps us capture leads and helps us create an intake form for people who are looking at our business. So I'm going to write making a site for my startup which helps companies do SEO and email marketing. I'll say the website should include an intake form for me to capture leads so I could go ahead and start building directly here. What I'm going to do is actually press this Improve Prompt button. Improve Prompt basically helps rewrite this prompt in the language of the Replit agent, so it allows it to split it out into a few core features. Also get visual references and style guides based on the vibe that I'm going for here. You can see it actually picked out HubSpot as an example of something to get inspiration from since it's relevant to HubSpot as well. I can also choose specific colors or fonts that I'd like. Could also at this step attach PDFs or CSVs data, or even links to external websites that I'm interested in having the agent know about. But for the sake of this demo, I'm just going to jump into start building. Once I start building, one of the cool parts of the agent is that it can actually work with you to kind of come up with ideas and refine what you what you want to build. So actually I'll zoom in a little bit here so you can see. So it's saying that it'll help me create a plan for a professional business website and it's come back with this list of features that it could do in the future. So it told me step one, build the initial prototype. It's also asking if I'd like these other things, maybe like client testimonials, blog section, package pricing, tables, live chat support. All very interesting stuff. For now, I'm actually just going to approve the initial prototype for the sake of the demo. So once I press approve, you'll see that the interface here is split into two sections. So there's the chat, which should look fairly familiar. If you use ChatGPT or Claude or any other AI tool, chat is the main way that you interact with the agent. The cool thing here on the right side though is the progress section. And this is where you can see the agent actually working in real time. Right now what it's doing is creating a front end scaffold of the project and also streaming that to me directly so I can watch it as it builds this application. And this is basically to give you a sense of what it's going to make. If I had provided more details in the initial prompt about specific details, maybe my company name, things like that, it could have tailored it to it Here I gave a very generic prompt. So it's making a generic website with mock data, mock images. So it's pulling stock images to use across the web app. And yeah, it's basically building out the full, the full scaffold here. This process usually takes 5 to 10 minutes for it to build the full thing with a mock backend that it hooks up to this front end as well. So while it's doing that, I'm actually going to flip over to an example which I just started right before I joined the Call, just so that we had something ready that I could iterate off of. So very similar to what I just did in this Other tab. I started this out with a similar prompt asking about a landing page for a startup focused on email marketing and SEO. This is what it came up with here. So it made this page fairly straightforward landing page, but you can see it's done a pretty good job. I notice here in this form, some of the titles seem to be missing. So I'm going to show you here what I would do to go ahead and fix that. I can actually use this element selector, select this form label and say the labels in the form seem to be white and I can't see them and it'll go off and work on fixing that. While it's fixing that, I can quickly show you how the agent actually works. So after that phase at the beginning where it created the front end, it actually creates multiple files here. So you can see all of the files being created. You can actually click into them and view kind of overview of the progress that the agent had as it was working. So you can create it, you can see it created multiple server routes, created the front end, REACT components. This is built using like Express, an Express server and a React front end. You can actually see the breakdown of everything that is done in multiple steps. Obviously you could collapse that down if you're less interested and just focus on the chat itself. But here you can see the breakdown of the, of what it, what it was doing when it was initially building. You can also see the full file tree. So if you want to go in and actually edit a line of code yourself, you can open up a full editor directly here on repl.it and make changes yourself. But again, most of our users these days are just interested in getting to the output and seeing the agent work itself. So it looks like it's made that change. You can see that I sent that initial message. It gave me a little bit of confirmation that it saw the issue. It updated the form labels to ensure that they're visible against the background. Looking at the earlier fields, it's still going. So I think it's finding some more issues that it may have had there. And now it's actually checking. So the cool thing about the agent is that it can take screenshots as it works. So let me jump down here to one of the later examples. So you can see the agent actually takes a screenshot of the page as one of its tools to see the page in the same way that you're seeing it and make sure that it's done what you wanted to correctly. Now if we go down there, looks like things are working as normal. So I can go ahead and fill this form and submit it. But that data wouldn't actually go anywhere right now because I haven't created a database in this application yet. What I could also do here is say add a database to save my data. Now, similar to last time. Last time it was a pretty simple front end change. Now it's actually created a database for me and it's telling me that I can manage it here. So while it's working on that, I will open up the database pane and give you a quick view into what's going on there. So this is backed by a postgres database. We use NEON to help power our Postgres databases connected directly in replit and the agent has full access to understanding what's going on here and can write code for you so that you can manage your database. I can also view the data directly from here. Obviously right now nothing's in this database yet since we just created it. But once the agent has completed working and I have a few entries, I could actually view all of my data and also run SQL directly in this database tool. So one of our goals at replit is to bring all of these pieces into one place so that you don't have to keep jumping between tabs, jumping between tools, and manage multiple things at once. So let's see what it's done here. So first of all, actually created that postgres database. It also created a file here where it wrote some simple code to basically connect to that database. Also wrote a drizzle config file so that the database knows how to set itself up. It's also installed some packages. So replit uses Nix as a package manager and can also manage all of your dependencies. So the agent has the ability to go out and install packages as necessary to ensure that your project can run successfully. All right, so now it's actually creating an admin page so that I can view the registrations, which would be useful in this specific example since I'd want to see where things go once, once everything's. Once people start submitting in their their intent. All right. So yeah, it's letting me know that it's made progress and it's continuing to work on the admin page. So it's going one step beyond just creating the database here and actually creating a useful page for me so that I can continue working with it. So while I was doing that, I'll show you one other exciting thing about replit, which is the deployments tool. With deployments, we Actually let you again directly from the Replit interface, deploy your project directly to Google Cloud so you can choose between a few deployment options. In this case I'm choosing an auto scale machine which allows me to have a machine that actually scales up and down depending on usage. You can kind of edit the compute and RAM that you'd like here. I'm just going to leave it at the default settings for now. Can choose number of machines. From there you can approve, you can connect a domain. So for this website, I don't even know it gave it the name Growth Pulse, I could call it something I'd like for example GrowthPulse Replit app and I can actually deploy that directly from here. This kicked off a new deployment for this project. This would take a minute or two to deploy and as soon as it's deployed it would be live for anyone to use. So I mean right there I think it's been a little bit, maybe less than 10 minutes. I've actually shown going from entering a simple prompt, seeing the webview, making a quick change, setting up a database and deploying a project all in one place, all in one go, which would typically take, I mean it could take. And this is again for a non developer, someone who's maybe never coded before, who's able to do this in just a few minutes. So pretty exciting the direction that things are going in. And from here I could also connect a custom domain. Once this finishes deploying I could actually link my own domain to build my business from here. That was a quick example of what things look like on Replit. And this is a tool that's been being used by millions of people around the world today. Like I mentioned, across developers, non developers in this like citizen developer category that we have. I just want to quickly see if this admin panel works yet. It would be cool to show the database working. It looks like it's found an error and it's fixing the error around the admin page. But you can see here that the database is connected. So as soon as it finishes. Oh, and I can see here I have now a users table and a webinar registrations table which is great. So it's making its way there. Okay, nice. So I can see the users table. Try registering, see if it shows up here. Getting that same error again. Okay, once it finishes here I would tell it to fix the text and then fix the database. But let's jump back to this deployment. So you can see here this link is now live and this page is available and fully deployed. I'll actually send this link in the chat. I think it's ending. But yeah, this link is now fully live Growth Pulse Replit app and that basically shows end to end how quickly you can create a new project with Replit and get something live in front of your customers. Great, thanks for sharing the link there. And with that I'll flip it over to Horatio who will share a little bit more how this could be useful. Connecting to HubSpot I see there's a few questions in the chat about connecting to HubSpot both via docs or Figma and HubSpot end to end. So Horatio can help answer some of those questions there.

Yeah, perfect timing. Hi everyone, my name is Horatio, I work on the business operations team here at Replit, so I myself use both of these tools. Both HubSpot and Replit weekly were I've been around for about three years so I've done everything from revenue operations to sales to a lot of things in our go to market team. So excited to show this audience, which is Primarily developers and HubSpot developers, how you can peel back the layers on Replit to get even more technical and in the weeds. So Aman kind of just demoed the main power of Replit Agent that's empowering lots of citizen developers, anyone from designers to product managers to software engineers on prompting the agent to build full end to end apps. But you could also use Replit to set up things like HubSpot CRM UI extensions or even create custom code actions that you could deploy in the same way that you just saw among quickly two click deploy a full website. You can also do the same type of power to two click deploy your own custom APIs. So if you have any workflows then it's just as easy to deploy those as APIs now. So the first thing that I'll show is the creation of Replit projects besides the agent. So Aman just showed from the main prompt how to create using Replit agent by entering a prompt of what you're trying to build. But the history of Replit goes back for years, eight years developing infrastructure that allows you to run and build on any framework or language. So anything from C Sharp to Node JS to React, you can all start to run on Replit. The Replit agent I will say because it's an agentic product with lots of complexity behind the scenes that we handle to make sure that people can successfully build a full application. It stays on the rails of initially starting with either Python Flask or React typescript. So if you start with the agent, it will kind of lean hard into one of those two stacks. But if you want to choose your own technical stack, you can do so by coming to create an app, choosing a template, and then finding the language that you want to build with. You can also import existing projects. I saw that question pop up in the chat. You can import directly from GitHub, so if you have a GitHub URL you can pull if you have access to that repository. Right now I'm not logged in, so it doesn't look super nice. I haven't connected my GitHub account to this, so usually it would show the repositories I have access to. So yeah, let me just quickly type in some of the names that I see typing in. But yeah, let's get started by showcasing what it looks like in a project where I have gone ahead and started probably commands that you're all very familiar with, which is the Getting Started template for a CRM UI extension. So right now I've created this and I'm going to remix it. Showcase how you can import HubSpot developer documentation to augment the CRM UI extension and see those results. But as you can see right now I'm in this workspace. I've got my files over here, my project is called Getting Started and I've got everything from a readme to all of my Node modules and Node JS packages. And then here I have the assistant, which is sort of the step by step more conservative version of the replit agent. As you saw from Aman's demo, the replit agent will sort of just jump right in and can build full stack features from the front end to the database to the backend logic. And the assistant is better for probably most of the people on this call who want to focus on a specific file and go step by step in implementing the tools as well. If you import from GitHub only the Assistant will be available. So just keep that in mind if you ever import something from GitHub or use one of our language templates, the assistant will be available for right now, but not the replit agent. That's again, back to the complexity of all the different tech stacks. Some quick background. I developed this and the other cool thing about Replit is that all of the packages that I've installed the same node version and everything that is running on this repl in this application I can share directly with anyone and we never have to worry about what version of Node JS they're running on their computer or what version of Python they're running on their computer. On Replit, you can literally post and share things, entire runtime environments as templates that other people can take and remix and use for their own. I'm actually going to take this template and I've got this incognito window open with another account. So you can see these are two different accounts. This is my work account and this is my personal account. So I'm actually going to pretend I'm a stranger on the Internet. I see this awesome HubSpot template that someone else in the community, Lopez Horatio, has made. I'm going to remix it and see if I can also get started with the template. I'm going to remix it and then in a second we'll see what I see right away as a newcomer, we're going to open it. We see these are settings that I had preset as a developer for what files should initially open for the people who remix my application. So I get tossed right in. I see the nice chat window with the assistant and then I also see the readme that seems to have some instructions. So it just says copy and paste the following message into replit assistant. So I'm actually going to go do that and just type right in and some quick background. So what I did as a developer is I actually added some language, some instructions for the assistant to run once a user comes in and tells it to read the readme file. I've included instructions for the assistant to run the shell commands to spin up and start running this CRM UI extension that I have in this project. So this could work for any of my co workers who I also want to have and share the CRM UI extension to. Or it could work for anyone in my community that I want to also experience the same thing. Oh, I'm not realizing my mistake though. Because I'm in an incognito window, I'm not logged into my HubSpot account on this browser. So I'm going to take a step back and I'm actually going to go pretend I'm doing the same thing and run the project from a known. From a known environment. So let me take this and I'm just going to say I'm going to remix it and then this is going to be my demo template. So same thing, forking the entire file structure, all the file contents, and then I'm just going to ask it to run the instructions that the developer has set up for me inside of the readme. All right, so let's Run this and you can see it's got the shell running inline. But you could also run the shell and all these commands right within here. But, but just for this case I'm just going to do it right from here. I'm going to click yes and then go to my dev sandbox and then obviously I'm going to deprecate and deactivate this personal access token. After this call, let me close this tab and stick with here. Run it. I'll just use the same default name I've authenticated and I'm just going to go ahead and click Run to start running the project. Awesome. So now I'm going to go and work over here and go view, start to view. If I can see the app which should be called. Let's see real quick example jsx so it's the example card, quick background. I seem to have uploaded it already to this account, but let's go see if I could find the card, the new card. So example card. Okay, so we've got multiple example cards. I want to identify which one is actually the one I'm working with within this project. So let's see. Oh, looks like I might be running it. Let's see. I might have been running the project multiple times both in this inline shell and in this shell before. So let me just. Let me just move things over to the other shell while to make things a little bit easier and to read. So I'm just going to go inside of the project, continue. And it looks like another instance is already running. It might be in my old project. So let me go ahead and see. It's not running in here. I might be running it in this one. Sorry about that little sidetrack. Let's just go ahead and run it again one more time. Let's do HS project, HS auth and we still have.

Our personal.

Same one. Let's view the other account. Grab the API key or the access token. Let's do it one more time. Okay, one more time. So the demo, the demo gods are not on our side today unfortunately. Looks like I have some running instance somewhere else. So I'm going to have to. I'm going to have to take another alternative plan which is jump right into. Instead of showing the example card and how we would run it and show how it's running in project in development mode, I'll at least demo how I would plan on plugging in other components that I would want to incorporate in my UI extension. So really quickly we're all probably familiar with the Getting started CRM card, which is seen here. If we go to Contacts and I open. There we go. Looks like someone's already feeding in some some data. So let me open. Brian, we got our example card. If I wanted to go ahead and add another element like say, for example, let's go down here and I want to actually. Let's do an iframe modal. That'll be fun. And then I want to see if I can actually embed a. Instead of Wikipedia here, I would Want to embed replit.com let's see if we can get the project upload to work. I'm going to start a new chat and I say within my CRM Card CRM UI extension, I want to add a iframe component and then all I need to do to give it context to HubSpot documentation is just paste that URL, click get context, get the content. It's scraping it, pulling it in, learning everything that it needs to know about this component, at least whatever's on this page. At this URL, I click enter and then I'm going to let the agent give it a shot to actually go and build out all that react component in the way that the HubSpot docs say to. So in a second here, it's going to go straight to my example jsx file and then implement those changes. So I'm going to go here and then we're just going to give it a shot for whatever it decides on. I'm going to clear my shell right now and then I'll scroll down to make that a little less.

All right.

The other thing is with the assistant, you can open a diff file to see all the changes that it's proposing. And if you have any feedback on something that might not look right, you can provide it that feedback and it will go ahead and make those changes based on whatever you ask it. But for this one, we're vibe coding today and just going with the flow. So I'm just going to click Apply all and it's made a checkpoint. So in case I did hit Apply all, I could always go back and undo the changes. If it's breaking something for the sake of this demo, I'm just going to go ahead and I'm going to try to upload this to and see if that works instead of what we were doing earlier, which was running HS project project dev. So usually we wouldn't do that. But since we're just connected to the development sandbox, I'm totally fine with it. But Before I run that, I'm just going to quickly check my auth and then one more time just like authenticate within the dev sandbox and then we're going to go be back. All right, let's say accounts lists, make sure we're logged into the dev sandbox. Looks like we're there. And now I'm in my getting started project and then I'm going to click HS upload. Oh, HS project upload. Thank you for the SDK or the CLI for the helpful commands. And there we go. Oh, so the other thing to note is that you'll notice I never ran the NPM install HubSpot cli and that's again because I started with the template, I had already installed that node package and so all those node packages, the same node version, all the installation that happened beforehand, and even though it's pretty simple, it's like three commands, it's just installing one node package. The same complexity, the same thing will translate to even more complex projects where you might have installed multiple dependencies that future teammates might need or some of your clients might need. If you're sharing a code template like this with them, they could just jump right in, hit run on the repl, and start working with the same exact code. So we're going to go ahead and we're going to look for the Getting started app within our project. So I'm going to go ahead again, click customize Record and it's probably going to be the last, the last new one that I put in here. So let me go to add cards. We're going to look at example and maybe it's this one. So it's this one. We're going to include it. Actually, I'm going to go back here, we're going to go to local dev add cards and we're going to do example, card stream, save and exit. We're going to go back. Okay, we have this. Okay, sweet. So we got the modal working, albeit we couldn't get HS project dev to run. But that might be due to networking issues because HubSpot's probably not used to a non local dev machine to run. Since Replit is completely running in the cloud, there might be some configuration things that we'll probably work with the HubSpot team to figure out so that we make sure that your experience is seamless. But as of now, HS project upload should work. But yeah, I think I'm going to pause there just given that. Unfortunately another demo that I had in mind was also causing some Issues. So I'll leave it there. I think the main framework is there of you can start a project, you can share the exact same packaging with anyone, including clients and internal teammates. And coding is just as easy as. Or coding up a new element or a new component is as easy as just linking to the developer docs, clicking enter and letting the agent code it up for you. So even if you're not a react savvy developer, all you need is a HubSpot docs which they're some of the best, so just link them in there and the assistant will run it for you. Awesome.

All right, I'm going to bring a few people upstage and let's go into a little bit of a Q and A. First of all, amazing job. Let's get rid of the screen and focus on you all. Before I actually start taking any questions, is there a best way to use replit? Are there like gotchas we want to avoid? Are there things we want to be aware of?

You.

You've done this a thousand times, so you just do it by, you know, rote. How should we interact with it and make sure that we have the most success possible?

I can, I can, I'm sorry, that's.

Open to both of you. Horatio, you were unmuted, so you get, you get it.

Oh, sounds good. So I would say whenever I'm talking to a non technical audience, which I know most of the audience is technical, but what will happen is replit's an amazing tool to collaborate with your non technical teammates. So if you ever hand this off to someone else to build an app or you know, try out Replit, the best thing that I give that, the best type of advice that I give non technical people is start with the general idea, meaning your core objects for your application, such as your pages, and then all of the objects within there, then you can implement the database and backend and then you implement authentication. That's sort of like the order of operations for building full really any software for you that might seem really, if you're a technical person on this call, it might seem pretty straightforward. But just those three orders of operations could help a lot of headache for non technical teammates who might give this a go.

No, I totally agree. The concept of vibe coding, you kind of forget that sometimes you just go straight into what you want to be doing and you forget that order of operation.

Exactly. And if you give it too much or you try to do too much at once, the LLMs that we have today are kind of just at a certain state.

The other thing there is. I mean the more specific and niche the topic is, obviously LLMs will know less about it. So just being able to provide the additional context as needed. If you want something to look a certain way, giving it a screenshot of a mock up, or if you want something to use a certain data set, being able to like link to docs about that or provide the necessary information for it to build around that is always important. I think the best use cases and the most successful users provide the most context to the model to do what.

They need and you also help with that, right? So once you're initially writing in what you want to be doing, you can ask replit to refine that prompt, correct?

Yeah, exactly. I found that everyone kind of forms their own best practices though around these things. You kind of learn how the agent works over time and the right level of information that it'll need to get what you want. Some people also prefer to let the agent just go off and do its thing and then work based on what it created because it's also a great creativity tool. So oftentimes people will maybe create multiple versions to achieve the same thing and then choose which one actually is the closest to what they initially imagined.

I have a ton more questions, but I'm going to try to be not selfish and allow some of these audience questions to come up here. Borderline asks can we use Repl by Figma and HubSpot integration from end to end? Horatio, I want to send that one to you because you've been working with the HubSpot instance the most. So do you have any thoughts on that or have you even thought about it too much?

Yeah, so I think the closest thing that we have to an integration that I can officially say is that with what I demoed, which is pulling in the docs, reading them and I can kind of give a hint because we don't have a deadline yet. But everything that I just did, running the shell commands or even pasting in the core docs for the getting started guide will hopefully be as simple will all be integrated and recognized by the replit agent or assistant. As soon as you type in I'm building a HubSpot developer doc, or I'm building a HubSpot developer app, or I'm building a CRM UI extension. There's a world where hopefully one day we work with the HubSpot team to have a blueprint that works in the background for the agent to recognize and just do all those CLI commands for you.

Cool.

Maybe Oman could talk touch on figma.

Yeah, on the figma side. So we actually do have a experimental plugin. We'll share the link out to that. I'll send it in our chat that we can broadcast afterwards. So this allows you to kind of connect a mock up and have Replit Agent, or, sorry, replit the base product that Horatio showed, pull that in and create react components from it. In addition, we've also seen a lot of designers and people with Figma files just uploading screenshots or taking screenshots of the relevant components and having the agent build off of that. Obviously it depends how specific you want to be if your Figma file is more of a sketch or if your Figma file is more of a requirements. There's kind of a spectrum there, so you can definitely play with that plugin. But we're also working on tools to improve the experience for design with replit.

Great answer. Michael asked a question that Fraser, you did answer, but I kind of want to double click, as they say, into this a little bit. You can feed an existing project. You showed how you can connect to GitHub to do this. Can you speak more to that flow? Can I have branches in GitHub after I've done this, or is this all going to replace that point? How do I commit back and keep that? The source of truth still being GitHub?

Yeah, absolutely. Am I able to show my screen again?

If you would like to. I'd love for you to share your screen again.

Yeah, that'd probably be best. There's two things. One is you can always attach a GitHub repository to an existing project. I'm going to jump into this one. I was building this little app for people to manage their clients as an agency. So let's open it up, just get a quick view. It's called Agency Flow, very flashy. And it's serious enough where I want to attach it to a GitHub repository. We have a really nice GUI and integration with GitHub. If I wanted to, all I had to go to is settings, enter the remote URL. If I have a GitHub, like an empty one, maybe it's all set up and then I could just connect it, push it up there. The same GUI and integration would take place if I pulled in a repository. If I go to create an app import from GitHub, either click on something that's connected so all my repository names will be will appear here. If I clicked on them, what would happen is Replit would use the GitHub integration to pull in that repository. It would take a second to recognize what's the core framework or what's the core language that is representing the repo and then from there spin up the full environment with the core packaging and obviously the rest of your code. Then once that's pulled in then you would get the same integration and recognition of the branching. All the branches that you have in that repository would all appear here. You can use this branching and if you prefer the terminal, you could always just use terminal git commands.

Cool.

Provide the full experience.

Yeah, yeah, I love it. Moving on, AC had a couple questions that were actually addressed. I'm going to pull your screen off here now, Horatio, which was access to Google Docs. You demonstrated how to do that. I don't think we need to go over it again. But yes, you do have access to Google Docs and they are real time. Right. This is up to date. So once you put it in there, it's going to scrape that and it'll be the most up to date version of the docs we have.

Correct?

Like a, a Google Doc that you have or.

No, I think the Docs he's talking about the documentation, you know, docs.

Yeah, yeah, yeah, absolutely. Google is notoriously tricky though. You know obviously with just like setting up a cloud environment and like plugging in the right API keys. But within replit we have a tool called Secrets. It's got a little lock on it and you can store all your environment variables in there securely. So I know what I was doing willy nilly with my personal access token right there. Usually you can store those in secret environments for any other APIs, but I know HubSpot's integration is a little different.

Ace also asked what about the HubSpot CMS React? I think that was dealt with when you did the UI extensions because it's basically all going to projects. You can use a CLI inline. I'm talking a lot. Horatio, you go ahead and speak to this.

Yeah, same thing, same cli. The only tricky part is what I ran into just now, which is sometimes the project dev is a little finicky just because for how there's something we have to work with between our two engineering teams.

Moving along, Julie has what if a command fails? How's it going to debug itself?

If that was in reference to the agent like I showed, the agent can kind of take screenshots of what it has produced. It also has access to the console logs. So if it's noticing that an error is happening, the agent will kind of go in a loop and try to figure out why that's happening and try to solve it by either editing code, by creating new files as it needs, or even sometimes by asking the user to do some manual debugging and tell it what has happened. So it's pretty funny. Sometimes it says oh can you go to this page, try this out and tell me what it says after you click this. So there's this human and agent loop around debugging, but most of the time the agent works until it gets to a state that is successful. Love it.

Moving right along. This is not for you. All this is for us. Does HubSpot have any plans for providing such a training data for such AI models so that we do not have to work on that part? Yes, I think everyone is at this point right. If you, if you. You have to be able to be ingested by AI. I don't have any specifics on it, but I know that it is in the minds of people, any hubs, others watching. You can feel free to comment in the chat if you want to be more specific about that then. Paul McCarrison from a prompt is Replit actually creating a native HubSpot Themes, Modules and Sections Templates for example, from a prompt is replit actually creating native HubSpot Themes, Modules and section templates? Yes. I mean you, you have to.

I don't have.

I'm not really exactly sure how to answer this properly. Paul. Yes, it is creating the. The things it would be react. I'm not sure how is it working with Hubble per se? Horatio Is that something that it does.

I've to be. To be completely honest, I've really mainly stuck with the react components. But it could probably figure out if you just give it a link to the documentation or the theme or the component you're trying to create. Plug that in right from the HubSpot docs and it'll figure it out. Cool.

Paul, I'm sorry if that's not the most complete answer, but hopefully that works for you. I do have a couple more questions of my own and if anyone has more questions, please go ahead and add them to the chat. What are the best strategies for when Replit just gets stuck in a loop and it just isn't solved? You keep on asking it to solve a problem, but it doesn't. What. What's your. How do we deal with that?

Yeah, I can start here. I mean one of the solutions that we have is the idea of like a new chat. So similar to other AI Models, the agent has a context window of things that it knows, things that it's working on. By creating a new chat, you're able to basically refresh and restart. It'll still have context on your project, but it will allow you to kind of re approach with a new start from there. So that's one of the things at the top left of the agent pane. You can do new chat and then send the message again. So that's often pretty useful depending on. And then it really, really depends on the nature of how you're stuck, what it is. Specifically. We find that there's like a long tail of potential, like integration issues, for example. And there again, I'm just going to come back to making sure that it has access to the latest and correct documentation. So pasting that in as a link or pasting that in as a file for the agent to be able to read and understand is always quite useful. Those are the first two that come to mind. Horatio, do you have others? I'm curious. Ways to get unstuck, I guess.

Yeah. One method that I've recently been trying with customers who call in and maybe get stuck is I actually switch to the assistant, the blue one, and I make a prompt that's kind of along the lines of I could probably share it later with Dennis to share in some format. But it goes along the lines of describing the problem that you're facing, the bug you're facing, in, you know, as much detail as possible. And then you instruct the agent, you create a list that says, sorry, the assistant, you instruct it and you say, I want you to research deeply every single file, function, or potential reason for why this error is occurring, and then write it to another file called Instructions md. It's basically instructing the assistant to write a report into a markdown file in the project. And then you start a new chat with either the agent or the assistant and you say, hey, I'm facing this bug. Fix it. But before you start, take a look at Instructions MD and then reference those to then go and try to fix the error. So it's kind of like a one, two punch. Try to get a meta prompt from the AI itself and then re prompt the AI with the, you know, the technical details that it just created.

Cool.

I want to go over to your deployment and something just had a red flag when I was watching. Go through that. As a person who has had a bill from Amazon of like $3.7 billion and as a citizen developer, that's a little scary. It seems like A little too easy to actually spin up whatever you want. Any safeguards there?

Yeah, no, totally. It is definitely scary going into something where you don't necessarily know. I think on our side we provide some safeguards. So we allow you to set a billing notice. Once you've hit a certain threshold, we'll basically send you an email, send you a notification and app just letting you know that, hey, it's gotten to this dollar amount. And in addition to that, you can also set like a hard shutdown if things really get too far beyond what you're comfortable with. But the benefit of the auto scale deployment is that it also scales down to just $1 at the lowest end. So if you're not using it at all, we have many people who just have many kind of toy apps or prototypes or tests, and those can keep running, but then, yeah, they may have a few that kind of take off and continue to grow. And if you're less comfortable with the auto scale deployment, we also have the reserved VM deployment, which has a fixed cost on a monthly basis. So that's another option if you'd prefer a machine that's. That wouldn't necessarily scale with your usage.

So if I'm just like doing a little test project, would you just recommend the auto scale or is it. Should I go totally conservative on it?

I would usually recommend auto scale, especially if it's something that you're just testing out and you can keep it on some of the lowest settings just to get it in front of people and start testing things, go up as needed. Cool.

And to respond to Mark, Yes, I have deep pockets just because of, you know, I borrow from Dharmesh, our, you know, founder. So that's, that's the only reason I don't have any more questions off the top of my head. No, it's a lie. I want one more question. And it might be resolved in the GitHub part of it, but what are some best practices for working in teams?

Yeah, we actually have a Teams product, replit Teams. So what we showed here is mostly the individual experience. The Teams experience is very similar, but it has an additional feature called Projects, which allows you to actually have a lightweight GIT interface on top of replit, which allows you to fork and work on projects directly within the Replit tool. But Teams is one of the most exciting parts of seeing how these tools fit into workflows. So we're going to continue to invest throughout this year in making the Teams product better. But yeah, we'd be really interested from people, people like you people on the call who are trying this out with their teams to see what type of feedback you have. We're always open to chatting more, but yeah, our general kind of principle is to make it as easy as possible for people who want to use replit, but also let people use the tools that they prefer. So if you have a teammate who doesn't want to use the ReKit interface but still wants to work with you, they can still use the git pane to run it locally. They can also SSH directly into the repl. So they can use local IDE but still use replit's machine to collaborate and to write code directly into there.

Brilliant. If people do want to get in contact with you, what's, what's the best way going about this? I'll. I'll send a Horatio who, who is like the front man for this stuff.

We, we are a small team so if you submit on replit.com teams it looks very businessy. It looks like a. An inbound form to nowhere. But trust me, like I will at least see it. We're a really small team so I would submit your inquiry there and we'll get to you and happy to dive deeper, hopefully with better luck on the demo. If you ever are interested in learning more about how HubSpot could work in replit. Beautiful.

Horatio, Aman, thank you so much. Anton. If you have any. You have any more questions we should ask here, are you good to go?

Cool.

So, hey, thanks all for coming and let's talk more. See you all out there. Have a great day. Have a great weekend. And you know, in the old AI business, great.

Thank you.

Thanks everyone.

Thank you.