DEV Community: Rita

MCPs everywhere, wth is that?

Rita — Tue, 14 Apr 2026 17:43:38 +0000

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.

How to keep an element fixed at the bottom, even when the keyboard is open

Rita — Fri, 09 Aug 2024 23:28:12 +0000

Hey devs! I discovered this while working on my note-taking app.
Here's a post using my app.
Sharing the progress on X (Twitter)

Have you ever been surprised that CSS isn't working the way you expected?
That happened to me (again) when I set an element to be fixed at the bottom and then opened the keyboard on my iPhone.

<div className="fixed bottom-0" />

What I've seen is that element is not visible at all.
Because it's fixed. To the bottom. Behind the keyboard.

Seems like to fix the fixed we need some JS.

VisualViewport

There's a browser API with good support that can be used for these purposes: VisualViewport.
It returns the width and height of the actual visible viewport. MDN link to docs.
However, do your own investigation to see if it's supported for the versions you're targeting.

Math

Basically, we need to handle the position of the element with respect to the visual viewport, as well as the scroll position and the element's height. Let's do the math.

Also, since the math is much simpler this way, it makes sense to use the top parameter instead of the bottom.

top = viewport height + scroll - element height

Implementation

I'll use React. For any other framework, you can just copy the content of the useEffect hook.

import { useEffect, useState } from 'react';
import classNames from 'classnames';
import { useDebounce } from 'use-debounce';

const elementHeight = 55; // elem. height in pixels
// It's also a good idea to calculate it dynamically via ref

export const FixedBlock = () => {
  // top postion -> the most important math result goes here
  const [top, setTop] = useState(0);

  useEffect(() => {
    function resizeHandler() {
      // viewport height
      const viewportHeight = window.visualViewport?.height ?? 0;
      // math
      setTop(viewportHeight + window.scrollY - elementHeight)
    }

    // run first time to initialize 
    resizeHandler();

    // subscribe to events which affect scroll, or viewport position
    window.visualViewport?.addEventListener('resize', resizeHandler);
    window.visualViewport?.addEventListener('scroll', resizeHandler);
    window?.addEventListener('touchmove', resizeHandler);

    // unsubscribe
    return () => {
      window.visualViewport?.removeEventListener('resize', resizeHandler);
      window.visualViewport?.removeEventListener('scroll', resizeHandler);
      window?.removeEventListener('touchmove', resizeHandler);
    };
  }, [debouncedScroll]);

  return (
    <>
      <div
        className={classNames(
          'absolute left-0 top-0', // <-- attention, it's absolute
          top === 0 && 'hidden'    // while calculating, we don't need to show it 
        )}
        style={{ transform: `translateY(${debouncedTop}px)` }}
      >
        I am fixed
      </div>
    </>
  );
};

Final results

I also needed to add some animations and hide my block on scroll, but you don't have to do that, and it will always be visible.

Yesterday, I released something on Hacker News for the first time ever. Lesson learned.

Rita — Wed, 07 Aug 2024 08:37:18 +0000

I've been working on my note-taking app with Excalidraw sketches for the past two weeks. I set a boundary for myself: I had only two weeks to work on it, then I had to stop and release it somewhere, even though I didn't know where. I had no plans to make a ton of money; I just wanted to have a project like this for myself and to get a feel for how solopreneurship works.

First, huge kudos to Marc Lou for his post: How to launch a startup on Hacker News. I didn't even know that I should name my post in a specific way. To launch there, you need to start the title of the post with Show HN. It also seems like HN users prefer short, straight-to-the-point titles.

One insight I gained is that people are not very happy about sharing their emails or going through a sign-up process. This wasn't obvious to me until I saw a video review from one user who basically said, "sorry, but no" after seeing the login screen. Lesson learned: I'll create demo pages for all my future projects.

What lessons have you learned from launching your side projects?

Link to the launch post, if you're curious

I'm developing a minimalistic note-taking web app with custom widgets. Can you suggest any widgets you would like to see?

Rita — Sat, 03 Aug 2024 19:47:41 +0000

Hi everyone! I'm currently working on a note-taking app. The idea is to add the ability to insert cool, useful widgets directly into the notes. I've already added a must-have feature for me: drawing with Excalidraw.

Another feature I'm considering is a habit tracker in a GitHub history-like style.

Is there anything you would love to see in the app that would make you consider using it?

Share code between React Native and React Web

