The Ai-Assisted Developer Workflow: Build Faster and Smarter Today

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Unlock the next generation of developer productivity. In this talk, we'll dive into how AI-powered tools are transforming the way we build software. Discover techniques for rapid iteration, intelligent debugging, and the creation of exceptional user experiences. Whether you're using cutting-edge AI models or exploring the first wave of AI assistance, this talk will equip you with strategies to level up your workflow.

This talk has been presented at JSNation US 2024, check out the latest edition of this JavaScript Conference.

FAQ

AI agents can help by autonomously completing tasks, making decisions based on data, generating code, running tests, detecting bugs, and iterating on solutions. This approach mimics the iterative process engineers use to tackle problems.

An AI agent is a program that can autonomously complete tasks or make decisions based on data. It understands a task's intent, plans steps to solve the problem, executes actions, and adapts to the environment.

Yes, AI-powered tools like Repl.it Agent and v0 from Vercel are lowering the barriers for non-technical users to build apps by generating code based on simple prompts and providing live previews for easier iteration.

Examples include taxi AI managing GitHub repository settings and agent.exe booking flights via Google Flights. These agents can navigate user interfaces, execute tasks like booking or managing software settings, and adapt to user prompts.

English is becoming a crucial language in AI-driven development as the ability to clearly define requirements and describe ideas is key to optimizing AI outputs. This highlights the importance of descriptive and specific communication skills.

Adi Osmani believes that while AI can generate code, experienced engineers are crucial for understanding architecture and debugging. AI will democratize software development, but the need for engineers to reason about problems will remain.

AI for code generation can outline plans, generate code, run tests, detect bugs, and iterate on solutions, making it a collaborative process. This enhances the efficiency and quality of software development compared to traditional prompt-response models.

Adi Osmani mentions tools like Repl.it Agent, v0 from Vercel, Bolt from StackBlitz, and AI-powered editors like Copilot and Cursor. These tools help users generate code, manage projects, and iterate on software development.

AI agents can assist in iterating and improving code, automating tedious tasks, and enhancing workflow augmentation. They are expected to evolve and collaborate with other agents, leading to more efficient and scalable software development processes.

AI is transforming software engineering by reducing the gap from idea to execution, helping to shorten the distance between having an idea and getting a functional prototype. AI agents can assist with coding, iteration, and improvement throughout the software engineering lifecycle.

Addy Osmani
Addy Osmani
31 min
18 Nov, 2024

Comments

Sign in or register to post your comment.
  • Peter Olu
    Peter Olu
    So enlightening. AI is a significant plus to dev processes.
  • Christos kuznos
    Christos kuznos
    None
    For DevOps too
  • Sulley Abdul Latif
    Sulley Abdul Latif
    TechVerge Africa
    AI is really a game changer for developers
Video Summary and Transcription
AI is transforming software engineering by using agents to help with coding. Agents can autonomously complete tasks and make decisions based on data. Collaborative AI and automation are opening new possibilities in code generation. Bolt is a powerful tool for troubleshooting, bug fixing, and authentication. Code generation tools like Copilot and Cursor provide support for selecting models and codebase awareness. Cline is a useful extension for website inspection and testing. Guidelines for coding with agents include defining requirements, choosing the right model, and frequent testing. Clear and concise instructions are crucial in AI-generated code. Experienced engineers are still necessary in understanding architecture and problem-solving. Energy consumption insights and sustainability are discussed in the Talk.

1. AI's Impact on Software Engineering

Short description:

AI is transforming software engineering by using agents to help with coding. The gap from idea to execution can be reduced, enabling the creation of functional prototypes. There are various solutions in this space that can assist in shipping products to production. AI-powered tools have lowered the barriers for people to bring their ideas to life. Taking the first step towards executing and refining ideas is challenging, but agents can support the entire software engineering lifecycle.

All righty, hey folks, my name is Adi Osmani. I'm an engineering lead at Google, and today I'd like to talk to you about how AI is transforming software engineering. AI is, of course, a hot topic. It can feel like things are changing really fast. And I want to focus on something very specific today. It's going to be how agents can help us with coding.

Now let's zoom out for a moment. One of the greatest skills that you can acquire is to be able to reduce the gap from idea to execution. And when it comes to coding or building products, I believe that this is where AI can really help us make a big difference. It can shorten that distance between you having an idea to being able to get out a functional prototype that you can play with. So we're going to touch on a number of different solutions in this space that enable this idea. Many of them are already helping folks ship things to production.

