Build Anything with MCP Agents, Here’s How

By David Ondrej

Share:

Key Concepts

  • mCP (Machine-Controllable Programs): AI agents that automate tasks within Cursor.
  • Cursor: An AI-powered code editor.
  • GitHub mCP: An mCP that allows Cursor to interact with GitHub repositories.
  • Browser Tools mCP: An mCP that provides debugging and analysis tools for web applications within Cursor.
  • YOLO Mode: A Cursor setting that allows AI agents to execute commands automatically without requiring manual approval for each step.
  • Command Deny List: A list of terminal commands that Cursor is never allowed to execute, even in YOLO mode, for security purposes.
  • Ultra Search: An AI agent within Vectal that performs deep web research tailored to the user's tasks and context.
  • Vectal: An AI-powered task management and productivity platform.

Setting Up GitHub mCP

  1. GitHub Account: Create a GitHub account at github.com if you don't already have one.
  2. Personal Access Token:
    • Navigate to Settings > Developer Settings > Personal Access Tokens > Fine-grained tokens in your GitHub account.
    • Generate a new token, naming it "Cursor mCP" or similar.
    • Set an expiration date for the token.
    • Select "All repositories" for repository access.
    • Grant the following permissions:
      • Administration (read and write)
      • Commit statuses (read and write)
      • Contents (read and write)
      • Issues (read and write)
    • Generate the token and copy it. Warning: Treat this token like a password.
  3. Install GitHub mCP in Cursor:
    • Go to the GitHub mCP page (from smiy).
    • Select "Cursor" as the installation method.
    • Paste the generated personal access token into the provided field.
    • Click "Generate Command."
    • Copy the generated command.
  4. Add mCP in Cursor Settings:
    • In Cursor, go to Cursor Settings > mCP.
    • Click "Add New mCP."
    • Name the mCP "GitHub" or similar.
    • Paste the copied command into the "Command" field.
    • Click "Add."
    • Refresh the file list until the mCP status turns green.
  5. Testing the GitHub mCP:
    • Open the Cursor agent (command+I).
    • Type a command such as "create a new GitHub repo named welcome YouTube."
    • Verify that the repository is created in your GitHub account.

Enabling YOLO Mode and Setting Up Command Deny List

  1. Enable YOLO Mode:
    • In Cursor, go to Cursor Settings > Features.
    • Enable "YOLO Mode."
  2. Configure Command Deny List:
    • In Cursor Settings, find the YOLO Mode settings.
    • In the "Command Deny List" field, add potentially malicious commands that you never want Cursor to execute (e.g., rm -rf /, sudo).
    • Enable "Delete File Protection" to prevent the agent from automatically deleting files.

Setting Up Browser Tools mCP

  1. Clone the Repository:
    • Copy the git clone command from the Browser Tools mCP repository.
    • In Cursor agent, run the command: "run this terminal command [git clone command]" (using an AI model that can run terminal commands, such as CLA 3.7 Sonet).
  2. Install the Chrome Extension:
    • In your Chrome browser (or Chromium-based browser), go to chrome://extensions/.
    • Enable "Developer mode" in the top right corner.
    • Click "Load unpacked."
    • Navigate to the cloned repository folder, then to browser-tools-mcp/chrome-extension, and select the folder.
  3. Add mCP in Cursor Settings:
    • In Cursor, go to Cursor Settings > mCP.
    • Click "Add New mCP."
    • Name the mCP "Browser Tools" or similar.
    • Copy the installation command from the Browser Tools mCP repository.
    • Paste the command into the "Command" field.
    • Click "Add."
    • Verify that the mCP status turns green.
  4. Start the Browser Tools Server:
    • Copy the command to start the Browser Tools server from the repository.
    • In Cursor agent, run the command: "run this command [server start command] do not do anything else" (using CLA 3.7 Sonet).
    • Pop out the terminal window to prevent it from blocking the chat.
  5. Verify the Setup:
    • Open a web application (e.g., vectal.ai).
    • Open Chrome DevTools (F12 or right-click > Inspect).
    • Verify that "Browser Tools mCP started debugging this browser" is displayed in the console.
    • Check the "Browser Tools mCP" tab in the DevTools panel to see available tools.

Using Browser Tools mCP

  • Debugging: Select an element in the web application and ask Cursor agent to "check the selected element and suggest how we could reduce the padding."
  • Console Analysis: Ask Cursor agent to "check the stuff in our web console and explain what's going on." The agent will use multiple tools to gather console logs, errors, and network information.

Vectal and Ultra Search

  • Vectal: An AI-powered task management platform with built-in AI agents.
  • Ultra Search: A deep web research agent within Vectal, powered by Perplexity, that provides personalized insights based on the user's tasks and context.
  • GPT 4.5: Vectal Pro users have access to GPT 4.5 within the chat interface.

Notable Quotes

  • "Just adding these two mCP servers makes cursor two to three times better and I'm not over exaggerating."
  • "If you have a few mCP servers in your cursor you have an insane advantage over everybody else."
  • "We're living in the future I'm not joking please pay attention to this video."
  • "In six months all we will have to do is type what you want to create in plain English and cursor agent will do the rest for you."

Technical Terms

  • mCP (Machine-Controllable Programs): AI agents that automate tasks within Cursor.
  • API (Application Programming Interface): A set of rules and specifications that software programs can follow to communicate with each other.
  • Repository: A storage location for software code and related files, often managed with version control systems like Git.
  • Chrome DevTools: A set of web developer tools built directly into the Google Chrome browser.
  • Front End: The user interface and client-side logic of a web application.
  • Back End: The server-side logic and data management of a web application.

Logical Connections

The video progresses logically from basic setup to advanced usage. It starts with the GitHub mCP, which provides fundamental automation capabilities. Then, it introduces the Browser Tools mCP, which enhances debugging and analysis. YOLO mode is presented as a way to streamline the workflow by automating command execution. Finally, Vectal and Ultra Search are mentioned as examples of AI-powered productivity tools that can be integrated with Cursor.

Synthesis/Conclusion

The video demonstrates how to significantly enhance the capabilities of Cursor by integrating mCPs. By setting up the GitHub mCP and Browser Tools mCP, users can automate tasks, debug web applications more efficiently, and leverage AI to improve their productivity. Enabling YOLO mode, while carefully configuring the command deny list, further streamlines the workflow. The speaker emphasizes that these tools represent the future of software development and encourages viewers to adopt them to gain a competitive advantage. The mention of Vectal and Ultra Search highlights the broader trend of AI-powered productivity tools.

Chat with this Video

AI-Powered

Load the transcript when you're ready to chat so the initial page stays lighter.

Ready to summarize another video?

Summarize YouTube Video