The Model Context Protocol (MCP) for Web Developers

Maybe you’ve seen the term MCP being thrown around like crazy on social media but don’t quite understand what it is or how it can be useful to you as a web developer. Let’s answer both of these questions in this article.

What is the Model Context Protocol?

The Model Context Protocol (MCP) is an open-source standard for providing LLMs with data (context) from external sources and letting LLMs execute functions (commonly called tools).

Prior to MCP, every developer had to implement custom solutions for getting their data to the LLM and for triggering custom function calls from LLM responses. It was possible but there wasn’t a good way for teams and systems across the ecosystem to share such solutions because there was no standard. That’s why Anthropic created the model context protocol.

Checkout this diagram from the official documentation that describes the basic architecture.

So what does this mean? Well, MCP’s consist of 3 basic parts:

1. Clients
2. Servers
3. And external data sources or APIs

To understand how they work together, let’s consider a simple example.

• Let’s say you’re working in the AI Powered IDE called Cursor. It would be considered the “host” as it has an MCP client baked in .
• You also have an MCP Atlassian (Jira) server installed on Cursor that you found in the official anthropic MCP directory or in the awesome-mcp-servers repo.
• You ask cursor to help you brainstorm the execution steps to complete Jira ticket #blah-blah-blah.
  • So the cursor client interacts with the Jira MCP server which calls the jira_issue tool to make a request to the Jira REST API.
  • The API returns a response which get’s forwarded back to the client from the server…
  • so that cursor can use that issue data as part of the LLM context.

And that’s it! That’s how simple MCP is. The real value comes from the fact that there are tons of these servers being built all over the world and being shared for you to plug and play.

How are MCP Server’s Helpful for a Web Developer

So now the most important question of all: how is MCP helpful for you as a web developer? Well since you probably spend much of your time in an IDE, the fact that Cursor has an MCP client baked-in is a big step to MCPs being useful to you.

You can also find MCP client’s baked into other apps (hosts) too, like:

• VS Code Extension Github Copilot
• Claude Desktop
• VS Code Extension Cline
• Plus many more as seen in the awesome-mcp-client repo

These clients coded into programs you’re already using, means you’re ready to benefit from the huge collection of servers available for installation.

So what are some MCP servers you might find useful?

Include Ticket Information to Cursor’s Context

One obvious example, as seen in the explanation of MCP above, is the ability to add information about the features and bugs you’re working on into the context of a cursor agent and even update tickets from within the cursor chat. This means there’s less bouncing back and forth and copy/pasting between project management tools like Jira, Asana, etc. Supplemental information from related sources like Google Docs or Notion also have server’s available.

More importantly running in agent mode, Cursor can make a decision for itself if it needs to go grab more info from a ticket.

Turn Figma Designs into Code

Besides helping you effectively work with the team, MCPs can also turn designs into code with the Figma MCP server. As claimed by the server’s docs: “When Cursor has access to Figma design data, it's way better at one-shotting designs accurately than alternative approaches like pasting screenshots.”

You can see that in action in this YouTube video from Graham Lipsman. From what I’ve seen this isn’t a silver bullet, but still a great start to any project.

Work More Seamlessly with Your Database

MCP can help with more than just frontend. If you’re working on any backend code that interacts with a database, there are many MCP servers that can connect, read, write, and query to popular database solutions. Here’s a list of just some of the available options:

• Postgres MCP Server
• MariaDB MCP Server
• MSSQL MCP Server
• MySQL MCP Server
• SQLite MCP Server

Related to this, if you are using a backend as a service (BaaS) like Supabase or Firebase, there are MCPs available for that too!

• Supabase MCP Server
• Firebase MCP Server

How is this helpful? Lot’s of ways! If you don’t already have your DB schema documented somehow in your codebase with an ORM like drizzle or Prisma (and migrations to boot), then a DB MCP server can better inform cursor about your database schema.

Even better, you can ask questions about your data, and get insights without ever having to manually write a DB query.

Scrape Web Data with Puppeteer

Another useful MCP for web developers is the Puppeteer MCP. This could be useful for automating webpage interactions, taking page screenshots, and most valuably IMO, scraping data from around the web.

I tried this out by scraping the Vue School courses page. It took 7+ minutes, had to go back and forth with multiple tool calls, and I had to do some manual JSON parsing at the end to see the full result, but it worked!

puppeteer-mcp.mp4

And here’s the data just to prove it.

Search for Assets on Your Local Machine

Who hasn’t stored assets in random places (maybe the downloads folder!) when rushing to get a feature out the door? But now it’s 6 months later and you need to remember where that full size original asset is but you just can’t what it’s named. The filesystem MCP is a great solution. It can interact with your filesystem by scanning directories, reading file data, writing to files, and more. Allowing interactions like these can be approved on a case by case basis so you remain in control.

In the below images, I use the filesystem MCP installed with Claude desktop to help search for a

The screenshots below show how I can search for a lost profile picture using the Claude Desktop App. Notice how it’s able to quickly and easy search for likely alternative file names:

Also, I was able to easily pick out the largest file just by asking, saving time on my search:

Honorable Mentions and MCP Server Directories

There are of course plenty of other MCPs out there worth exploring. Some more that I though were worth mentioning include:

• Slack MCP - Perhaps for auto sending snarky comments to your PM when your having trouble with a particularly difficult feature request
• Git MCP - For reading repo data, checking out branches, diffing, and more.
• Magic MCP - For creating next level components
• Cloudflare - For managing kv storage, workers, queues, and more
• Stripe - Because that’s really what we need, the bots managing our money

There are of course many more to explore and you can find them via several directories out there. These are the ones I know about:

• Cursor MCP Directory
• Official Anthropic MCP Directory
• Awesome MCP Servers
• mcp.so

Conclusion

Despite it’s intimidating name, the Model Context Protocol (MCP) is pretty straightforward. Using them is as easy as adding a few lines of JSON to a host’s (Cursor, Claude Desktop) config file. Are you interested in diving into MCPs? Let us know what you’d like to know more about in the comments below! We’d love to hear from you!

Interested in writing your own MCP clients or servers? Want a walkthrough of setting up MCPs in Cursor at the global or project level? Want more tips about some helpful MCPs? Give us a shout!