Now I loved this story from the other week of an 11-year-old that had an idea for an app, and between dinner and bedtime, she was able to build a functional version that she could share with her friends, which is just incredible. Now traditionally building apps required extensive knowledge, lots of technical skill. Now with tools powered by AI agents, the barriers are starting to lower for folks to just get their ideas out. And I'm really excited about that. Now this story used Repl.it Agent. With a prompt as simple as create an event management service, you're able to generate a flask and vanilla JavaScript web app. It's got full authentication. It's got event creation and management. You can handle SQL in your back end. It gives you a decent starting point. You can then work with that chat agent and refine and test it. Really cool stuff. Now in many cases, ideas alone are the easy part. Taking that first step, being able to execute, bootstrap towards a working version of your idea, that's hard. But software engineering is not just about getting started. It's about iterating and improving towards a goal. And that's where I'm particularly excited about agents. Not just where they can help us with bootstrapping and getting started, but across the software engineering lifecycle.

2. Understanding Agents and Their Role

Short description:

An agent is a program that can autonomously complete tasks or make decisions based on data. It can understand a task's intent, plan steps, decide and execute actions, and adapt to the environment. Real-world examples include taxi AI protecting a repository on GitHub and agent.exe booking flights. Agents take a nuanced approach to code generation, outlining plans, generating code, running tests, and iterating for better results.

I've mentioned the word agent a few times. What is an agent? Well an agent is a program that can autonomously complete tasks or make decisions based on data. What do we mean by autonomously? Well it means that the agent is able to understand a task's intent. It can plan steps to solve the problem. It can decide and execute actions and adapt to the environment. This is maybe best illustrated with some examples.

So consider how many of us today might use a chat interface. We might ask something like chat GPT to write an article from start to finish and get a one-shot response. Now you probably need to do some work to iterate on it yourself. An agentic version of that is a little bit more nuanced. It might write an outline, decide if research is needed, write a draft, evaluate if it needs work and then revise things itself.

So let's look at some real-world examples of this. So here's an example of an agent in action. This is taxi AI protecting the main branch of a repository on GitHub. It's able to study the UI, figure out that it needs to go to settings, and then create, customize, and apply a new branch protection rule before finally submitting it. It's also giving you a log letting you know what's happening behind the scenes. This has multiple steps to it. Very cool that this is possible. What about booking flights from somewhere like Seattle to San Francisco? This is agent.exe. It's free, it's open source, uses Quad, lets you control your computer. So here it is navigating to Google Flights and completing all of the details from our prompt and then submitting a search on our behalf. A more advanced version might actually be able to complete the booking for us and do the checkout.

Now back to one-shot prompts versus agents. When we talk about AI for code generation, most of us are used to the idea of prompt and response. You give the AI a prompt like, write me some code that does X, and it responds with some code. Now an agent takes again a more nuanced approach to this. Maybe it outlines a plan for how to solve this problem. It can generate code, check it, run tests, detect bugs, and then rethink and fix if something doesn't look like it's working. Now that iterative process mimics a lot more of what we as engineers tend to do. We iterate on tackling problems to deliver better results.

3. Collaborative AI and Automating Code with Agents

Short description:

AI becomes a collaborator, Anthropic released Quad's computer use feature. Agents will evolve in design patterns, reflecting on quality, using external tools, planning and collaborating. The modern AI agent stack is growing with different layers and tools. Automation and augmentation are opening new possibilities. Real-world examples of automating code using agents. Wrappers around APIs offer value. Introducing v0 from Vercel, an AI interface builder with generative AI, live preview, and visual iteration.

And in that world, the AI becomes a little bit more of a collaborator rather than just a generator of outputs. I was really excited to see Anthropic release Quad's computer use feature recently. It basically lets Quad use computers the same way that a person might. So we can give it a task like generate me a 90s themed webpage, and it can then navigate itself. It can open up a browser, it can navigate to Quad, it can write out a prompt that'll give you some sort of optimal result. It'll generate the code, give us a preview, and then it knows that it needs to download the code, run it on a server locally, and if it finds bugs, it can proactively go about fixing them, which is kind of cool.

Now we're going to see agents evolve across a few different design patterns over the next few years. That includes how much they're able to reflect to improve the quality of the output, how much they're able to use external tools to help you, how much they plan or even collaborate with other agents in a multi-agent world. Now the modern AI agent stack for this whole space, it's big and it keeps getting bigger. But there are lots of different layers here. There's everything from model serving to storage, vector databases, lots of different tools and libraries. And as this field matures, I think it's possible we're going to see scalable services with more standardized APIs as the next major leap.