Rita — Wed, 14 Dec 2022 22:55:16 +0000

This article explains a coexisting of react native and react web apps with similar to monorepo workspaces behavior, but without sharing node_modules dependencies.

All web workspaces remain workspaces, mobile just acts like workspace.

I've had an existing huge web monorepo. Yarn's nohoist setup, or editing metro configuration wasn't working for me because this monorepo contains a lot of dependencies incompatible with react native. But it might work for you and might be a better solution.

TL;DR

You need to update metro config to handle sources outside of react native project.
Setup mobile project's babel config with aliases to shared folders.
Enjoy the magic ✨

Minimal working example [repo]

This article expects that you know how to create yarn workspaces monorepo. If not, please, read docs here.

Also, I have example repo with mobile and web sharing some code.

1. Create folder which needs to be shared

Let's say, we have our workspaces in the folder projects, like this:

├── projects
│   ├── web
│   └── ...  (means here can be lots of files)
├── package.json
...

Add a new workspace, which will contain shared files for both mobile and web.

  ├── projects
+ |   ├── shared
+ |   |   ├── src
+ |   |   ├── index.js
+ |   |   └── package.json
  │   ├── web
  │   └── ...
  ├── package.json
...

// package.json
{
  "name": "shared",
  "scripts": {
    ...
  },
  "dependencies": {
    ...
  }
}

// index.js
export { sayHello } from './src/sayHello'

// src/sayHello.js
export function sayHello() {
  return 'Hello world!';
}

2. Add `shared` to other workspaces

Now we need to add our shared folder into package.json files of other workspaces.

// web/package.json

{
  "name": "web",
  "scripts": {
    ...
  },
  "dependencies": {
+   "shared": "*" 
    ...
  }
}

and same of all other workspaces, where we want to use shared.
Then, to let yarn know what we did, run yarn install or just yarn.

Now we can do something like this:

// projects/web/src/somefile.ts

import { sayHello } from "shared";

sayHello();

3. Create react native application

React Native setup guide does a better job at explaining how to set up a new mobile app, or maybe you have your existing one. I'll skip this part, if you're not sure how to do this, docs are here.

You need to create a mobile app inside projects folder like this:

  └── projects
      ├── shared
      |   ├── src
      |   ├── index.ts
      |   └── package.json
      ├── web
+     └── mobile
+         |   ├── src
+         |   ...
+         ├── metro.config.js
+         ├── babel.config.js
+         └── package.json
...

And now the most important part.
We need to tell the metro where to find source files. If we don't do that, it'll only look inside the mobile folder.

const path = require("path");

const projectRoot = __dirname;

// store path to workspace root, in our case, one level above /projects
const workspaceRoot = path.resolve(projectRoot, "../../");

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },

  // watch not only our mobile folder, but also root's folders
  // this will include @common
  watchFolders: [path.resolve(__dirname, workspaceRoot)],
  resolver: {
    nodeModulesPaths: [
      // Tell metro to resolve modules in /mobile folder
      // and if not found, then try to find modules in workspace
      path.resolve(projectRoot, "node_modules"),
      path.resolve(workspaceRoot, "node_modules"),
    ],
    // And to make thing above work:
    disableHierarchicalLookup: true,
  },
};

So what happens above:

we tell metro to look for files everywhere (meaning in root dir)
resolve node_modules from workspace root as well.

Second part is needed, because at some point shared code will use some packages, and they will be in root's node_modules

Okay, now metro sees codes from the shared folder, how to import them into a mobile project?

4. Import files from `shared` into mobile

Remember how we imported it on the web?

import { sayHello } from "shared";

It is possible, because shared is a workspace. It's like having yet another node module.

But mobile doesn't treat it as a workspace, we will import files directly. And to have similar experience as in web, we can use babel aliases:

yarn add -D babel-plugin-module-resolver

then

// mobile/babel.config.js
module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    [
      "module-resolver",
      {
        root: ["./"],
        alias: {
          "shared": "../shared", // needed alias
        },
      },
    ],
  ],
};

And now we can do imports like this in mobile as well:

import { sayHello } from "shared";

At this point you'll be able to run mobile and web, and see how changes in shared code reflect on both.

I also recommend to add this line to root package.json, to have mobile packages installed from yarn command:

{
  "scripts": {
+   "postinstall": "cd ./projects/mobile && yarn"
  }
}