YouTube Deep SummaryYouTube Deep Summary

Star Extract content that makes a tangible impact on your life

Video thumbnail

Vibe Coding Session - Building RevROI as an MCP Server

Nick Spisak • 75:20 minutes • YouTube

📝 Transcript (1460 entries):

All right. So, we're going to go ahead here and in this video, this is just going to be raw. We're just going to go ahead and vibe code um what is known as Rev ROI. So Rev ROI is actually a pretty slick little extension uh that Chris Granton company put together for being able to find deals, right? And being able to do it in a way where we're actually able to see a couple different things of data, right? So we can see cashback, gift cards, and settings. So, we're actually going to go ahead here and and see if we can put together um a what is known as an MCP server or model context protocol. And essentially what model context protocol is all about is you can take things like claude here for example and I can give it different tools. So those tools just make your AI editors that much smarter. Uh think of it kind of like a USB a USB port, right? A USBC port. It's universal. It allows you to connect all sorts of different devices to your MacBook Pro and and be able to to work more efficiently. Same kind of thing with MCP servers, right? I can go ahead and I can have, you know, a calculator. I can have a fetch server that goes out to different websites. I can go ahead and use it for being able to source profitable inventory. So this is essentially what we're going to do is we're going to start the process and it's going to be very raw of just train the thought of how do I take Rev ROI which is a Chrome extension and be able to convert it into something that we can use into one of these AI editors to just to be able to help ourselves out. So that'll be the scope of this session that we're going to go through. All right. So here's what we're going to go ahead and do. We're going to go and the first thing we need to do with Rev ROI is we're going to need to grab some data from the extension. So, when we pull up the extension itself, we're going to do a right click on this and we're going to do an inspect. And what that's going to allow us to do is we can then type in any website. Let's just do a search for Kohl's for example. And if I go to the network tab, when we do that search, I should see an action here. Perfect. So now I have an actual URL that we can use. So this is actually the request that it's making a call for cashback. So I'm going to assume so we're going to make a note of this, right? So this is one of our endpoints. We're going to call this cashback. Cashback is going to be here. So we're actually going to go through and we're going to generalize this a little bit. We're going to say, let's do cashback and we're going to give it an example. And that's going to be what we're going to put in here. And then we're also going to give it an endpoint. So the only thing we're going to do differently is we're just going to say instead of host name, we're going to call this the retailer. All right. So we'll add that in. And all I'm doing here is just taking raw notes. This will make sense here in a minute. So the beginning part is just a lot of doing information gathering. So what I'm putting here is I have on my editor. My editor is known as cursor. So it allows us to be able to run AI make different things and it's basically like the Swiss army knife of AI tools for software development. But you don't have to be a software developer to take advantage of this, right? you can be a non-developer and still be able to interact with these tools. And this will start to make more sense as we go through. So, all right. So, now we have an endpoint that we can use. Um, and that's going to go ahead and say, okay, that's we've put the retail in there and we're going to use cashback. Um, let's actually look at an example of if we pull the inspect back up. If we look at the response body for this, I should be able to do grab this. So, this is actually going to give us all of the relevant details that I found for the cashback. So, we'll keep that as a response example. So, we'll say cashback request and then we're going to do a cashback response. And this is going to come back in the form of JSON. JSON's just javascript object notation. So it's a standardized format for the web. So think of it like everyone communicates in different languages and in speech, but there's certain hand motions or things that you do that regardless of the language that you speak, it's common. It's universal communication. Think of that as one way of what JSON kind of serves as. So we're just going to put an example here. And all this is is this is the actual data from the different sites of the different cashback that I found. So we're giving information to our AI or creating building the the information database. That way we can provide later which are going to be these files these PRD or project requirement documents. We're going to be building a very thorough document out that when the AI is prompting it now it's going to be able to build step by step. Okay, so we have an example for cashback. We're going to do an example for gift cards next. So, we will do the same search, run our inspection, and let's see if we can I'm going to clear the clear it out and rerun it and see if we can find Okay, so that's the cashback. I want gift cards. Give me something for gift cards. Some of this is uh Okay. Yeah. All right. Perfect. So, gift cards is the same thing. All right. Great. So, what we're going to do here is now we can rinse and repeat the same process. So, that's a cashback. Just for the sake of being lazy, I'm going to put gift cards request. All right. And whoops, that's the response. Uh let's do this and do one two three gift cards response. This will also be JSON. And we're just going to post that in just so we have a response example. Okay. And let's do our request. So if we pull this back over, we can see that it's it's following the same format on these which is good. That's very common development pattern. So we will go ahead and say this is our example and we will do one more. And this doesn't have to be perfect, right? The first iteration of this is notes. The beauty of this is we can prompt it to put it into proper formatting after. So we're just going to call this retailer here again. So now we have two of the main items. just to be thorough. Pull this back over. We'll clear it out. And let's do one. Okay, there's the two main ones. So, we're just going to do cash back and gift cards. I think that's that's a good starting point for this. Okay, so now we have what we need. And basically what we're doing is we're going to be reproducing the output that's in the Chrome extension, but now we're going to make it so that way it's enabled for AI. Okay, so we have these two items. Now, the next piece of setup, right, is we're going to leverage uh cloud code for this. So, I'll show you how I how I set this up, right? So, cloud code is essentially the claw browser, which we have the desktop browser, but it's in a terminal format. And a terminal is just a fancy way of saying we're able to basically get straight to the roots of how to start doing some of these builds. And you can do this a couple different ways, but I'm going to choose to run cloud code in here. All right. So, I'm going to go ahead and anytime there's a new project, you're going to run in it, which just installs the underlying files and systems that Cloud Code will need. And basically what this will do is it's going to create a memory bank. So, it's going to learn about the project. And as as you get better at prompting and as you get more familiar with the these principles, it'll start to make a lot more sense. So what we did in this folder for Rev ROI MCP is we just created a blank file for what's known as an open API file. So this is the actual API calls which we're actually seeing here. This is the underlying code that's running that's having that extension to return the data for it. So we're going to create a a specification file of those two endpoints and that's going to be our main input to generate the MCP that we use in cloud. Okay. So cloud code has analyzed our codebase and it's going to go through and it's going to learn a little bit about it. It's going to ask us for permission to run some listings of the files to just get a little bit more. Since it's just a listing, we'll give it permission to use it for the session. One reason I really like cloud code is it will ask for these. So, it's going to give us a it'll give ask for permission. Then it stores any of our responses in a settings file. And those settings files become incredibly relevant. So, that way you know, okay, well, what did I give it permission to? All right. Well, I gave it permission to run listing commands within uh the terminal here or bash terminal and it's going to maintain that as it goes. Okay. So, this will continue to do its thing. Um, what we're going to do here in the meantime is let's see, let's go ahead and take a look at another cloud session just so we can get familiar with what it does so we can find uh we're still in the run running setup stage. So, we'll wait here for a second. So, we'll do an exit. Okay, so it wants to create cloud.md. Yes, I'm going to give it permission. So, it's just did a full recap of what it learned about this project, what the endpoints were that we just created, and we're going to go ahead and give it permission. Yes. All right. This will write it. So now we will have a new file called cloud MD, which is think of it as its brain or its memory bank. All right. The file will help claude instance understand the project and the purpose of the scope. Perfect. Okay. So now what we can do, let me do an exit here on this one because I think we can only have one instance running at a time. So I'm actually going to do Okay, it's it is connected. Let's see here. All right, so we'll run an exit. We're going to open up a new session. And anytime you do a new session, okay, we are connected. Perfect. Um, what's new? Fixed some items. Okay, great. So let's do a status just make sure we're good. All right. Excellent. All right. So, now let's go ahead and get started here. All right. So, I'm going to go ahead and tell it to what we want to do. So, this is where we can build some more sophisticated prompts. Um, so I'm going to go ahead here and in our PRD, I'm going to actually say I'm going to give it some context. So, I'm going to give it an overview. And now what we're going to do, so we're going to do overview. I'm actually going to use a software suite here called Whisper Flow. And it's going to allow me to be able, let me do it like this. And then overview. It's going to allow me to be able to just talk and it'll start typing. So I'd like you to be a senior software engineer and architect. Your primary responsibility will be assisting a client to be able to take to build a open API spec that we will later be able to convert into an MCP server model context protocol. All right. So that's the objective. Now we're going to give it or that's the overview. We're going to give it an objective. Your first objective will be to look at this particular file and convert it into a fully compliant project requirement document that will be leveraged with engineering detail for task level breakdown for engineering assignment. Okay, so that's one objective. Second objective is going to be um your second objective will be to construct a fully compliant open API specification in YAML format. Your third objective is going to be to convert the open API specification into the necessary code in JavaScript and TypeScript to be able to convert it into an MCP server. have an API specification into I'm just going to say code in JavaScript to convert it into an MCP server. Okay. And here we have let's give this we're actually going to call this context and then we will give it that. So these will be the context files. Now, what we could do additionally, I'm not going to do it for this one, um, is we could actually do our full prompt. So, I actually use another tool called Text Blaze. Allows me to use templates for any type of, um, prompts I use regularly. Maybe it doesn't work in this. It does work in in um um when it's in in chat GPT. So, it looks like it doesn't work in the cursor prompt, but I could put prompt and it would actually put that in there. Maybe it'll work in terminal. Let me see. No. Okay. So, it's not picking that up. All right. But it does work in browsers for those. Okay. So, now we have a loose template. We gave an overview. We gave it an objective. Um, let's call this actually goals context. All right. And then at the bottom, we're going to do our outcomes. call it objectives and outcomes. We'll keep this light to start. We'll say success looks like being able to take this existing file, converting it into a markdown file that's fully rendered into a task level breakdown of a project requirement spec. Okay, perfect. All right. Um, I think that's good enough to get us started. So, we'll save this file. And what we're going to do is we're actually going to go ahead. I I would generally do this through two and open up uh Google AI Studio and run it through, in this case, one of the Gemini 2.5 models at time of recording. But whatever if if you're looking listening and viewing this in the future, you could use uh whatever the best model at the time. Claude's still going to be great for this. So, we're going to say I'm going to give it the PRD file. So, let's docs and let's actually we could probably Yeah. So, we'll do PRD. All right. Please review the existing PRD draft file. Actually, I could probably type this or I could probably just say this. Once you have the file in your context, please write it as an output file in the docs directory called prd-final.md, which should be a fully compliant project requirement document for engineering. Please note, we are not doing the engineering. We just want to do the planning of this exercise. Please ultra think about this and then do your output. Okay, perfect. So, while this is going, a couple things we said in there. So, we used the keyword ultrathink. Ultraink is super important. Um, the reason that we want to use ultrathink is from an anthropic perspective, which is the parent company of Claude. Um, they actually talk about this where they'll actually use keywords for hard, ultra hard, um, or think hard, think harder, and think ultra hard for that. So, um, kind of on the spot on this one. Let's see. Uh, ultra hard. So, if that comes through, I think it's this article here. I could actually use OpenAI as well to be able to find this, which is what I would normally do for that. Um, but there should be something in here around ultra hard or hard. Okay, kind of going on there, but there is an article that we could run to be able to grab that. But the idea there is those keywords matter. Um, so you're going to see that this review task is going to take um, arguably significantly longer because it's going to go through and it's going to actually look for some of the different um, it's going to go through and it's going to take its time to be able to do some of this thorough research. So, what we can do while we're waiting is let's do let's actually build out for Google AI Studio. We could do a similar one and have it compare the results. Be an interesting little task here. So, let's see. Um, pull this over while we do that. And I'm going to give it its own role. I'd like you to be a senior product manager for a very large SAS company. Your primary job is going to be the best in the industry at writing project requirement documents. The documents should be to a level of detail with task level breakdown. Okay. So then I can then say objective. Please review the draft PRD file that will be pasted below and rewrite it and update it using grounding with Google search for anything where you are unsure of the best practices or way to implement this solution. Okay. And then we're going to put under this we're going to give it the PRD draft. Okay. So on the PRD draft, we can then go through. We're actually going to take the file itself. So we have a fully baked item here. Uh yes, I want to write it and I don't want them to ask me again. Just write the file. Okay, perfect. So now we have an executive summary. So see how as long as we just give it the context. Now we can do several iterations of this. So we have pro provides an a unified API experience. Okay, great. Um, excellent. The vision, the goals, success criteria. Okay, that's fine. Functional requirements. Perfect. It shows the different formats that we have. Um, retailer identifiers. Okay. Uh, let's see. Response specification. Good deal. Business logic. All right. This is pretty way more thorough than what I originally had. Here we go. API standards opa the open API specification. It grabbed our languages. Beautiful. All right. Testing frameworks. Excellent. Compliant. All right. So, this is pretty good, right? So now I can take this and at the same time I can drop that draft over here. And let's just make sure we give it a output format so it knows. Please make sure to create the PRD file as markdown. Render it as markdown. So I'll have to tweak that a little bit. Right. I'll just say P file as markdown. Right. Okay. Perfect. Actually, I want to stop this. I just made a mistake. I want to ground it. Oops. So let's do grab the whole thing again and I'm going to ground it with Google search which is going to give it the ability to leverage that for best practices and we'll let that kick off and do its thing. So it's going to do a revision of it. Um, okay. See here. All right. So that's going to take a little bit of time here. So now we can go ahead. Let's just organize our project here. Um, what can we do in the meantime? We can set up a Git repository. So, GitHub, I'm going to create a new repository. We're going to call it Rev ROI MCP. Okay. We will make this one public and we'll create the repo. Okay. And couple things we can do. All right. So we'll do get a net get dot which is going to put everything in the directory. Get commit-m message commit. So we're putting this into version control. So we have it. We will set the branch details. Okay, check the status and we are in business. So now there should be a repository that is now out on GitHub. So we have that. All right. All right. So if we pull over AI Studio, it's still doing its thing over here. Um, so we should have an answer to this one very shortly. And the next step that we're going to do is let's set up let's set up our task breakdowns here for each of these. So I don't think we need to do the folders because we'll just let it set itself up. All right, it's almost done. Let's see what the prompts look like here. Maintenance and support. So, this thing is very thorough, project requirements, some of the goals. Okay, excellent. End points. See what some of the t See, they want me to do a lot more than I want for this one. This would be really good for a full production, but we're not going to need this for for this particular use case. Okay, so this is pretty good here. So, let's do um we'll move this over. Created it. Perfect. Okay, so now we're just going to prompt it. All right, perfect. Now that we have the full plan [Music] inpdfinal, please fully review it and let's start the engineering work. Before you do, what tasks are you planning to execute? Because what we want to do a couple best practices with some of these items. You want to separate your prompt out to give them planning tasks and then check it with what's known as human in the loop. So you want to check the responses that come through and then you'll do engineering task by then saying okay now you're an engineer go ahead and and implement this. So this is good right? So we have now to-dos it's going to create the specification with the structures define gift card endpoints define the cashback add error response definitions. Okay perfect. So it looks like it's already kicking that off. Docs open. So it's streaming the input. Okay. So it's going to start doing its thing. I generally like to to stop it completely at planning and but and have those two distinct steps just to make sure. In this case, it was pretty much exactly what I wanted to do anyway. So I'm just going to let it keep doing its thing. Um as you go through some of these items, want to keep in mind there's different types of plans with Claude um that we're using Claude code. You can stream it on a per cost basis with the API tokens or application programming interface or you can use at time of recording. Uh you can use the max tiers. They come in two different ones. There's a $100 a month plan and there's a $200 a month plan and it's just the amount of consumption that you can use. Um basically as much as up to the point with what your threshold is. The cheat code with that is basically once you use it up, it resets every five hours. So if you know you're going to be away for a period of time, it starts from the first time that you use it. So you want to make sure your coding sessions you're maximizing them and then if when you find a nice logical break or you want to or you're going to be going to do something else or you're going to eat or whatever it may be set up your your slot so that way you know you can maximize the full scope of in this case the opus model followed by u the sonnet model. It will use opus is a more complex model um so those credits will use up faster and then sonnet is a faster model on those. Now, what you'll see on some of these things is it under the covers, it's doing a series of agents calls or tool calls. So, if u if something errors out, it'll go ahead and try to retry on the files that they were. All right. So, if we do let's see if it's done anything yet. Nothing yet that has been written to new files. Still doing its its thought process here for each of them. Now what we'll end up using once we have the open API specification is there's a tool that we can use to convert a spec file. So, Swagger open API specification. We'll end up producing this and then it's going to generate us the output um which is going to be super awesome because it's going to fasttrack us to be able to get our our minimal viable product of the MCP server um coded out so we can take it through for an end to end test to test it out. All right. So, let's see here. We're still waiting on this to to go through. Couple other ways that we could go about implementing this. We're using cloud code right now. I'm going to move this over so you kind of see it. But you can also subscribe to cursor and uh what cursor allow you to do if we pull that menu out is it also has different types of agent modes you can use, the different models um thresholds there. And this is just a fantastic editor all in all. um being a developer I generally like the terminal based experiences but using cursor and being able to um have this experience there as well is great. So one thing you'll notice as you kind of go through this journey with these AI tools is use the right one for the job and in some cases there's multiple that could do the job as well. So let's see here. All right. So it started the basic structure. Um let's see what has it done. So it be okay. Did it create the spec yet? It did. Excellent. So, let's take a peek here. So, we got a support page. It's giving us a license. I like its version it chose. Provides unified API interface for discounted gift cards and cash back. Excellent. Um, all right. We can see which end points are there. That's good. Get offers schema definitions. Okay, cool. So, we can view this real quick. So to be able to do that, we can use what is known as the swagger editor and swagger editor allows to quickly see that. Okay, let me just grab a file here. Okay, I didn't like it at the component level. Interesting. Okay, which component? But you can uh There we go. Did I fix it for what is it saying here? Duplicate mapping. Why is it picking up on Keepa? Do we have anything in there for Keepa? Is it just a stale session? Um let's try it again with an incognito window. All right. So, let's do swagger editor. Okay. So, 419. Okay. So, it doesn't like duplicate key mapping. All right. Well, we're going to take this error And let's go back over here and say, okay, great, but we got an error on the open API. So, you want to give context to the files so that way it knows what to work on. Here's the error that we received. And we'll paste it in. So, now it's going to go through and it's going to start thinking about it, right? So all I did there is I used the at symbol and that allowed me to be able to see the context of the project that we're working in. So it adds it into its context window as notice that hey this is the primary f file that's there. All right. So it did make a change. Okay, great. So let's go through and grab it again and let's pull up a swagger window. Oh, yeah. Yeah. All these goodies. Okay. So, let's remove it. Let it think. Drop it in. Beautiful. All right. So, now we have a fully compliant. Uh, let's see here. Let's open these up. Uh mostly why does it not have endpoints for only has a get endpoint. So endpoints for different see doesn't feel right there. Uh let me give it do a screenshot actually. So if we do a screenshot of this, that's a cool feature we can try. All right. So I noticed there are no end points in the open API specification for gift cards and cash back. And there is only a default slashend point. Please see the attached screenshot as an example. Oops. Let me stop it. And to paste control. There we go. Okay. So, we'll let this do its thing. Okay. So, it's thinking right now. While we're waiting on that, let's see if we could try to figure it out ourselves while it's doing its thing. What did we miss there? Those are get offers. Okay. change the different schemas on these. Okay, we successfully restructured a gift cards. Okay, that's more in line. Let's see what this looks like. Close it and reopen the file. Let's just see status. Okay, we do have a change there. Let's try closing this out. Reopening it. Okay. Excellent. That's more in line with what we want. Okay. Awesome. All right. Now, now that we have fully compliant, we're going to commit that um created open API spec. So, we'll commit that. All right. So, we have those files there. Um, now let's do I don't want guess there technically isn't anything crazy in there. Let's do a doc ignore just files to to not look through. Let's do I don't need that to be in there necessarily. Okay. So, now we have that. So, here's here's where the magic kind of comes into play. So, what we can do next is I'm actually just going to copy this to I'm going to copy um just because it's just easier for me to to put this in. I'm going to copy the open API spec to my downloads folder. And then we're going to head over here and we're going to do a browse. Okay, hit open on that and we are going to generate. Great. So now we have the core code. So can I just make this core code a main.ts? Okay, so a main.ts file. I probably have to actually build it. Okay, let's do this. Um, okay, great. Um, what's next on the docket? Um, attached below is the TypeScript output to converting the open API the doc. So it has context based on what we learn, right? Uh docs open API spec into a type script file for the FCP. Oh Hold on. Um let's paste the content in. There we go. Now, what I was thinking about doing there is I was going to just create the actual TypeScript project, but I'm going to let staying in line with what we want to do here, right? We're moving out of the direction of being a developer and we're facilitating that role of being the technical leader that's driving the conversation, allowing the AI to do what it needs. So, we're going to give it permission to create files. So, it's going to create the file structure. It's going to initialize our text stack which will be node and package JSON and any required dependencies that it needs. And ironically, if we would have looked over here, we would see instructions on how to do this, right? So, I could actually instruct it by giving it this context. I'm going to add this so that way it has it once it gets done here. Let's see. So, it's writing the files. All right. Implement and generate the code. So, source index. So, it's not even going to use main, which is perfectly fine. I'm just going to delete that since we'll let it do its thing. And I'm going to give it a docs folder. And I'm going to call this call this spec tomcp markdown. And we're going to say um I'm going to call this background information to convert open API specification specs to MCP servers. Right. And then we're going to call this documentation. And I'm sure anybody that's really good with this stuff is going to say, "Hey, Nick, you could have done this a million different ways, but this is just going to be how we're going to do do this on the spot." Because what'll happen then is once this finishes now I can pass that docs folder that specs to MCP just like like we've been doing I don't have to write the prompt out. I can just drop it in there. So anytime you have an opportunity to do your planning you're going to spend the majority of the time doing your planning and the coding effort you're outsourcing to your your AI assistant. So and that's kind of where this is going, right? I've been asked a few times around, hey, like, okay, well, you're a developer. Is AI is going to come and you're going to lose your job? Well, yes, the development of writing the actual lines of code are going to are going to be outsourced um to an AI an AI capability. But at the end of the day, the systems mindset is the biggest thing for this. So now I can apply that systems mindset and in this use case, right, we're looking for great deals on the internet. Like that's ultimately what this is for. It's not necessary to write the code. It's, hey, how do I find better deals? So, this is just a way for to be able to make that a more efficient process to automate things that normally we would be doing manually. All right. So, it looks like it's doing an update to a readme file next. So, create the readme, install the required dependencies. Excellent. So, we'll see how this how this ends up going and we will go from there. Ultimately, what we'll do is we'll try to build this as a package that we can deploy out so you can install it yourselves. I'm curious to see what it put together here so far. So, we have index file, some types. Okay. Sure. Continue on. So it read that it already it should have already discovered that we already had the get ignore. It's updating it. Okay, great. So now we have a way better file for that. Um let's do Okay, great. So we'll get the dependencies installed. And then what I want to do after this is just have it review it against the specta MCP documentation we had. Another way we could have done that too is we could have installed use um claude MCP which will error out and say oh I want to do an add to desktop. So I can do claude MCP and then it should prompt me for which ones I want to add. So let's do I don't want to do keep on this one. I don't want to do N8N. Um I don't need Taskmaster right now but context 7 is great for documentation. So we can click on that. So now our local configuration will have MCP servers configured that have type of settings files are here. Okay. All right. Perfect. All right. So complete the installation. So now it gave me an output. Right. I successfully implemented the work blah blah blah created the project set the package implemented four tools right. So I can get really I care about two of them. Getting the gift card rates and getting the cash back rates data. That's fine. Okay. So I have a little bit of work to do here. I need to run. Let's see if this works. npmi actually before I do that let's actually ask it. So before because we want a module. So before we do the installation steps, please review the spec file and see if there are any other changes we should make. Please think hard about this. I'm giving it just a little bit of extra on there. Um, a little extra horsepower with the think hard just because ideally I should have did that from the beginning, right? Hindsight's 2020. I should have followed the instruction and did a um npm and nit and set set it as a as a module type first. So, which is what we're showing in this file here. So, I'm going to see if Claude's able to pick that up, look at the docs, and say, "Oh, by the way, all right, you're an idiot. You should have did this ahead of time." Yeah. So, add tsx dependency for direct. Um, so what this is do the TypeScript exec executable file. So, this will allow us to actually run it as a package. So, that way we can actually deploy this out. So, you don't need to know all this. You just need to install it. Um, okay. It's going to create a main, which is what I thought. Okay. Uh let's see here. Create main and root as entry point. This will be interesting to see how it does that. Okay. Just importing it. That works. All right. While this is doing its thing, there's a couple steps we can take here. So, we're going to go into Claude and we can start prepping for our actual setup. The whole reason we did this, right? So, in Claude, what you're going to do is you're going to cla in settings, there's going to be a developer panel. We're going to click edit config. And this is where we can actually load in the various MCP servers or the tools, right? We talked about the it's the it's the USB port, right? It's the way that we connect all of these things together. Um, so AI can can make it even more useful. So, we'll hit edit config and we're going to open it in our cursor file here. And what we're going to do is I'm going to take this off the screen for a second. And we're going to uh let's do this. Take play right and make sure there isn't anything in here I need to worry about. All right. All right. So, we pull this back over now. All right. So, we're going to add our tool in here. So, based on the example, we should We're gonna call this what? Rev ROI. Let's see. Let's call this Rev ROI. Rev ROI. And the docs on Claude are really good about just explain how to do this. So, it's going to be an NPX package path full path to the repo. So, we are in what? PWD projects folder. So, by the time you have this, we're doing this live, right? We'll probably have this on a package manager index. So all you'd have to do is something like this with some of these other ones that have been published. And we will save it. And if we did it right, we should then be able to close Claude. And this is the drum roll because you have to close it anytime you change it. And then we find out did we break it or not. Let's find out. Okay. ROI server disconnected. [Music] Interesting. Okay. All right. So, we do need to do some troubleshooting on this. And then if we look at the log, let's see. Rev ROI log. Look at the log file for this. Why did it fail? Oh, because we didn't install it yet. Okay, so we had we do actually do need to do the setup first. All right. Um, so that probably be resolved if I just read. All right, npm install. npm install or npmi would have worked. Okay, because in here there's probably a whole bunch of dependencies that we did not install yet. Okay, let's find out if we did it right. Let's try doing the same thing. So, we're going to close Quad. We are going to reopen it. Drum roll. Still broken. Open MP settings. Let's see. [Music] Okay. What is different? Looks like it would try to connect. Exiting early. If you're developing the server, you can add output to standard out. Okay. Well, how about we just do this? Why don't we just add the log into here? Was there anything else I needed to do? Clone CD into it. Install it. Better user experience. Users can now run the server by just using Oh, interesting. So, what happens if I do [Music] npxts main? All right. I get the same error. So I'm going to do this then copy this. I'm going to say getting the following error when attempting to run the MCP server. So, do we need probably miss an install? Okay. So, this is the beauty of it. So, basically what this is doing, it's doing some listings. It's trying to get some different information about the project and then based off of that uh we got a connection. So sometimes when you get these connection errors, just say please continue. Let it keep doing its thing. All right, let's see. changing some of the code. I don't really know why I did that. It's just a different naming convention. Beauty of this if we weren't streaming this is a great time where you get a drink get a coffee and go from there. All right. Grab server. Sure. You can run grab commands. I do like to check them as it goes. Um I don't like to give it uh remove access to files. I still prefer to be able to review them. So there's certain commands that when they run, you're like, I don't know if I want to give you god rights to be able to do whatever you want to it. But others, you know, any of those read files or things like that, it doesn't matter. Let's see if we had there error. Couldn't find the module. Starting server. Yeah, go ahead. So, it's running a it's going to run it. I'm curious since it fixed it. Did it change anything on this side yet? In theory, it already wrote the code changes. We would know. Go ahead. Do your thing. Yeah, you can do some research. Okay, so that's awesome. So, it's actually going out and learning all about the SDK. This is why planning is so important. So, if I spent a little bit more time on the initial part, we probably would have got this right right from the first shot. But this is a good learning exercise of being able to see where the messups were. And you do learn by just reading some of these logs as you go through. So fetch is one of the MCP servers that we have access to. So if we ran claude down here in the other terminal did MCP, we should see that we actually have the fetch command. So the fetch command is is an MCP server in itself and that's how it's able to discover what's there. So okay using the wrong API. The SCK uses a simpler tool method. Okay great. So it was able to to go out and learn about the documentation. NPMTSX full path to the main is the main setup, right? It's just an import. Probably could just take this whole file, too, just to make it cleaner, but I guess it said it does have some of the extra imports. We'll leave it alone. And what will happen here as you kind of get going there's going to be compacting. So in claw every every large language model has a context window. So at time of recording I believe it's 200,000 tokens is the context window where some of the Gemini models by Google are a million. So it just kind of depends on there. But once it gets to its close to its context limit, it's going to do an autoco compact. And basically what it does is it summarizes all the work you did. Um, and it will set that as the first system prompt to continue on. So it's a clever way to be able to maximize the same session. Generally, what you do want to do is just keep updating your claw.md for the case of cloud code because that's the that's really the brain of this. And then just create a new session. So if you have clean sessions as you kind of write through each feature that you write, um it it allows it to continue to, you know, stay as current as possible. This over here Got a little bit of downtime here. Do want to get this working end to end. We're very close. So, we're waiting on this. Let's look at some of the index code. I want to kind of learn a little bit like since we did vibe code, I didn't do the normal peer reviews that we would usually go through. Versioning, this is probably where it's complaining. So these are the actual tools themselves. Get servers is just like, hey, is it a local or is it production? We probably don't need that. I could eventually just remove that one. Same with setting the base URL. This is this is really the meat of it, right? the get gift cards required input as the retailer and then when we do let's look at uh get cash back if I do a find on that. Yeah, here's the case statement. So, it's not even really that crazy, right? It just shows the type of call that it's making. Retailer not found. the parts in the video where you just cut it out and go straight to Hey, look, it works. gives a view of what it's like to be a developer here in the new age of coding. We're downtime to think about what the next plan is or to create new specification files for additional features is usually what we'll do with that because you can run these in parallel, right? Up until where you where you use all of your available subscription amounts. didn't even ask it to think extra hard. So, I guess it learned a lot from the documentation here when it fetched it. I suspect there's going to be a lot of rewrite on that when it gets through. I wonder in the time that we do this if I could create another folder and spit it out and test it. Let's see. That would be something. Okay. So, let's do this as a test since we still have the original um original doc. If we go back and we do let's do make a directory. We'll call it revi mcp new cd into into that. Um, and let's create a new cursor window. So, we'll just keep an eye on both of these at the same time. If I create a new folder, let me call it docs. Inside docs, we do open api.l. And we could probably just even do let's just follow the exact steps, right? So, npm in it and npm package set type equals module. Let's try this one. Um, I'm going to call it Rev ROI MCP again version one server for the Rev ROI. Um, Chrome extension real original um, index want to do index.js. I think I want to make it I want to call it main.ts. No test command, no get repo, no keywords, no author, no sure. There's our package JSON. And let's copy the [Music] code and main.ts. Paste it in. So if I do npmi npm install, let's install just the and then we could probably go back soon and check on our other one. Okay, close that. Close that with that. Okay. Now, can I just do Let me change my path. Right. See if this does anything. This finish still crafting. This going to be where a human beats the AI. Let's find out. So, edit the config with cursor. Let's change its path. Oops. I mean, path is just new. Save it. Let's go ahead and [Music] close. Did we do it? I don't see any errors. Do we have tools? Hey, look at that. We got our tools. Okay, let's test it out. So, we beat Interesting. So, all of that there. Let's see if I'm curious to see if it does fix it. But on the new, we can go ahead and test this. Um, okay. So, I'd like you to use the Rev ROI MCP server. Please find the cashback rates for goals. All right. Always allowed. Okay. So, it's going to start asking us for permission. Just doing a get server check which was our URLs. Um it's going to set the base URL to the main one. That's fine. Could probably optimize that a little bit, but if it works, it works. And now it is doing its thing. It's investigating Kohl's review carefully, of course. All right. So, we set our retailer. Remember in the beginning we gave it a flag for which argument it should use. Uh oh. Let's see. Show me what fetch. What did it not like? Valid JSON page exists but could be simplified in from HTML. Okay, so we have a little debugging to do. Oh, it's returning HTML instead of JSON data. What did it actually do? I want to see the output. Will it tell me that detail? Here we go. Retailer Kohl's type text unexpected positioning. So, we might have [Music] to Okay. Well, we have it. Let's actually bring this back. Right. And let's set up a session on this one. Yeah, we'll create a new cloud code session. Let's init it. Now we're waiting on two cloud coats. Does this one ever finish? What's taking so long on this? It's almost like it got stuck there. It's not really doing anything. I almost want to put I'm going to exit it this one and say please continue. See if that gives it a little bit of a kick in the butt because I want to come back over here and find out. Yeah, you can do that. It's fine. want to give it the context of the error that we got and see if it can autofix itself because we could probably use our original draft too. So, original draft has those end points. Um, let's see. I could just take those end points there. What did action gift card and host name? I wonder. Let's just take all of them. We'll give that as context to the window. This is taking a while on that side. Yes, you can run ls commands. While we're doing that, um, okay, I'd like you to troubleshoot an issue. Sure. An issue we are facing the JSON in the MCP server is getting errors. Here's the errors found in cloud code. Yes, you may write it. Cloud desktop and the examples of the API calls we need to make. So I'm going to give the example paste and then I'm going to grab cloud code itself. And we're going to get all of that detail and we'll paste that in. See how it does. So, this is a massive prompt. Generally wouldn't want to give it that much context, but for troubleshooting, we'll give it a go. Just basically look at these side by side. Now, did this get done over here? Still attempting to write. I almost want to just stop this particular one. We'll give it some new context. Please review the codebase and fix [Music] the issues as identified in cloud MD. See if it's able to do anything with that. And this guy's moving right here. So, okay. So, it's going to use a curl command. I have a feeling this one's going to beat it to the punch. So, MCP new might be the one we use. Okay. Okay. So, the query parameters are different than that. Does that mean Oh, we don't have git for this one. All right. So, let's pull up claude and we'll quit it and we will reinstall or reopen it. Not reinstall it. We should still Okay. Please use the Rev ROI MCP server to get the cash back rates for Kohl's. Now, what we can do if we can get this working right, um, not only do you get to use that in Cloud Desktop, but we can source this into Cloud Code and use that for helping with our sourcing, too, because you can put all of the MCP service in there. So, after development, we get this working. Perfect. There we go. So, so much quicker this time. All right. So, this module is actually way better than the other one. We We'll be able to stop that. It's going through. It's getting the cashback portal rates from each of the different items. Credit card points. So, it's actually it went through and did the whole thing. Uh, so looks like 4.5 was the highest. Let's just double check that, right? Like what does Kohl's look like right now? Does Kohl's have four five or is it better? Um yep 45. Perfect. So we are getting good data on this. Excellent. So now you can see with these types of tools um that's just one aspect of this we can now use have one for sourcing, one for cash back, one for we have the credit card and travel points already, right? We have that already baked in from Rev ROI. Uh, now we could use it for Smart Scout. So, Scott, give me a give me a send me a DM. We'll write one together. We'll make it more um than this live session here. Something that we could use for that. You only have 10 data, etc. You can see wherever you go with these things. These are the many tools in the toolbox, but now we have a working version that is directly in cloud code um and available for use. So, we'll get a more productionready version out there, but this should be pretty good for this live stream. So, have a good one.