Now there are a lot of tedious tasks that we as engineers have to deal with from time to time, and that includes migrations, which can sometimes feel like you're sweeping water back into the ocean. Now AI has been useful here, I think, in helping us think about how we can go beyond things like code mods to augment our workflow. In fact, speaking of which, augmentation was a really big topic where AI and code was concerned last year and the year before. Lots about autocompletion and guided migrations. I think that automation is going to be even bigger next year, where agents, full-stack co-generation, and multimodality are really going to open up a lot of new possibilities for us. So what about automating code using agents? This is a big exciting topic, and I want to show you some real-world examples. Now just to keep us grounded, there are some people that might say that 99% of AI companies look a little bit like this. Maybe they're just wrappers around somebody else's API. I actually think that these wrappers can sometimes offer a lot of value, especially in the agent space. And so we're going to talk about a bunch of different tools and services that you might find useful. We're going to start off with v0 from Vercel. Now v0 is an AI interface builder. It uses generative AI to produce code based on user descriptions. It works fairly well with popular tools like Next.js, Shad.cn, Tilwin CSS. You can create a free account to get started with it. And what really sets v0 apart is its ability to not just generate code, but also give you a live preview of the components being created. You can visually iterate. It's really, really good at visual iteration as you give it more and more prompts.

4. v0: Building Components and Interactive Prototypes

Short description:

v0 is good for components and mini-apps. It can generate code and stream UI in real-time. It can create Google Slides and interactive components from designs. More details provided, better tailored results.

Its main downside, I would say, is that it could be better at full stack app generation, but for components and small mini-apps it's really, really good. So your journey in v0 starts with telling it what you'd like to build. They actually just added support for including JSON files. So I've included some data here, and I want to share my slides after this talk, but instead of giving you a PDF, I've asked v0 to build out Google Slides for us. So let's see what it can do. It's generating some code right now.

One of the things I like about v0 is it starts to stream in UI as it's building this out. So we can see this happen. We've got a sort of a navigation menu in place. We've got some formatting buttons. We've got this viewfinder. We've got somewhere that looks like it's going to placehold stuff. Awesome. All right, so it's loaded up our slides. It's got a full screen button here. Let's click the full screen button. And can I switch between slides here? Awesome. Now obviously this is very simplified. But this is hella cool that we could do this in just like one shot prompt. And I was really, really happy to see that this worked.

Now let's say that you have a design for a beautiful component. This is an example of one that I liked. You can give it to v0 as multimodal input. So you just paste the screenshot into chat. Here I asked it to recreate this design with the same colors in one shot, and I was pretty impressed that it was able to generate me a decent reproduction with this block that's so much better than anything I'd be able to do myself. What's doubly cool is that I can then ask v0 to turn this into an interactive component. I can start adding my own items, marking items as complete, and I have a semi-functional prototype that I can then share with other people on my team, or even just use on a day-to-day basis. It's very cool. Now, just a few v0 pro tips. As with many tools for AI code generation, the more details you provide, sometimes the better tailored the results will be.

5. v0 and Bolt: Beyond Component Building

Short description:

Be specific in your prompts. v0 has first-class support for React third-party packages. v0 has CLI integrations. Bolt provides AI models with complete control over your entire environment. It handles generating UI, writing code, deploying, and collaborating. Bolt makes it trivial to drill into the call stack of issues and can try to fix them. Bolt got more reliable at fixing bugs. Bolt has first-class integration with Netlify.

Be specific in your prompts. If you're using third-party libraries, v0 does have first-class support for a few specific React third-party packages, including React 3 Fiber. Do consider adding additional documentation if there's something that you're using where you're not entirely sure if it's included in any of the training data behind the scenes. I also love that v0 has also got pretty decent CLI integrations. You can just NPM install your component and get started using it in your project.

Next up, let's talk about something a little bit more full-stack. Bolt. This is bolt.new from StackBlitz. Now, v0, Cloud, and many of the other things I might show you, they're incredible, but it's difficult to find something that's able to install packages on your behalf, run backends, edit code. And Bolt really gives you AI models with complete control over your entire environment. The file system, your package management, your terminal, even the browser console.

I've been using Bolt every couple of days to build new apps, and I've really been enjoying it. Now, it's designed to handle everything from generating UI, to writing code, to deploying and collaborating with other people. I would say a main downside at the moment with bootstrapping is it maybe doesn't help as much later on in your iteration cycle. So you can bootstrap a really good MVP, but then you have to decide at what point you have to shift over to using StackBlitz or download the code and just work on it in VS Code. So we're going to try building a non-trivial movies app using Bolt.

One other Bolt feature that I really like is when you run into problems, it makes it trivial to drill into sort of the call stack of issues that came from command outputs or anything like that. And it can try to fix these things itself. This is a fixed error loop. In fact, as of recently, Bolt actually got even more reliable at fixing bugs. The team has been adding a lot more instrumentation and relevant information into the context to fix their error resolution logic, which means that there are far fewer situations where there's a small bug that's detected and you have to manually deal with it yourself. It also has pretty decent first-class integration with Netlify. So even if you're not like a Netlify customer, you have this nice little deploy button at the very top.

6. Bolt's Troubleshooting and Authentication Features

Short description:

