921: AI Coding Roadmap for Newbies  ## Metadata - Author: [[Syntax - Tasty Web Development Treats]] - Full Title: 921: AI Coding Roadmap for Newbies - Category: #podcasts - URL: https://share.snipd.com/episode/edbb2e46-aba3-4d2b-bd92-a2ca4463c13e ## Document Notes ## Highlights - **Begin AI Coding with Ghost Text** - Start coding with AI using IDE ghost text for an easy, low-intimidation experience. - Accept or reject AI-generated code suggestions quickly to stay productive. Transcript: Wes Bos Right let's get on into it um first we're going to talk about how to actually interface with ai ai when you're writing code. So probably the most entry-level one you maybe have experienced is just like ghost text or auto-completion. So you fire up an IDE editor and whatever editor you're using, so obviously VS Code, Windsurf, and Cursor are probably the big three right now, but any editor you're using will have some Sort of AI plugin for it. And then as you're typing, it will try to auto-complete it. That can be a little bit frustrating at times, but I also find myself when it's turned off, I'm almost at a point now where I'm just like, or like you're writing code somewhere that it doesn't Have that, like text area or or like even like on Twitter and you're just like I need that you know where where's the the autocomplete for it yeah and I will say that this is the lowest barrier Scott Tolinski To entry one and honestly probably the least intimidating version because most of us are used to working with autocomplete of some regard inside of our text editor and that ghost text Popping in there shows you what it's going to be. You can choose to just toss it in there or not. So for me, this is like, if we're talking dollar signs in terms of intimidation factor, this is like a $1 sign. It pops in there. You can choose to accept it or not. And I think that is a relatively easy way to get going with working with AI and not have it not feel super icky, right? Wes Bos I know there's lots of people who don't even like autocomplete, like not even like AI aside, people don't like autocomplete at all. So if that's you, maybe you want to check out one of the ways to sort of chat with your code base. So all of these IDEs are going to have a sidebar where you can go ahead and select a model and be able to chat with it. Most of them now have defaulted to what's called agent mode. And what agent mode will do is you type into the box, add a component that does X, Y, and Z and update the database. And it will go ahead and do it but there are other modes where you it will either just give you the answer which is like the very basic chat you can ask it to summarize something you can ask It to modify something it'll just give you the answer you can go ahead and copy paste it or it will allow you to apply the edits manually which quite honestly is is kind of kind of slow. And a lot of people didn't use that, this like chat feature until the agents came along where it just sort of staged all of the changes. And ([Time 0:03:58](https://share.snipd.com/snip/bafc2437-9b23-430e-a25a-2c93568a58c8)) - **Prefer IDE Chat Over CLI Agents** - Explore CLI agents like Cloud Code for interacting with AI via the terminal. - Prefer IDE chat agents initially for a more visual and controllable AI coding experience. Transcript: Wes Bos So instead of asking cursor inside of the IDE to do something, the we're seeing a lot of people use terminal UIs to interact with your code base. So the big ones being probably by far the biggest one is cloud code. And then a couple as of recording couple days ago google rolled out their own gemini code uh there is codex from open ai there's open code which will allow you to bring your own thing there's Several others out there we'll probably do a whole show on on these cli agents themselves but the idea is oh and warp warp my favorite terminal has like totally pivoted their business Yeah into being like a coding tool um via the terminal which is like i had a call with them like a couple months ago he's like i really think that like the terminal is the ui for for building Software and i was like really and then like here we are a couple months later everybody's going bananas over terminal UI. So it's kind of interesting. Scott Tolinski I still, as much as I use Cloud Code, I still don't buy it as being the best way to work compared to the IDE approach. Wes Bos Yeah, I agree. And I think that they are different approaches. So the idea with something like Cloud Code is you type into the box, hey, build X, Y, and Z. And it will make a plan and it will go off and do that thing. And I think the idea with those is that you're not necessarily just sitting there waiting for it to complete. You're firing off three or four of them. They all work in parallel. But for times when you do want to sit there and do it, I don't like that interface at all. If I hit the wrong key, the whole thing quit. Granted, the quality, I think the quality of Cloud Code is significantly better. I think that's why a lot of people like it. And you can also build CloudCode into other tooling because at the end of the day, it's just an NPM script that you can go ahead and run. But quite honestly, I much prefer the IDE experience where you have a full-blown GUI and you can click on things, you can roll things back, you can accept things. And I know, Cloud Code, you can do these things, you can open it up in an editor, you can view the desk, but it's not as good. ([Time 0:08:05](https://share.snipd.com/snip/515f829e-c1d3-4d72-9dea-cab5ba8229a1)) - **MCP Servers Enhance AI Context** - MCP servers extend AI capabilities by injecting context like up-to-date documentation into prompts. - This approach improves AI relevance compared to limited built-in documentation features. Transcript: Wes Bos This one's not necessarily direct, but the idea with the MCP server is that they are kind of just like plugins for your AI, and they will allow you to bring more context, more tools to the AI agent. So a big one that I found out about a couple weeks ago was Context 7. This one will give you the ability to inject the documentation for different libraries into your actual prompt. And you don't have to do it yourself. You just say, go read the docs for Tailwind 4 or Svelte 5, and then it will go off, download the docs, stick that into the prompt for you. I honestly quite like that a lot better than the cursor built-in documentation. I've never felt that the cursor built in documentation worked very well. I'm not sure if you have thoughts on that. Scott Tolinski It's obnoxious because in so folks who don't know newbies, skeptics, anybody in cursor, the editor in the settings, you can attach docs and to like a keyword essentially like Svelte Five docs, and you're pasting in either a link to the docs page or the llms.txt file, which we'll talk about. And with that, you are able to access the up-to documentation and reference it. However, with Cursor, you like frequently have to do at the docs in like every message. At least I have found to get specific syntax, I'm always having to reference constantly those docs to say, no, please, for real, actually use these docs these times. I'm begging you, I've given you the docs. You have the docs. You can look at them. You've indexed them. Just use them, please. ([Time 0:11:16](https://share.snipd.com/snip/58c1aa48-b41c-4d24-841a-2cfa6f3d5aa9)) - **Use Embeddings and RAG for Custom AI** - Use embeddings and Retrieval Augmented Generation (RAG) to give AI custom knowledge. - Embed your data and query relevant parts to supply context for accurate AI responses. Transcript: Wes Bos Let's talk about embeddings and RAG. So this is something you'll hear quite a bit about. So when you want to prompt a model with custom information, a lot of people think that you would train a model on something. Like let's say, for example, we have almost a thousand syntax episodes and you want to ask it a question about a specific, in what episode did Scott do X, Y, and Z? Or what are Scott's thoughts on Svelte 5? The AI model doesn't know about Scott's thoughts on Svelte 5. Actually, it does know quite a bit now. Scott Tolinski Well, it will also confidently know about it, even if it doesn't. It will just give you hallucinations about it. Wes Bos Yes. No, but what needs to happen is if you have custom data that the AI model is not trained on, you have to then provide that data as part of the prompt. And we can't take the transcript of a thousand episodes and stuff that into the prompt and then ask it what you want. So what you need to do is you need to basically search your data and then find the pieces of data that make sense. And then you give it to the AMI. I'll say, given the following context, please answer the question, what does Scott think about Svelte 5? And then you might give three or four different pieces of the transcript. And in order to find which of those pieces of the transcripts you need to provide to the prompt, you need to first convert your data to embeddings. And text can be converted into embeddings, which is essentially just like a large vector array of data. And then you can find items that are closer to it. So what you would do is you would convert your question to an embedding. That will return this array of numbers. And then maybe you convert each of your episode transcripts into embeddings, or you convert like three or four sentences at once into embeddings. You can get pretty complex with it. But essentially what you do is you say, I'm searching for this. These are the things that are, these are like the pieces of the transcript that are close enough to it. Then you can take those three or four and then provide it to the prompt and get your answer. And the same thing works with images as well. That's how Google similar images work. So you might take an image, convert it to an embedding, and then you take every other image in the world and convert those to embeddings. And if images have similar items inside of it, the embeddings might be close. Or if they're similar colors, they might be close to them as well. And that is a really nice way to add additional context to that problem. That's called RAG, Retrieval Augmented Generation. ([Time 0:28:14](https://share.snipd.com/snip/6e0480ec-7576-48e2-b92a-b264109203d7)) - **Start with Basic AI SDKs** - Learn AI app building with libraries like Langchain to chain AI tasks. - Start simple with versatile kits like OpenAI SDK before adding complexity. Transcript: Scott Tolinski Have you used Langchain in the past there scott it's been about a year for me i haven't used it uh especially since well i've used it in the past but i have not used it since their website Wes Bos Has undergone a major glow up i guess you could say it's very corporate looking now so lang chain allows you to chain together uh different ai stuff so you're able to like like ingest a Whole bunch of documents and then send them off to one thing. So you end up just clicking together a lot of these things when you're building an AI application. And Langchain is a toolkit for doing that as well. I haven't found my... There's a JavaScript version and a Python version, which is really nice, but I haven't found myself needing that in quite a while when I feel like I can get away with just using the previous Libraries we talked about. Scott Tolinski That's what I'm saying too, yeah. And there's ([Time 0:39:41](https://share.snipd.com/snip/3ff003d0-8227-461b-a540-ce39757b22a7)) - **Run AI Locally with Transformers.js** - Try running AI models locally with Transformers.js to avoid cloud costs and latency. - Use local AI for specialized tasks like image processing or text analysis. Transcript: Wes Bos Or I've done it in the past where you can try to filter out bad messages from people. There's toxicity detection in there. The whole AI world is so deep on very specific models that are for specific tasks. And it's absolutely nuts how deep all of this goes. So certainly check out. I'm such a huge fan of Transformers.js. I've built so many things with it. Even just like smile detection. If we wanted to feed it, I built something that it took, I don't know, 6,000 screenshots from an image and fed it through it and tried to figure out which one had the largest smile in or which One had the most scared face in and filter it on. 3,000 images off. And that would be extremely slow as well to have to upload 3,000 high resolution screenshots to an external service. ([Time 0:42:48](https://share.snipd.com/snip/2b9f6bf4-ff10-431c-95ed-fe6d441da48e)) - **Explore AI Coding Fearlessly** - Embrace exploration and experimentation when learning AI coding. - Use scratch projects to test ideas and discard what doesn’t work without fear. Transcript: Scott Tolinski So I guess that leads us to some process things we've mentioned throughout this episode. But I think one of the biggest things that I can suggest to people is to explore. We mentioned that there's all these like fun and interesting things. I do think that if you're the type of person sitting on the sidelines and saying, I don't need that stuff. I think you need to explore your curiosity a little bit, because we are all about making cool things. We're about exploring technology. We're about building things. And like, if you leave the word AI out of it, and I were to tell you as a developer that you could build something that detected a smile and took a screenshot when there was a smile, or I could Build something that, you know, did this or that really fascinating thing like generated in an image or something like that if you leave the entire big ai uh scary cloud out of it for some People just call it machine learning it sounds so much more scientific and sick is that not exciting that is exciting that you can build that kind of stuff and and like yeah you would have Told me five years ago 10 years ago that i'd be able to build some of this stuff or do some of this stuff. I would have been like, that is incredible. There's so many neat things I want to do with these ideas. So explore. Don't be afraid to go out there. Explore. If it breaks, if it doesn't work, toss it out. I have a directory on my computer called temp inside of my sites folder. It is used for a scratch pad websites. I throw up together demos. Some of them work. Some of them don't. The cool thing about my temp folder is it automatically deletes itself. So because of that, like I can just toss stuff in there. And if I ever actually like the process that's happening, I can move it into a real project or whatever. Otherwise, it's just scratch. It's just exploration. And ([Time 0:44:12](https://share.snipd.com/snip/4d003c59-72b6-40e6-a344-3e2dd52d7bfa))