How to Create Custom MCP Servers from a Prompt |

This MCP server that's being used here was created by me just by providing a prompt. I gave it a Figma link, and it returned the output using the Figma MCP server. This is actually a fully functional MCP server, and I didn't have to write any code to build it. That's because I use a platform that allows you to create SSS-based MCP servers just by giving a prompt. It's a really great tool that automates the entire process for you.

Now, let's jump right in, and I'll show you how to use it and how I made MCP servers with it.

Getting Started: A Simple Weather API MCP

Before we dive in and I show you how the Figma MCP server was made, let's start with a simpler one: a weather API MCP. If you instruct it to generate the tools, here is what actually happens. After you provide a prompt to create something, it asks for specifications.

These specifications include: * Whether you have an API key for the service you want to integrate. * How you want to send the environment variables (with each prompt or baked into the environment variables). * What you want to access. * A few other clarifications.

Once you clarify these details, it begins building the server step by step in an iterative process. There are two modes available: modify mode, which allows you to modify the code, and chat mode, where you can ask for information about the MCP server.

Now, let me show you how I built the MCP server, along with some additional tips that are really important.

The Building and Testing Process

This is the prompt I gave it after encountering some errors. The first portion was already pre-made. After that, I specified that I could retrieve the API key myself and that it should be set as an environment variable. I didn't want to include it in the prompt repeatedly. I requested the current weather data, and when it asked about any special requirements, I specified that I wanted the weather in degrees.

It then created the set of tools and informed me that the tool expects the OpenWeather API key to be set as an environment variable. So, I placed the key accordingly and then attempted to test it out. I did this because when I previously built the Figma MCP server, it didn't work, and there was no built-in way to test it. That's why I wanted to test this one, but when I asked it to, it didn't return anything.

So, I gave it another prompt asking for the exact API call with the key so I could test it myself. That approach worked; it provided the request, and I just had to paste it into my browser. You can do this with any API-based tool by including your API credentials to verify if it works.

After that, I exported the tool, but it still wouldn't function properly. So, I came back and used another prompt based on the free plan requirements of OpenWeather. Since my API key had limited functionality, it was trying to access restricted features. I had to specify what it could actually use, and once I did that, the tool adjusted accordingly.

Then, I asked it to generate a new API call for testing. At that point, I had forgotten the original prompt I had given. I tried using a different one, but it didn't work. I then asked for the API call again, and that didn't work either. After trying two or three more prompts, I eventually went back to the original prompt, gave it again, and it finally returned the correct current weather API call. I tested it, and it successfully returned the data.

The generated tools are now visible, along with their parameters. It's a pretty useful tool in that regard. You can also access the generated code. Another cool thing is that if you create tools using this AI tool, you can pass them to Cursor, which can replicate them in your own code, allowing you to run them locally instead of on a server if you prefer.

Deployment and Integration with Cursor

Once everything is set up and the weather API key is in place, you can go ahead and deploy the MCP.

Note: Once it's deployed, you can't modify it. That's why I had to go back and redo everything. I've learned that testing is essential before deployment, something I had to figure out the hard way.

Once you click okay and deploy, you'll see configuration options for Cursor, Claw Desktop, and Window Surf. You can also send a direct request. Since we'll be using Cursor, let me show you how to do that. Just copy the configuration, and now let's head over to Cursor.

So, I've opened up Cursor. In the Cursor settings, I'm in the MCP section, and I've added my MCP servers, including both the Figma MCP server and the weather server. In the mcp.json file, the configuration you copied will include a header. What you need to do is extract the subheader and paste it. It will be named server-name by default, but you can rename it to whatever you like. Then, it needs to include the URL key.

Here is an example of the structure: json { "your-server-name": { "url": "YOUR_MCP_SERVER_URL" } }

Once you paste that in and save the file, it will be automatically available. Now, let me show you that it's actually working. For instance, I asked it to fetch the current weather data for Lahore, and it successfully retrieved all the information using the MCP tool. It recognized the location as Lahore and returned the relevant data. So, you can see that the MCP servers work seamlessly, and it's really easy. I didn't even have to look at the code. Pretty cool.

Building the Figma MCP Server

Now, let's move on to how I built the Figma MCP server. This is the chat where I created it. I asked it to build an MCP server that could retrieve either file data or node data based on the request, with the user simply providing a link.

It then asked me a few questions: * Whether I had a personal access token. * Whether the return data should have any specific format. * Whether I wanted specific parts of the file or the entire file data.

I confirmed that I did have a personal access token and that raw data would be sufficient. I also specified that if no particular data was requested, it should return the default data, and if the entire file was specified, it should return the complete file data. Additionally, I told it that the personal access token should be set as an environment variable so that I wouldn't have to provide it in the prompt repeatedly.

However, initially, it only generated one tool, which was meant to extract data from a file node, but it wasn't quite correct. So, I requested separate tools for file data and node data. Based on that, it created two tools, and now they are available.

Testing the Figma MCP Server in Cursor

Let's open up Cursor. The Figma server is active. I've tested it by providing a link and requesting data from a specific Figma node. It's called the get_figma_node_data MCP tool. Using the URL I provided, it successfully extracted the node data. It recognized that the node was part of the "CRM Dashboard - Customers List" and returned the relevant data.

For example, if there was an element, it provided details about that element, including its characteristics and color in RGB format.

Here is a sample of the returned data structure: json { "element": { "type": "RECTANGLE", "width": 200, "height": 100, "fill": { "color": { "r": 0.2, "g": 0.5, "b": 0.8 } } } }

This makes it really useful if you want to clone or implement these components directly into your front end. Of course, you can create any MCP server you want; that's entirely up to you. You just need to describe what it should do and how it should be used, and it will generate the necessary tools accordingly. It's actually a pretty amazing feature.

Additionally, it outlined what else was inside the node that we asked it to analyze. I also requested the node's metadata, and it provided that as well. So, yeah, it works perfectly.