Bolt makes it easy to troubleshoot and fix issues. It has reliable bug fixing capabilities and integrates well with Netlify. You can deploy and preview projects with one click, even without being a Netlify customer. Bolt also offers one-click support to open projects in StackBlitz, providing a similar experience to VS Code. It supports third-party authentication for managing movie lists and connecting to APIs. Bolt allows for logging in and out, drilling down into movie details, managing lists, and searching for movies. Additionally, it provides features like viewing previous chat sessions.

One other Bolt feature that I really like is when you run into problems, it makes it trivial to drill into sort of the call stack of issues that came from command outputs or anything like that. And it can try to fix these things itself. This is a fixed error loop. In fact, as of recently, Bolt actually got even more reliable at fixing bugs. The team has been adding a lot more instrumentation and relevant information into the context to fix their error resolution logic, which means that there are far fewer situations where there's a small bug that's detected and you have to manually deal with it yourself. It also has pretty decent first-class integration with Netlify. So even if you're not like a Netlify customer, you have this nice little deploy button at the very top.

One click, you can deploy it and see what it looks like in production, and then you can claim the project if you do want to use Netlify. But I enjoy being able to use this just to get a quick gut check in production of what I'm building. So here's our deploy, sort of working on Netlify. It's responsive, does what you'd expect. Now because Bolt is built by the same folks who do StackBlitz, you also get one-click support to be able to open up your project fully inside the StackBlitz environment. And there you get sort of a similar experience to what you get with VS Code. You get versioning and so on. Works pretty nicely.

Now I said I'd do a non-trivial app, so I want to show you the next version of this, which uses third-party authentication. I want to be able to log in and manage my list of movies. There's going to be a lot of crud in here, and so we're going to be connecting up to third-party APIs to accomplish some of these tasks. So I spent maybe another five to ten minutes giving it prompts here. We're just going to fast forward for time. So I'm able to log in and log out of an account. And then once we're logged in, let's just check the behaviors, what we'd expect. I'm able to drill down into individual movie details pages and view cast information. We see at the very top I've got search functionality, I've got the list management feature here, so I can go and I can create new lists. I can view my lists too. So I have a list here for my Halloween 2024 movies, which includes Seed of Chucky. If I wanted to expand on that, I can go and just do a quick search for other movies, so something like Bride of Chucky. Do a search, add it to the list, and everything works kind of as I would expect.

Now back to some features, Bolt also lets you do things like view previous chat sessions, and V0 supports that idea as well. So some very quick Bolt pro tips if you decide to try it out.

7. Bolt's Targeted Edits and Tips

Short description:

Bolt allows for targeted edits, locking files, and selecting code ranges for additional insight. Tips include regularly saving to GitHub or downloading checkpoints, using dummy data for backend development, leveraging local development with Allama, and the ability to customize and contribute to Bolt as an open-source project.

You're able to do very targeted edits, so you're able to select a number of files and say only perform the edits you're doing on these files. You're also able to lock files, so that it doesn't touch those during its generation process. You're also able to select code ranges, so if there's a function or a part of the function that you want to ask Bolt about, it supports that too for just giving you a little bit more insight.

A few additional tips, again, very important to be specific about what you want. In this case, if you use Bolt, I do recommend trying to regularly save to either GitHub or downloading sort of checkpoints of what it's creating. If you're working with backends, rather than letting it do a whole lot, maybe work with some dummy data, tell it to use dummy data while you're figuring out what your backend should look like and then have it go all out. You can also leverage local development if you want. So for privacy sensitive projects, you can actually run Bolt locally with Allama. One of the reasons for this is Bolt is actually open source. So I've been enjoying seeing folks hacking on it. You can customize it with other models, you can contribute back, and it's really amazing that all of this is available out in the open. Super, super cool.

8. Code Generation with Copilot and Cursor

Short description:

Let's talk about Copilot and its support for selecting third-party models. Cursor is a powerful alternative AI code editor with full codebase awareness, multi-model flexibility, and git style diffs. It provides an interactive chat experience and allows us to visualize code generation with clear diffs. We encountered a challenge with image configuration in Next.js, but Cursor helped us identify and fix the issue. We were able to add more features and maintain consistency across different subpages with Cursor. Pro tips include optimizing Cursor setup with ignore files or rules.

So what about generating code with agents in your code editor? Now let's talk about Copilot for a moment, or Clippy in Disguise, as I like to call it. Now Copilot was one of the first editors to really make a big splash for having AI auto-completion and code generation capabilities. And they recently added support for being able to select between different third-party models. You can use something from Quad, Google's Gemini, something from OpenAI, really pick the model that has the best strength for your project.

And we can't really talk about AI code editors without talking about some of the alternatives, so things like Cursor. So unlike traditional AI coding assistants that operate as plugins, Cursor actually takes a slightly different architectural approach. It's a complete fork of VS Code that's been built for AI integration. So it's got features like full codebase awareness, it can understand your context, it's got multi-model flexibility, git style diffs, you can chat for iterative code generation, lots of options in here. And I think that that codebase-wide insight is what really sets it apart. It's also got some nice features, things like docs integration, web awareness if you need to pull in additional content externally, command generation, it's really powerful.

