MCPs everywhere, wth is that?

I got tasked with connecting Figma to our UI Kit via MCP

Starting with just documentation, it looks super simple, even LLM like Claude can do that for me and suddenly I can tell it to read a Figma file and create some code from it. Just a magic black box doing something cool for me.

I don't like black boxes, so let's do a little bit of unboxing.

What is an MCP in general?

Model Context Protocol is an open-source standard for connecting AI applications to external systems.

So basically it's some kind of protocol to tell LLM how to do stuff with external application.

For example, as for my task, it's Figma MCP. I can tell Claude to look at the component, and it can run something like "make a screenshot" call. Then Figma will do an actual screenshot and turn it back to Claude which then can process it however it likes.

How does the protocol look?

I like to break things down to be a little bit like real world (or not so real) examples. So let's imagine two towers.

First tower is where queen lives, and her main focus these days is to figure out how to overcome a disease which is torturing her little kingdom.

Second tower is where magician lives, he explores a library of endless books to find a proper solution and make everyone healthy. The key problem here is that both of them are stuck in their towers, because if they come outside they inevitably become sick, so their only way to cooperate is to send carrier pigeons.

It's a MCP Architecture:

• Queen: MCP Client + LLM, like a Claude Code
• Magician: MCP Server
• Library: some source of data, like a Figma mock or whatever else
• Pigeons: exchange protocol, which in the case of MCP standard is JSON RPC.

Story begins

This is actually a flow from the docs, I didn't make it up, see MCP Lifecycle. Also here is a Message Flow Diagram.

Alright, so they just figured that there's a disease and need to start sending pigeons.

1. Initialization

First thing Queen does is to try to send a first one, just to see that they are coming through the wind and are capable to overcome the path as well as let the Magician know that she's reaching out and going to continue to do so over the pigeons.

Or, as magician would call it "Capability Negotiation Handshake Spell".

Alright, that worked out, pigeon came to the Magician and he writes back like "Hey Queen, I got you, nothing changed since last time we have spoken, lmk how can I help?".

Queen also got the message, and just because she is very very very nervous and wants this to work out the best for the kingdom, writes back: "Cool, now we can use this as our communication channel".

Stepping back out of the story a bit, other than initialization, there's also an ability to send Notifications back and forth. For example, if Server has something new and wants to notify a Client, it can send a Notification. More about that here.

2. Tool Discovery

Next, the Queen wants to know what Magician can do to help. She sends a pigeon to ask: "What can you do to save all my people? Any spells, potions, books?". That's a tools/list request.

Magician responds: "IDK anything about the symptoms, so as for now I can only try to find it in the books, hence: can search and read".

3. Communication

Queen now knows what Magician is capable of and they start to send pigeons back and forth. She tells him the symptoms, asks to find them in the books, he is researching and reading books to figure it all out.

Eventually after multiple messages, they do find the cure and everyone is happy.

That was a very simplified version of how MCP works as a protocol.

There are also other things that can be fetched, the full list:

• Prompts: Pre-defined templates or instructions that guide language model interactions (or kind of example messages that Queen can write)
• Resources: Structured data or content that provides additional context to the model (or books content that Magician can send)
• Tools: Executable functions that allow models to perform actions or retrieve information (Actionables: as Magician can read and search for special books)

Digging a real world MCP

So that's the story version, now let's see what this actually looks like in practice.

As I mentioned before, my task was to integrate Figma MCP into the development flow. Let's look at what it sends back.

I will use MCP Inspector for it.

Super easy to install and launch with this command:

npx @modelcontextprotocol/inspector

Looks pretty easy to understand and going through tabs all the requests can be run and in the bottom there's a history of what was sent and what came back.

Tools

There's a bunch of things to play around with, but for this exact MCP, the most useful is the tools part.

When clicking on the tools list, several tools can be seen, such as get screenshot, get context of a selection, get some additional data.

I think if I had edit rights in this file, I'd also get some editing tools.

Video
Figma x Claude Code Live: Roundtrip workflows with Figma MCP explains what can be done very well. I was surprised that coders are not the only ones to benefit from this tool. Designers can be as powerful while using LLM to edit stuff. Worth watching.

Tool call response (I got a prompt back?!)

After running a get_design_context tool over a little nav button, something curious happened. I got an array of strings.

1. Layout JSX

First of all, how interesting is that, that the answer for the tool is JSX markup with Tailwind as a styling choice. I haven't sent anything indicating React stack, so that must be defaults.

const imgShape = "http://localhost:3845/assets/1c9afae144c1f480a7116bc13f7dd58532373935.svg";

export default function NavigationIconsMenu() {
  return (
    <div className="relative size-full" data-name="navigation icons/menu 3" data-node-id="I670:158196;876:3599">
      <div className="absolute h-[12px] left-[2px] top-[6px] w-[20px]" data-name="Shape" data-node-id="I670:158196;876:3599;3262:830">
        <img alt="" className="absolute block inset-0 max-w-none size-full" src={imgShape} />
      </div>
    </div>
  );
}

Does it mean that Figma MCP works the best for React + Tailwind stack? Probably. Though my project is not using Tailwind, nor React, I do understand it's the most popular stack right now.

2, 3, 4. Prompts

I was surprised.

My initial thought was that Figma would return me just a raw JSON with data about the components. Ok, JSX. But prompts?

Let's look closer:

SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack and styling system.
1. Analyze the target codebase to identify: technology stack, styling approach, component patterns, and design tokens
2. Convert React syntax to the target framework/library
3. Transform all Tailwind classes to the target styling system while preserving exact visual design
4. Follow the project's existing patterns and conventions
DO NOT install any Tailwind as a dependency unless the user instructs you to do so.

Node ids have been added to the code as data attributes, e.g. `data-node-id="1:2"`.

Image assets are stored on a localhost server. Clients can use these images directly in code as a way to view the image assets the same way they would other remote servers. Images and SVGs will be stored as constants, e.g. const image = 'http://localhost:3845/assets/10c13ac1a228a365cb98a0064b1d5afbc84887b2.png' These constants will be used in the code as the source for the image, e.g. <img src={image} /> This is true for both images and SVGs, so you can use the same approach for both types of assets.

IMPORTANT: After you call this tool, you MUST call get_screenshot to get a screenshot of the node for context.

That was a pretty big insight for me. So tools here are not just a convenient way to run some requests to some resources and work on the response, they can actually give back more instructions.

What if that were an instruction to push my company's repo to some other origin, or steal my personal data?

MCP responses can be treated as commands to LLM and they are prone to prompt injection.

---

That was a quick investigation of MCPs, to demystify a black box.

It's a pretty simple protocol of establishing a connection between a client and a server, which allows exchanging data and running certain server actions.

Super cool that we can have LLMs run them automatically and enhance productivity.

Though it comes with a price, if the MCP is not from some trusted source, I'd suggest to never run it. Do it in a sandbox env if you really need to.