Table of contents
In 2023, Anthropic published the Model Context Protocol (MCP), an open standard often described as a “universal USB-C for AI”. This protocol enables AI systems to connect to external tools, APIs, and data sources, in a bidirectional way.
My take on MCPs:
MCPs can use any third-party service, including those from IDE agent interfaces. Does this mean services will be developed specifically for this interface? No, it doesn't replace APIs or GUIs. However, it is a significant advantage for service interoperability and greatly enhances the developer experience in IDEs that support MCPs.
Any tool can be used by an AI
The MCP standard defines a framework for possible interactions between the tool and the AI. An MCP provides the AI with a catalogue of available tools, from which it only needs to select the right one to solve the given task.
Example: you’re a developer with around twenty tasks listed in Jira. You ask your IDE agent:
Fetch the Jira tasks for the current project, define today’s priorities for me. Create an action plan for each priority, and save it in tasks.md.
You edit the generated action plan, then write:
Execute task X from the action plan in @tasks.md. Update the status of completed tasks in @tasks.md and summarise the changes made.
We’ll mainly focus on MCP server usage by LLM agents (chatbots), though any AI system can use them.
How does a Large Language Model work? The user provides a prompt in text form, which is then tokenised (split into smaller word units called tokens) before being processed by the model. The model is trained on millions or even billions of examples to predict the best possible response, based on the context provided.
Which MCPs to use?
They exist for almost every use case. I mostly use the following:
| MCP | Usage |
|---|---|
| filesystem | Read, create, edit, and search files and directories |
| sequentialthinking | Facilitates structured, progressive thinking through defined stages. |
| memory-bank-mcp | Centralized memory-bank with multi-project support |
| github | Fetch GitHub issues and manage pull requests. → see end of article for integration |
| google calendar | List your availability for the current week, for example → see end of article for integration |
| tavily | Search factual information on the web. 1000 free searches per month |
| fetch | Extract structured data from web APIs |
| firecrawl | General-purpose web crawler. Free tier offers up to 500 scrapes → see end of article for integration |
| playwright | Automate tasks in a web browser |
| shadcn | Integrates Shadcn library components, reducing hallucinations on props |
I tested Figma-Context-MCP MCP to convert online mockups into a React application, but the results were not satisfactory.
For those looking to turn a design into code, an alternative approach exists, though it is not particularly recommended:
- Capture the mockup.
- Use an LLM to describe the typography, colors, and spacing based on a 12-column grid (desktop), 8-column grid (tablet), and 4-column grid (mobile).
- Generate the React page along with the associated design system using Shadcn and Tailwind.
Security risks regarding MCPs usage
When you’re running an MCP server locally, it’s the same as running any other software, with unlimited access to all your files.
Instead of running them natively, MCP servers should be containerized and run using Docker with restricted access:
- to the filesystem bu running as a non-root user.
- to the memory & CPU, e.g in docker-compose:
deploy: resources: limits: cpus: '0.001' memory: 50M
I’ll soon make a guide about using Docker. For the moment, please check out this guide made with strong regard to MCP security: MCP-Checklists
Focus on web MCPs: Fetch vs Firecrawl vs Browserbase vs StageHand vs Playwright
- Need to fetch online site content? → Use Firecrawl. It’s an abstract crawler with rules you can configure. Open-source, cloud-based headless browser you can self-host. It loads sites, executes JavaScript, and retrieves client-side dynamic content, which Fetch cannot do. → No browser automation (no page interaction). → Runs in the cloud and can be integrated into CI/CD pipelines.
- Need to automate actions in a cloud browser?
For CI/CD environments, use Browserbase and Stagehand to interact with websites.
Difference?
Browserbase is
imperative: you specify each step. Stagehand isdeclarative: you specify the outcome, it figures out the steps. - Need to crawl or interact with a local or authenticated site?
Two tools help: Puppeteer and Playwright. Both support
headfulandheadlessmodes. In headful mode, the browser opens, so you can watch interactions. → Prefer Playwright. It uses the local browser with the current user session, ideal for authenticated sites.Playwright sessions can be isolated with the
--isolatedflag. See Playwright GitHub page.
Setting up MCPs on Cursor
Connect the Firecrawl MCP server
Goal: Crawl anonymous public websites.
- Go to https://www.firecrawl.dev/
- Create a Free plan account (up to 500 scrapes).
- Copy the MCP configuration from the dashboard’s API key section, selecting the latest Cursor integration.
- Paste it into Cursor settings > MCP > Add new MCP.
Connect the GitHub MCP server
Goal: Access GitHub issues and manage pull requests.
Add this config to your file:
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "<YOUR_GITHUB_PERSONAL_ACCESS_TOKEN>"
}
}- Get a Personal Access Token from GitHub
- Create a new fine-grained token with permissions (all repos or selected ones):
- Commit statuses: Read and write
- Contents: Read and write
- Issues: Read and write
- Merge queues: Read and write
- Metadata: Read-only
- Pull requests: Read and write
- Secret scanning alerts: Read-only
- Events: Read-only
Connect the Google Calendar MCP server
Goal: Easily list your availability.
- Create a new OAuth client ID and secret in Google Cloud Console.
- Go to APIs & Services > Credentials > Create OAuth ID.
- Select Desktop app.
- Download credentials, save as credentials.json at the root of google-calendar-mcp.
- In Data access, add permissions manually:
https://www.googleapis.com/auth/calendar.events
"google-calendar": {
"command": "node",
"args": ["<absolute path to /google-calendar-mcp/build/index.js"]
},Recap
MCPs are a standard that deliver strong interoperability between AI and external services, to:
- Enhance development environments.
- Enrich workflows by connecting external tools.
Installation is straightforward, and your agent becomes an intelligent hub.
Do you also feel MCPs save you time? If so, which MCP servers do you find most relevant?
More Articles

Create your own MCP servers
Discover how to design and build secure MCP servers using Typescript or Python.

Cloud Email Microservices: A Guide to Using AWS Lambda and Cloudflare Workers
Deploy an email microservice on Lambda and handle queues — invoke from Cloudflare Workers or any Node.js backend
remix.run.png)
Best Practices for an Optimized Contact Page Design
Build a Contact Page That Connects — and Blocks Spam
.png)
7 Ways to Stop Form Spam in Remix / Node.js
Flag bot activity, use built-in rate limit APIs, prevent bounced emails
Remix.png)
Send and Receive Custom Domain Emails for Free
Set up free professional email addresses like you@yourdomain.com without hosting a mail server or paying for Google Workspace. This guide shows how to receive emails using Forward Email and send as your custom domain via Gmail — fast, reliable, and 100% free.
.png)
CI/CD deep-dive: Deploy a scalable Multi-Environment React App to AWS S3 + CloudFront with GitHub Actions
Learn how to build and deploy a scalable multi-environment React + Vite app using Domain-Driven Design, GitHub Actions for CI/CD, and AWS S3 + CloudFront for fast, cost-effective static hosting. Includes environment-specific configs, branch-based workflows, and secure AWS deployment setup.


Comments
Be the first to comment!