Our starting point here is a basic Next.js boilerplate project. Like Copilot, Cursor's got an interactive chat experience, and we're going to build out a similar movies application to the ones that we were just doing. As Cursor generates code, it shows us clear diffs in green and red as code is being generated. That allows us to, sort of, visualize what's happening and maintain control over the process. Shows us a summary of changes once it's done, which can be handy. And here, we're actually encountering our first challenge running this app. It's an image configuration error with Next.js image component, and it looks like the host name for our images maybe needs some additional configuration because it's a third-party service. So I'm just going to copy that error. We're going to paste it into Cursor, and it identifies that we need to update our Next.js configuration with proper image domain settings. So we do that, we fix it, and boom, there we go. So the movies app is now working. It's pulling in real data from the movie database API. Now similar to our other examples, I spent another five or ten minutes with this, and I was able to add a lot more features. Things like the ability to manage and add favorites, browse categories, do searches, and even add a quick dark mode. So I was able to work across all of my subpages, including movies, and I was just generally impressed with how well Cursor was able to maintain consistency across these different features while handling things like state management and user interactions. Now some quick pro tips. You are able to optimize your Cursor setup using Cursor ignore files or Cursor rules. If you're interested, Cursor rules basically help you refine how you interact with projects, and there's a rich community around Cursor that allows you to do things like take their prompts that they've been using.

9. Optimizing Cursor Setup and Introducing Cline

Short description:

Optimize your Cursor setup using ignore files or rules. Cline is a powerful extension for VS Code with excellent agentic coding abilities. It can analyze file structures, execute terminal commands, and interact with browsers. The multimodal workflow allows for analysis of images and mockups. Consider the pricing of the model service when using Cline. You can configure the model provider and have transparency into costs.

You are able to optimize your Cursor setup using Cursor ignore files or Cursor rules. If you're interested, Cursor rules basically help you refine how you interact with projects, and there's a rich community around Cursor that allows you to do things like take their prompts that they've been using. So Cursor directory and .Cursor rules are two places you can check out. You can also, you have a few different options in Cursor, so you can use the chat for iteration, or they have a feature called composer that allows you to do larger batch operations. I tend to suggest people do bite-sized tasks, just instead of having big changes happen, but you have a lot of opportunities here to really go powerful with it.

Next let's talk about one of my favorite tools that I want to talk to you about today. It's Cline. So Cline was formerly called Claw Dev, and it's a powerful extension for VS Code with, in my opinion, the best-in-class agentic coding abilities that are available. It's also free. You do have to sort of pick a service like a model service, but it's otherwise free. It's able to analyze file structures, create and edit files, execute terminal commands for you, and even interact with browsers. So your experience with Cline starts as a sidebar in VS Code. You can open it up using this robot icon at the side. You get a chat box experience there. You can also include an image, so it's got multimodal support. You can add in screenshots, mockups, whatever you like as a part of the prompt. One of its standout features is that multimodal workflow. So it's able to analyze images, browser screenshots, you can paste in mockups, and things like that. I would say its main limitation ends up being whatever model service you use, sometimes those can get a little bit on the pricey side, so just keep that in mind. So Cline has the settings cog at the top. Before you start, you're able to configure what model provider that you want. Those include, of course, the popular ones, so Quad, Gemini, OpenAI. You can also select Olama. Now you're off to the races then. As you use Cline, similar to Cursor, you stay in the driver's seat every time that it wants to create a file, it will ask you to approve it. It gives you this nice animated diff view as well, so you get some transparency into what it's doing. Also notice that there's a running tally at the very top of the sidebar that gives you visibility into costs. How much are you using tokens? How much is caching helping you? Now this is really great. By the end of some of my coding sessions, if I've been coding for a few hours, sometimes it's a couple of dollars, sometimes it's less, but having transparency into this is really, really good. Now I mentioned image input earlier.

10. Website Inspection and Testing with Cline

Short description:

Cline can inspect websites and automatically fix errors using its multimodal capabilities. It supports end-to-end testing and offers tips to keep costs down. Cline is useful for iteration and building beyond the MVP.

One of the nice features of Cline is that it's able to inspect websites. So again, you can approve or reject this, but when I was building out that movies app, I ran into that exact same Next.js image component error. This one that we saw earlier. Now Cline did something a little different to Cursor. What Cline did was it already opened up a browser, it pulled in a screenshot of the error, and it used its multimodal capabilities to inspect the error and give me a fix. I didn't have to do a whole lot of other work there myself. So it applied the fix, it gave me a summary of what it did, and there's it working.

