The Style Context Protocol (MCP) is an open same old that shall we AI assistants hook up with exterior knowledge assets, gear, or methods. This makes them a lot more helpful by means of permitting them to do such things as run code, organize information, and engage with APIs.
In my earlier article, we checked out how MCP works, tips on how to set up it, and tips on how to use a couple of MCP servers. On this article, we’ll discover extra MCP servers, this time that specialize in gear that may assist builders save time and paintings extra successfully.
We’ll proceed the usage of Claude to run the MCP servers because it has MCP features integrated, is straightforward to put in, and is appropriate with main platforms.
So, let’s dive in!
1. Twenty first.dev Magic
Twenty first.dev Magic is an AI powered software that lets you construct fashionable UI parts simply by describing them in simple language. It really works with fashionable editors like Cursor, Windsurf, VS Code (with Cline), in addition to Claude.
So you’ll simply sort what you want, and it’ll right away create ready-to-use code. This makes development UI prototypes sooner and more uncomplicated, with much less guide paintings.
Set up
To get began, first create an account at Twenty first.dev to get your API key. Whenever you’ve signed up, you’ll in finding your API key at the API Get admission to web page.
To put in the MCP server, upload the next configuration and substitute [api-key] with your individual API key.
{
"mcpServers": {
"@Twenty first-dev/magic": {
"command": "npx",
"args": [
"-y",
"@21st-dev/magic@latest",
"API_KEY="[api-key]"",
]
}
}
}
Instance Activates
When sending a instructed to cause Twenty first Magic MCP, it’s perfect to start out your instructed with code /ui, as an example:
/ui create a signup shape
After sending the instructed, you’ll obtain the code for the signup shape, normally with some variants. You’ll be able to then reproduction and paste this code into your editor to make use of it.
We will be able to support our instructed by means of giving it extra detailed directions, as an example:
/ui create a pricing desk part with two plans: Unfastened and Professional. Each and every plan will have to come with a signup button on the backside.
It’s good sufficient to know the instruction and generates pricing tables with simply two plans, as proven underneath, or even supplies some variants.
This can be a nice MCP server for any designers or builders to create prototypes. It assist you to create UI parts temporarily and simply.
2. Filesystem
The Filesystem MCP Server permits an AI assistant to paintings along with your native filesystem to learn, write, and organize information. With this setup, the AI can do such things as create folders, transfer information, or take a look at record main points. This makes it more uncomplicated to automate on a regular basis record duties and spice up your productiveness.
Set up
{
"mcpServers": {
"filesystem": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-filesystem",
"/Users/tfirdaus/Desktop"
]
}
}
}
Instance Activates
Let’s first check out with a easy instructed:
what number of information are there in my Desktop listing?
As we will see above, it’s good sufficient to offer us the depend and information about the information.
You’ll be able to even take it a step additional by means of giving extra detailed directions. As an example, let’s say your Downloads folder is cluttered with a wide variety of information and folders. It’s good to ask it to search out the entire directories that seem to be WordPress plugins with the next instructed:
in finding and record the entire directories that seem to comprise a WordPress plugin. A normal plugin folder features a readme.txt record and several other .php information.
3. MySQL
The MySQL MCP Server permits an AI assistant to connect with a MySQL database so it may possibly run SQL queries, organize database connections, and fetch knowledge. This integration makes it more uncomplicated to retrieve knowledge the usage of herbal language instructions.
Set up
To put in this server, you want to just remember to have get admission to to MySQL put in both to your gadget or on a far off server. Then upload the next:
{
"mcpServers": {
"mysql": {
"command": "npx",
"args": [
"-y",
"@benborla29/mcp-server-mysql"
],
"env": {
"MYSQL_HOST": "127.0.0.1",
"MYSQL_PORT": "3306",
"MYSQL_USER": "[your-mysql-username]",
"MYSQL_PASS": "[your-mysql-password]",
"MYSQL_DB": "your_database",
"ALLOW_INSERT_OPERATION": "false",
"ALLOW_UPDATE_OPERATION": "false",
"ALLOW_DELETE_OPERATION": "false",
"PATH": "/Customers/[username]/.nvm/variations/node/v22.14.0/bin:/usr/bin:/bin",
"NODE_PATH": "/Customers/[username]/.nvm/variations/node/v22.14.0/lib/node_modules"
}
}
}
}
Be sure to substitute [your-mysql-username] and [your-mysql-password] with your individual MySQL username and password. You’ll be able to additionally exchange the MYSQL_DB to the database you wish to have to connect with.
As for the PATH and the NODE_PATH, you’ll in finding them by means of operating the next command for your terminal:
which node
Instance Activates
To make use of the MySQL MCP server, you’ll get started by means of asking it to turn you the tables for your database. As an example:
Listing the entire tables from my wordpress database?
As proven above, we get a complete record of tables. What’s spectacular is that the AI even understands and classifies which tables belong to WordPress Core and which of them are from WooCommerce.
We will be able to additionally ask it to turn us particular knowledge. As an example:
Get the ID of all posts the place the name begins with "Hi"
And we get the leads to a pleasant desk, as proven underneath:
4. Git
The Git MCP Server permits an AI assistant to engage with a Git repository at once. It helps operations reminiscent of cloning repositories, growing branches, committing adjustments, and viewing logs. This integration means that you can organize your Git workflows the usage of simply herbal language instructions. No use to bear in mind advanced Git instructions.
Set up
To put in this server, you want to have Git put in to your gadget. You’ll be able to take a look at when you have Git put in by means of operating the next command for your terminal:
git --version
Then, you’ll additionally wish to have the uv command put in.
{
"mcp": {
"servers": {
"git": {
"command": "uvx",
"args": ["mcp-server-git"]
}
}
}
}
Instance Activates
Let’s check out a easy instructed to test the present department in a neighborhood repository:
Test the present department on this repository [path-to-repository]
We will be able to additionally carry out extra advanced operations, reminiscent of reverting the newest dedicate. As an example:
Revert the newest dedicate on this repository [path-to-repository]
It’s good sufficient to first take a look at if the Git tree is blank, that means that there aren’t any uncommitted adjustments. Then, it’ll revert the newest dedicate and display you the dedicate message.
There are lots of different Git instructions that this MCP server can execute, reminiscent of Git Checkout, Devote, Create department, Upload, and so forth.
5. Docker
The Docker MCP Server is an MCP server that allows you to organize Docker the usage of herbal language. You’ll be able to create boxes with easy activates, check up on and debug operating ones, and care for power knowledge via Docker volumes. It’s nice for server admins managing far off Docker setups.
Set up
To put in this server, you want to have Docker put in to your gadget. You’ll be able to take a look at when you have Docker put in by means of operating the next command for your terminal:
docker --version
Then, upload the next configuration to run the MCP server:
"mcp-server-docker": {
"command": "uvx",
"args": [
"mcp-server-docker"
]
}
Instance Activates
First, we will check out a easy instructed:
Listing operating boxes
Since this MCP server helps many Docker instructions—like growing boxes, beginning them, pulling pictures, and extra—we will check out a extra complicated instructed, reminiscent of:
Run a WordPress container the usage of the authentic symbol, with MySQL, and Nginx operating on port 8000.
This command will arrange 3 boxes: one for WordPress the usage of the authentic symbol, one for MySQL, and some other for Nginx, which is able to run on port 8000.
Wrapping Up
On this article, we have now explored MCP servers that assist you to paintings extra successfully. Those servers permit you to automate duties and engage with inner methods for your native or exterior products and services the usage of herbal language instructions.
You’ll be able to ship activates that can cause those MCP servers and prevent a large number of effort and time for your day by day paintings.
We are hoping you in finding this text useful and that you’ll use those MCP servers to spice up your productiveness.
The put up 5 Robust MCP Servers To Grow to be Your Construction Workflow seemed first on Hongkiat.
WordPress Website Development Source: https://www.hongkiat.com/blog/mcp-servers-development-tools/