Person/Kevin Leneway/YouTube/Build Cursor on Steroids in 20 Minutes with MCP

• LATER Build Cursor on Steroids in 20 Minutes with MCP - YouTube

  logbook
  • Resources
    • Person/Kevin Leneway/Github/awesome-cursor-mpc-server
  • • 00:02 all right hey everybody I am here today to show off a new feature of cursor that I think is severely underrated and is actually pretty awesome and so I wanted to share uh exactly how I can use this new uh model context protocol mCP function to really turbocharge a lot of the the common features of cursor so I'll show you how to build this kind of Step by Step from the ground up and then I have an open source repo uh you guys can check that out and feel free to contribute add what you want um for it do whatever all right so first of all I want to say thanks I uh made my first video just threw it up on Reddit just for fun uh and uh really got some good responses and really appreciate uh all
    • 00:48 of the uh feedback got a lot of good tips myself and I thought I'd make another video here um based on some of the feedback one person uh called out a interesting repo I did I did a video on this earlier this week I'm looking at this Devon cursor rules basically the idea is that you can use cursor rules to execute scripts and basically have this multi-agent kind of Devon like uh system uh just using the core cursor functionality now this idea is amazing I think it's really interesting one problem I have though is I wor wor that because we are loading up these cursor rules with all of these kind of agent meta instructions it's your agent's not going to know enough about your code
    • 01:39 base and and to me my cursor rules are so key to getting really consistent results that I hate to um use it all for um a lot of these these instructions and things but I do think adding On Tools so they've got interesting tools screenshot search engine all this stuff web scraper um this is really useful right uh i' I've been if you saw my last video I do a lot of manual copying and pasting I'm using other tools and I'm doing a lot of things it'd be great if we get start to automate that now just uh I think it was last week maybe uh a week ago um cursor implemented uh a connector to the model context protocol so this is something that was made by anthropic as kind of an open uh reference for how to
    • 02:28 provide uh external tools to any client uh so so an agent can basically go and start using a variety of custom tools and have a nice interface for using that
    • so I would say read through this this is a better description than what I gave
    • also a much better description than than what we have here for cursor
    • 03:16 my repo or this video because uh let me show you guys it's it's actually extremely cool what you can do with this
    • this gives you a good starting point
    • this is the mCP server repo
    • 01 is really good 03 mini really good at 04:00 understanding what mCP is you know you can
    • throw some docs in there and get a starting point and then you know took me some tweaks to kind of get this dialed in so I would recommend doing something like that but you can also just um you know clone this repo this works uh pretty cool uh first thing is your TS config
    • create this build and uh it's basically this index.js file is what you're going to point cursor to
    • this module resolution some of this stuff is a little bit non-standard
    • you know just copy this uh you'll be good to go okay so the starting point here is
    • 04:43 you basically um use this model context protocol SDK
    • it's this stdio.js standard inout
    • you have two choices
      • 1 - you can either host this at a port and run a web server
      • 2 - you can just directly point it to some some JavaScript and make the calls that way
    • JS is a little bit easier approach you know
      • you can do it the other way too
    • basically what we do is we create This Server instance 05:17
    • then we Define our tools
    • if you guys have done tool calling before this should look very familiar
    • you put your name description and then the schema right
    • so this <?> schema you make sure ...that it will validate 05:28 against this
    • it's really important actually you make the description as clear as possible
      • this is basically the interface that the cursor agent is going to see
      • if you're not clear about what these things are, you're going to have a hard time
      • because the agent's going to not know what to do with with your tools
    • I've got three tools I put together I'll show you
      • I've got my screenshot tool
        • I want to take in the URL to screenshot
        • I want the agent to basically say here's the URL I want you to go and and screenshot
        • you have a choice you can either give the full URL or you can 06:05 just give a relative path in this case
        • because we're using localhost I'm doing it here
        • if you wanted to do this on like a preview Branch or staging like you could change this right it's nice thing about this you can really customize this as much as you want um and then the way I have this set up is because I couldn't really figure out how to send um you know the a binary over to cursor and have it uh included I'm not sure if that's possible or not if it is that'd be great um so I kind of cheated and basically said hey cursor agent you just find tell me where you want me to save this screenshot and I'll just save it there um so then you can basically look at it in your repo you can drag it
    • 06:40 into the agent if you want to uh make changes
      • it's kind of a neat way to see some of these screenshots directly
      • I've got an architect so again
      • if you saw my last video
      • I did a lot of work concatenating all my files
        • I had the whole repo;
        • I wrote a description of the task
        • I had all these XML tags
          • I sent that off to you know OpenAI/Model/o3/Mini a really smart reasoning model
          • to get back the plan
          • this is absolutely a best practice to get the most out of the cursor agent
          • I find this works really well
            • but it's a pain to do all that
            • so this tool does that automatically
            • which is pretty neat
            • it's not quite as effective as from what I 07:19 found
            • but ... it's a really really good starting point
              • and I think you could iterate on that
        • this last one is just a little trick from my buddy
        • git/diffs
          • he had been adding that to the end of his cursor agent calls
          • before he actually you know does a commit or a push 07:39
          • up to the actual GitHub repo, just runs a quick git diff and asks the agent to review it
            • give them any fixes
            • kind of a neat approach
            • you know I actually I think this might be built
              • I actually don't use a lot of the git commands directly through cursor
              • so correct me if I'm wrong here
    • 08:01 so then we do all that stuff
    • very simple here
    • we're just calling in the request
      • get some params to figure out what tool we need to run
        • we start this thing here
          • again this is standard stuff
          • I didn't write any of this
            • this is from the docs
            • the tools themselves are pretty straightforward
            • we'll start with the screenshot tool
    • we're we're using Puppeteer
      • we Launch the browser 08:28 we go to the page we take a screenshot and uh we write it to whatever that file path is
      • we return this back and then this is 08:41 basically another prompt that you were giving to the agent
      • so we're telling it "hey, we saved the screenshot here"
      • but before you continue ask the user to drag and drop that into the agent window again this is kind of a hack because I couldn't actually get it in there um but you'll see here the agent you know you know should kind of say Hey Kevin do you want to pull this in and and talk about it was cool right uh you could say whatever you want it uh you could say never say that you whatever you want um just kind of helps guide the agent uh again this code review um this is very simple uh what do we have here you know we're just doing a ex you know executing this this command
    • 09:21 git command
      • then as the instructions
        • we're basically saying "review this diff" and then if you find any issues just fix it
        • and then the architect I think this is where you start to get into what I think could be a really really interesting use case this is an area I want to explore more um I might do another video um if I go deep on this um for those who don't know actually
        • I maintain an open source coding agent. I've been working on it for about a year now full-time
        • cursor is doing a really great job with their approach but
    • 10:01 there's some interesting ideas in that in that [my] repo
      • I want to start to pull some of those in
      • and use the best of the ideas I have from my repo
      • and merge them with the excellent tools that that we offer here
      • or that cursor offers
      • again you can start to do very detailed prompts
      • here one's that's fairly straightforward
      • but you could really go deep here and make this a really intricate prompt
      • we can actually just call out to OpenAI/Model/o3/Mini or whatever model you want
      • and basically get back [from the reasoning model] The Prompt here about an expert software architect 10:49

        • outline the steps that an AI coding agent should take to complete or improve the code okay and then output a step-by-step plan
          

        • again this very similar to the the instructions that I had in the other video
        • this architect is asking for the code - the concatenated code for one or more files
        • we can take advantage of cursor's really good search tools to identify the files that are relevant to a certain task and send those over
        • so this way I don't have to 11:26 send the entire repository over
        • it will automatically find the relevant files send them over

      • EnvVar/.env wasn't working so he uses keys.js 11:34

        • one of the limitations of This [MCP] Server approach is you can't actually put environment variables
        • I couldn't get this working
        • it's just a it's a security thing
        • it just didn't didn't want
        • there's probably a good way to do it - I didn't dig too deeply in it
        • instead I took the YOLO of just just pulling my API/Keys in from my own keys.js file
        • so I've got my OpenAI/API/Key here
        • you know I've got it in my git ignore
        • 12:08
        • I'm only using this locally
        • this is definitely not production level code
        • this is just an example of how this tool works
        • like show you what what you can do with this thing

      • setting up the MCP server in one of his own internal tools 12:20

        • I'm going to pull up one of my actual projects, an internal tool

        • Trying to connect the MCP server in CursorAI/Settings/Features/MCP Servers 12:45

          • put whatever name you want - doesn't matter
          • the type - do command not SSE
          • 12:57
          • Edit MCP Server Dialog
            • Name: cursor-tools
            • Type: command
            • Command: /Users/kleneway/Projects/mcp-server/build/index.js
              • the command is basically you're just running this node index.js file
              • Reminder: since it's typescript, you need to run a build to generate it
                • to actually you know typesscript compile get it to to this JS file once you do that um just point to it
          • you'll kind of know right away if it picked it up because it will show you the tools that are available here
          • and if you make any changes just hit this refresh button
            • ux is kind of bad here; sometimes it did it work not
            • sometimes I had to reset the tool
          • 13:29 it's work in progress; I give the cursor team a lot of credit for adding this in, but I think there's some improvements we can do.

        • integrating knowledge of the commands in the prompts 13:34

          • step two
          • you don't have to do
          • but I think it's really helpful
          • in your CursorAI/.cursorrules I added this Tools section which explained what the tools do and when I wanted cursor to call these these tools

            • Tools Prompt

              • When you make a change to the UI, use the screenshot tool to show the changes.
                

              • If the user asks for a complex task to be performed, find any relevant files and call the architect tool to get a plan and show it to the user. Use this plan as guidance for the changes you make, while maintaining existing patterns and structure.
                

              • After a complex task is performed, use the codeReview tool to create a diff and use it to conduct a code review of the changes.
                

          • so in this case,
            • if you make a change to the UI use a screenshot tool and show the changes right maybe that's useful we'll see I'll play with this and see what works um you know this one for a complex task use architect tool to get a plan uh and then after a task is
            • 14:07 performed go ahead and use this code review to get a diff and look at it
    • I'll start with the code review first (DEMO)
    • I'm on a branch "rubric fix"
    • 14:38 let's just make a typo here right I I don't know like let's just say uh there we go um save this uh and I have to change okay we'll try this is not going to work anyway we'll try this here um let's run commit and C review and I've been having this lately okay fine we'll submit okay okay so we run a bill check that's fine should work um I again these are part of my cursor rules I'm always asking to run
    • 15:07 builds before it actually does any commits I find that's very helpful uh in Real World um coding um do I actually have okay fine it's G May okay maybe I'll fix this sorry I meant to make just a simple change okay yeah yeah yeah it's going to fix that okay oh it just fixed it you okay uh fine we'll run this build um maybe in the meantime let me see if I can just like save this here so that's not going to doesn't going to break anything let's see if um we'll see if the uh code review fixes uh and identifies that but in the meantime okay everything works it's fine let's accept this just to get those out of there so basically if you look at this the only change I've made is a bunch of ease uh build successful we're
    • 16:10 it's going to commit
      • this is fine so now we committed
      • it said, "let's perform a code review"
      • when it calls a tool 16:21
        • #Observation
          • CursorAI/Agent here says "Calling MCP tool: code-review"
          • CursorAI/Agent/Yolo is NOT on, it's asking him for confirmation to run the tool
      • it asks for any kind of attributes
      • I need to know where this is [on the MCP Server] to run that that diff command,
      • I'm asking for the folder path
        • #Observation I don't really see where he supplied any input; it looks like it automatically posted the folder path for the diff ...
      • it's kind of a hack
      • I think there's probably better ways to actually do this thing
      • 16:35
      • it didn't catch his example, but it generally is proving out the connectivity to the server
        • it didn't catch this thing with the example I'm just kind of showing uh this this is um probably should have came up with a better example before I ran this
        • 16:53 but this works fine it's okay um so we have that there um let's do something else um and
    • 17:02 I'm just going to try to use the screenshot tool
      • he types

        • "do a screenshot of the logout screen"
          

        • this is a little bit contrived
        • ideally you'd make some complex UI change and it would do a screenshot
        • I just want to show exactly how the screenshot tool works
        • 17:23 we [made it do] some work to find out exactly where that logout route would be
          • User: "do a screenshot of the logout screen"
          • Assistant:
            • I'll help you take a screenshot of the logout screen. First, I'll need to find the appropriate URL path for the logout page.
            • Let me check the authentication-related files to determine the correct path.
            • Searched codebase "signOut logout auth" (src/app, src/components/) : 0 results
            • Let me check the auth configuration directly:
              • Read file route.ts:1-50
            • Since NextAuth.js is being used, the default sign out page would be at /auth/signout. Let me take a screenshot of this page:
            • Called MCP tool: screenshot
              • Parameters:
                json

                {
                  "relativePath": "/auth/signout",
                  "fullPathToScreenshot": "/Users/kleneway/Projects/psl-platform/screenshots/logout-screen.png"
                }

              • Result:
                • Screenshot saved to /Users/kleneway/Projects/psl-platform/screenshots/logout-screen.png. Before continuing, you MUST ask the user to drag and drop the screenshot into our chat window so you can see it.
            • I've taken a screenshot of the logout screen and saved it. Could you please drag and drop the screenshot from this location into our chat window so we can look at it together?
          • #Observation is Puppeteer able to generate these screenshots in a headless way?
          • it saves it to the screenshot logout-screen.png
          • there it is
          • 17:45 you can drag and drop this [image] in the chat
          • then you can make a request for it to change the code based on the appearance

            • make this look awesome
              

            • Anthropic/Model/Claude/3.5 is actually pretty good about doing stuff like this
            • it knows where component is
            • it's able to make changes;
            • #Observation the point is that one could iterate using screenshots this way
    • 18:30 it doesn't look any different
    • you get the idea here take a screenshot
    • contrived example

    • example of the plan and using the architect

      • #Observation he pastes in a bug, and it ends up calling the planning tool
      • 19:10 you want it to be able to look at the bug and for Sonnet to be like "you know what, bro this is like a dumb bug I can just fix this myself without having to create a whole plan"
      • which is exactly what you want
      • you want it to kind of self be self-aware, to say what it can do, and what it needs more of a of a plan to do
      • look at what it did
        • so it went out there
        • it did a search
        • it grabbed the relevant files
        • and then when it's doing this call
        • basically we send the task
        • and then you know we're basically sending over some code oh we're not actually sending a code it's interesting I've seen this most of the times it actually sends this uh this code over here so I'll probably need to 19:45 adjust some some things
      • but let's see here okay I think what happened was uh the um so you can see
      • here here's kind of the step of what to do
      • analyze the data flow
      • so it's got this whole um step-by-step approach um which is pretty cool uh again might need to tweak this a little bit again point of this I want to show you guys the power and potential of this uh mCP and and what you can do with it um I'm really excited about I think there's a lot of tools that that I personally will start to play with and and if you guys come up with cool stuff uh definitely let me know uh I would love to see see what you guys do maybe feature some of these
    • 20:29 all right and so you know if you guys want to play with this uh I've got this um up here um you know be careful with this it's not production code there might be bugs I'm probably not going to go through and and do a bunch of like support on this right this is more just for tutorial purposes show you guys how to build an mCP server um and if you guys find this interesting let me know um we love I'm going to keep doing some of these videos U having a lot of fun with this you guys seem to like it so I I appreciate all the all the support and all the great comments um so go a And subscribe subscribe I'll make some some more videos uh along this vein if you guys have ideas of things that you want
    • 21:03 to see or I've got a whole bunch of you know tricks in my bag that that I'm happy to share and show you guys kind of how I how I use this day today uh did some really cool stuff today actually earlier today with the GitHub/dzhng/deep-research and being able to use that
      • and the super secret OpenAI/Model/o3 model behind the scenes
      • which is actually incredible at coding
      • so there's some tricks there
      • we got some new models kind of coming out soon
      • I think Gemini is going to come out I can show uh an example of how I've used that in the past and and maybe do a quick review of of how that works so again you guys have content you want let me know uh otherwise I will see you guys later