So I was able to use Cline to generate a movies app that has a full login and authentication flow. I'm also able to do things like persist and manage my favorites. So we're able to do things like browse different categories. We've got our favorites in here, I'm logged in. I can search for different movies, so here's a bunch of different Batman movies that I searched for. I can view my lists, I can check out my embarrassing corny comedies from the 2000s. And I'm able to create new lists and just manage all the movies that I love. And overall, it works really well. I've been enjoying using Cline.

One other thing about Cline is it actually already supports Anthropics computer use feature. So I showed you that it can launch a browser. It's able to help you with end-to-end testing, too. So you can launch a browser on your behalf, click elements, type text, scroll, capture screenshots. Here it is testing out a to-do application, and it's already figuring out what UI items to click on. And if it detects issues, it can then go try to fix these issues itself in that kind of agentic loop that I was talking about earlier. So very quick Cline pro tips. To keep your costs down, Cline itself is free, to keep your overall costs down, consider using something like OpenRouter or local models. This will really just avoid you having to spend a whole lot of money each month on these things. Use custom instructions to improve its performance. It's got similar ideas to cursor rules. Break up large tasks into smaller tasks, just generally speaking, that can help you as well. So how do these things all compare? Well, my latest process is to really use v0 for components, or otherwise Bolt for my full stack bootstrapping, and then Cline or Cursor are really helpful for iteration, where I want to continue building beyond that MVP. Bolt and v0 are really good for user-friendly non-technical users, and Cursor and Cline tend to be a little bit more for your traditional software engineer.

11. Guidelines for Coding with Agents

Short description:

When coding with agents, keep in mind the importance of precisely defining requirements, choosing the right model, planning for token limits, and conducting frequent testing. Agents provide opportunities for happy and surprising moments, speeding up the development process. There will be a shift in how developers approach software development as workflows become more mature.

What other guidelines can I give you? Well, it's better to go slow in the right direction. And so there are a few quick things that I've learned I want to zoom out and give you as advice.

So if you're coding with agents, there are four things to keep in mind. First, requirements need to be precisely defined if you want to get the outputs that you actually want. Two, choose the right model for your specific task. That can impact things like performance and cost. Do plan for token limits, like there are cases where I've been working on apps and I'll suddenly hit a hard limit, and I won't be able to do anything until the next day or a couple of hours from now. So plan for that. And finally, frequent testing is vital because AI agents can sometimes unintentionally modify unrelated code sections, unrelated parts of your UI. Sometimes those can lead to happy accidents, and sometimes they can lead to surprising accidents.

So to wrap up, agents represent a huge opportunity for some happy moments, some surprising moments. They're going to help you go from idea to execution a little bit quicker. And as those workflows become more mature, I believe we're going to see a big shift in how developers approach building software. I hope you found this helpful. I've been Adi Osmani. Thank you. You have been submitting some questions, and if you still want to, make sure to go to slido.com. Let me see. It was code 1118, I believe it was. And you'll be able to participate. And we've been getting some, so that's awesome. We're going to get into that right now. Adi.

QnA

The Importance of Clear and Concise Instructions

Short description:

The ability to have a clear idea of what to build and think crisply about the desired outcome is crucial. English skills, being descriptive and specific, are key for the future. Being clear and concise with instructions pays off.

You have been submitting some questions, and if you still want to, make sure to go to slido.com. Let me see. It was code 1118, I believe it was. And you'll be able to participate. And we've been getting some, so that's awesome. We're going to get into that right now. Adi. Welcome. Adri, hello.

All right. So I'm going to start with my own question, because I'm allowed to. And I'm going to start with a quote, and the quote is the following, by Andrej Karpathy. The hottest new programming language is English. Please comment. That's an excellent thing to ask me on. I think that as we move forward, the ability for a person to have a very clear idea of what they want to build is going to become crucial. People say, like, the reason software engineers are not going to be replaced is because clients don't know what they want. Right. Right. They can't describe it in detail. And I think that ability is to be able to think crisply about what you're trying to build so you can optimize to get the outcome that you want. I think that's going to be really important. So English skills, being able to be very descriptive and very specific, I think that's key for the future. Awesome.

And, you know, I ask that because I remember watching or listening to a podcast, and they were talking about that specifically. And this one engineer who had been a long time in the space said, you know, he felt a little bit of a little disappointed that the sort of sort of like humanities courses were sort of, you know, you know, creating getting I mean, we're in the backseat now and stem was basically at the forefront all the time. But now we're seeing that, you know, being able to be clear and concise with instructions is going to pay off in the end. Absolutely. All right. So thank you.

The Role of Engineers in AI-Generated Code

Short description:

AI can generate code, but experienced engineers are still necessary to understand the architecture and solve problems. Debugging AI-generated code can be a challenge. Roles for engineers will continue to be relevant. Bolt is versatile in generating code across different frameworks. The CLI feature showing cost is cool.

And let's I mean, this goes back to what you're saying. I got a question right here, which is the classic one that we've heard quite a bit now. Will AI put us out of our jobs? I was reading a story yesterday about a developer who had spent a few hours building out a whole set of new features. And things went wrong very quickly. Then they had to roll back the entire set of features. And they realized was, yes, it is easy for AI to generate code to generate even an MVP. But the requirement for it to have experienced engineers who actually understand the architecture, who understand like the problems actually being solved is not going to go away in the short term and the short to midterm. Definitely. I think that the ability to reason about problems properly to be able to help people debug, we're going to see like AI will democratize more and more engineers, more and more people being able to build. But it also is going to open up all sorts of problems where people are going to need to debug that AI generated code. And if you don't know what's been generated, that's going to be a problem. Right. So I think that there are continued there will continue to be roles for engineers definitely for many years to come. Awesome. Thank you very much for that question. Person anonymous.

I saw another one here I want to get to. Oh, this question is from Renee. Is Bolt better at code generation in certain stacks slash frameworks or can you specify a stack? Great question. So to zoom out very quickly, the real superhero in many of the things that I showed you today is Claude Sonnet. And I think that model providers maybe don't get as much love or appreciation as they deserve. There are lots of great models out there today, by the way. I think that with Bolt specifically, they do a very good job of being able to generate across different frameworks. So my experience is not just React and Next.js, it's also good for Vue and Svelte and many other kinds of frameworks. So it's not tied to just one narrow set of users. Thank you for that. I have to apologize because I'm getting this pages jumping up and down.

Okay. Here's another one. The CLI feature showing cost is really cool.

Insights into Energy Consumption

Short description:

No, I haven't seen tools that provide insights into energy consumption. It's a great opportunity for someone to research. A sustainability talk will be held in the next day or two.

Have you seen any tools that provide any insights into energy consumption? Energy consumption on the AIS? Actually, no, I haven't. In Another Lifetime, we talk a lot about things like performance. And even then, we would talk occasionally about energy consumption and we're throwing so much JavaScript out there at the web, we're using CPU cycles all the time. And I think even a few years ago, people were very interested in this idea of getting more insight into energy consumption throughout because it's not just about like, oh, hey, you're running JavaScript on a client's computer. There are lots of servers along the way that are using energy as well, right? You're using more and more server rendering. What's the cost of that? TLDR, no, I haven't seen tools that do this. I think it's a great opportunity for someone to research it. Absolutely. And if I'm not mistaken, there's going to be a sustainability talk at some point during the next day or two. So that would be another opportunity to have that conversation.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Building a Voice-Enabled AI Assistant With Javascript
JSNation 2023JSNation 2023
21 min
Building a Voice-Enabled AI Assistant With Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
AI and Web Development: Hype or Reality
JSNation 2023JSNation 2023
24 min
AI and Web Development: Hype or Reality
Top Content
This talk explores the use of AI in web development, including tools like GitHub Copilot and Fig for CLI commands. AI can generate boilerplate code, provide context-aware solutions, and generate dummy data. It can also assist with CSS selectors and regexes, and be integrated into applications. AI is used to enhance the podcast experience by transcribing episodes and providing JSON data. The talk also discusses formatting AI output, crafting requests, and analyzing embeddings for similarity.
The Rise of the AI Engineer
React Summit US 2023React Summit US 2023
30 min
The Rise of the AI Engineer
Top Content
Watch video: The Rise of the AI Engineer
The rise of AI engineers is driven by the demand for AI and the emergence of ML research and engineering organizations. Start-ups are leveraging AI through APIs, resulting in a time-to-market advantage. The future of AI engineering holds promising results, with a focus on AI UX and the role of AI agents. Equity in AI and the central problems of AI engineering require collective efforts to address. The day-to-day life of an AI engineer involves working on products or infrastructure and dealing with specialties and tools specific to the field.
Web Apps of the Future With Web AI
JSNation 2024JSNation 2024
32 min
Web Apps of the Future With Web AI
Web AI in JavaScript allows for running machine learning models client-side in a web browser, offering advantages such as privacy, offline capabilities, low latency, and cost savings. Various AI models can be used for tasks like background blur, text toxicity detection, 3D data extraction, face mesh recognition, hand tracking, pose detection, and body segmentation. JavaScript libraries like MediaPipe LLM inference API and Visual Blocks facilitate the use of AI models. Web AI is in its early stages but has the potential to revolutionize web experiences and improve accessibility.
Code coverage with AI
TestJS Summit 2023TestJS Summit 2023
8 min
Code coverage with AI
Premium
Codium is a generative AI assistant for software development that offers code explanation, test generation, and collaboration features. It can generate tests for a GraphQL API in VS Code, improve code coverage, and even document tests. Codium allows analyzing specific code lines, generating tests based on existing ones, and answering code-related questions. It can also provide suggestions for code improvement, help with code refactoring, and assist with writing commit messages.
AI + UX: Product Design for Intelligent Experiences
C3 Dev Festival 2024C3 Dev Festival 2024
28 min
AI + UX: Product Design for Intelligent Experiences
Premium
AI design challenges include bias, safety, and security. Trust and transparency are important in AI. Design principles for AI include user control, fighting bias, and promoting good decision-making. AI can enable the design process and investors expect to see it included in products. AI empowers individuals to create and share ideas, but managing expectations is crucial.

Workshops on related topic

AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
AI for React Developers
React Advanced 2024React Advanced 2024
142 min
AI for React Developers
Top Content
Featured Workshop
Eve Porcello
Eve Porcello
Knowledge of AI tooling is critical for future-proofing the careers of React developers, and the Vercel suite of AI tools is an approachable on-ramp. In this course, we’ll take a closer look at the Vercel AI SDK and how this can help React developers build streaming interfaces with JavaScript and Next.js. We’ll also incorporate additional 3rd party APIs to build and deploy a music visualization app.
Topics:- Creating a React Project with Next.js- Choosing a LLM- Customizing Streaming Interfaces- Building Routes- Creating and Generating Components - Using Hooks (useChat, useCompletion, useActions, etc)
Vibe coding with Cline
JSNation 2025JSNation 2025
64 min
Vibe coding with Cline
Featured Workshop
Nik Pash
Nik Pash
The way we write code is fundamentally changing. Instead of getting stuck in nested loops and implementation details, imagine focusing purely on architecture and creative problem-solving while your AI pair programmer handles the execution. In this hands-on workshop, I'll show you how to leverage Cline (an autonomous coding agent that recently hit 1M VS Code downloads) to dramatically accelerate your development workflow through a practice we call "vibe coding" - where humans focus on high-level thinking and AI handles the implementation.You'll discover:The fundamental principles of "vibe coding" and how it differs from traditional developmentHow to architect solutions at a high level and have AI implement them accuratelyLive demo: Building a production-grade caching system in Go that saved us $500/weekTechniques for using AI to understand complex codebases in minutes instead of hoursBest practices for prompting AI agents to get exactly the code you wantCommon pitfalls to avoid when working with AI coding assistantsStrategies for using AI to accelerate learning and reduce dependency on senior engineersHow to effectively combine human creativity with AI implementation capabilitiesWhether you're a junior developer looking to accelerate your learning or a senior engineer wanting to optimize your workflow, you'll leave this workshop with practical experience in AI-assisted development that you can immediately apply to your projects. Through live coding demos and hands-on exercises, you'll learn how to leverage Cline to write better code faster while focusing on what matters - solving real problems.
Building Full Stack Apps With Cursor
JSNation 2025JSNation 2025
46 min
Building Full Stack Apps With Cursor
Featured Workshop
Mike Mikula
Mike Mikula
In this workshop I’ll cover a repeatable process on how to spin up full stack apps in Cursor.  Expect to understand techniques such as using GPT to create product requirements, database schemas, roadmaps and using those in notes to generate checklists to guide app development.  We will dive further in on how to fix hallucinations/ errors that occur, useful prompts to make your app look and feel modern, approaches to get every layer wired up and more!  By the end expect to be able to run your own AI generated full stack app on your machine!
Please, find the FAQ here
Free webinar: Building Full Stack Apps With Cursor
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
71 min
Free webinar: Building Full Stack Apps With Cursor
Top Content
WorkshopFree
Mike Mikula
Mike Mikula
In this webinar I’ll cover a repeatable process on how to spin up full stack apps in Cursor.  Expect to understand techniques such as using GPT to create product requirements, database schemas, roadmaps and using those in notes to generate checklists to guide app development.  We will dive further in on how to fix hallucinations/ errors that occur, useful prompts to make your app look and feel modern, approaches to get every layer wired up and more!  By the end expect to be able to run your own ai generated full stack app on your machine!
Working With OpenAI and Prompt Engineering for React Developers
React Advanced 2023React Advanced 2023
98 min
Working With OpenAI and Prompt Engineering for React Developers
Top Content
Workshop
Richard Moss
Richard Moss
In this workshop we'll take a tour of applied AI from the perspective of front end developers, zooming in on the emerging best practices when it comes to working with LLMs to build great products. This workshop is based on learnings from working with the OpenAI API from its debut last November to build out a working MVP which became PowerModeAI (A customer facing ideation and slide creation tool).
In the workshop they'll be a mix of presentation and hands on exercises to cover topics including:
- GPT fundamentals- Pitfalls of LLMs- Prompt engineering best practices and techniques- Using the playground effectively- Installing and configuring the OpenAI SDK- Approaches to working with the API and prompt management- Implementing the API to build an AI powered customer facing application- Fine tuning and embeddings- Emerging best practice on LLMOps