Forem: Gianluca La Manna

Stop Looking at Documentation - If You Use an MCP Server

Gianluca La Manna — Wed, 18 Feb 2026 08:36:41 +0000

Welcome back to the Antigravity: What Others Don’t Tell You series. Today, we’re looking at how to integrate an MCP server into Antigravity and just how useful it can be.

Stop switching back and forth between your editor and your browser. If you are still copying and pasting snippets of documentation to give context to your AI, you are wasting valuable time.

In this article, we’ll explore how to integrate the Model Context Protocol (MCP) into Antigravity to transform your workflow, using the TanStack ecosystem as a prime example.

What is MCP and Why Do You Need It?

The Model Context Protocol (MCP) is an open standard that allows AI applications (like Antigravity or Claude Desktop) to connect directly to external data sources.
You can find more detailed information in my full article here

Instead of hoping the LLM "knows" the latest version of a library, MCP enables the AI to read updated documentation in real-time. This eliminates hallucinations and ensures the code generated follows the most recent API changes.

Manual Configuration: The TanStack Case

TanStack libraries (Query, Router, Table) evolve rapidly. To ensure Antigravity always has the latest context, you can hook the official TanStack MCP server directly into your settings.

1. Locate your Configuration File

Open your Antigravity settings. You can usually find this via the gear icon or by triggering the Manage MCP Servers command. You will need to add the server to your configuration JSON.

2. Add the JSON Snippet

Here is how to configure the TanStack MCP server using npx. Make sure your PATH matches your local environment (especially if you use NVM):

{
  "mcpServers": {
    "tanstack": {
      "command": "/opt/homebrew/bin/npx",
      "args": [
        "-y",
        "@tanstack/cli",
        "mcp"
      ],
      "env": {
        "PATH": "/opt/homebrew/bin:/usr/local/bin:/usr/bin:/bin:/Users/YOUR_USER/.nvm/versions/node/v20.11.1/bin"
      }
    }
  }
}

This configuration allows Antigravity to invoke the TanStack CLI as an "information oracle."

The "Low Effort" Method: The Antigravity Store

If you don't want to deal with JSON files and system paths, Antigravity offers a much more elegant solution: the Built-in Store.

Open the MCP Panel within Antigravity.
Browse the Store for available servers.
Search something.
Click Install.

Antigravity handles the installation and configuration automatically, making API definitions and code examples immediately available for chat context or autocompletion.

The Result: A Zero-Friction Workflow

Once the server is connected, you no longer need to write long prompts like "Please use the latest version of TanStack Query...".

You can simply ask:

"Execute an api call with tanstack following current documentation best practices."

The AI will query the MCP server, read the schemas, and return perfectly functional, up-to-date code.

It can search through MCP server documentation and look for specific versions.

Here the result

Conclusion

Integrating MCP into Antigravity isn't just adding another plugin; it's a paradigm shift. Documentation becomes an active part of your development environment rather than a static document hidden in a browser tab.

See you 👋🏻

Antigravity: Beyond the Basics of AI Coding

Gianluca La Manna — Fri, 13 Feb 2026 08:20:12 +0000

Writing software with AI can be as simple as it is complex.

In this series that I called Antigravity: What Others Don’t Tell You, I want to explore concepts that are essential for our daily workflow, using Antigravity as our primary tool for agentic development.

We often think we can just write a medium-sized list of requirements, feed it to an AI, and get a perfect result. While this might work for simple solutions, it’s a bit like a junior developer from ten years ago that writing, copying, and pasting untested code that "just happens" to work.

Today, I want to show you how to manage development more efficiently by reusing patterns that actually work. I recently had the opportunity to take an agentic coding course at my company, and I’ve translated that knowledge into the Antigravity ecosystem. However, these principles are universal; you can apply them to any AI tool like Codex, Claude Code, or GitHub Copilot.

Antigravity

If you haven't installed Antigravity yet, you can do so via this link or by following the official Google documentation. Antigravity is essentially a VS Code-like IDE, integrated with advanced features Google has developed for us.

The standout feature is the integrated chat, sitting right next to your code. It’s not just a generic chat; it’s a contextualized chat. This brings us to a crucial topic: Context.

Google provides us with free models that we can use:

Gemini 3 Pro (high)
Gemini 3 Pro (low)
Gemini 3 Flash
Claude Sonnet 4.5
Claude Sonnet 4.5 (thinking)
Claude Opus 4.5 (thinking)
GPT-OSS

Obviously, these have usage limits and must be used intelligently depending on what we want to achieve, the speed required, and the quality of our data.
I asked Gemini to compare them and generate a table:

Model	Context Window	Ideal Use Case	Reasoning	Speed
Gemini 3 Pro (high)	2M - 10M	Science & Massive Repos	Maximum	Slow
Gemini 3 Pro (low)	2M - 10M	Debugging & Synthesis	Balanced	Medium
Gemini 3 Flash	1M	Automation & Chat	Minimum	Ultra-Fast
Claude Sonnet 4.5	200k+	Coding & Agents	High	Fast
Claude Sonnet 4.5 (thinking)	200k	Architecture & Logic Bugs	Extended	Slow
Claude Opus 4.5 (thinking)	200k	Strategy & Research	Frontier	Very Slow
GPT-OSS	Custom	Privacy & Local-first	Variable	Local

Note: These models have usage limits. Use them intelligently based on the required speed, quality, and complexity of your data.

Understanding Context

Context is the set of information we provide to a model alongside our query to get a relevant answer.

Naturally, the larger the context, the longer it takes for the model to respond. It is best to minimize context whenever possible to ensure fast, coherent responses. A bloated context can lead to hallucinations, a phenomenon often called Lost in the Middle - where the LLM loses focus or gets confused by the volume of data.

How do I reduce context?

Some agents handle this automatically. Others use "compact" instructions to summarize previous history, as the more we chat, the more the context grows. This concept is called Tokenization.

A token can be a character, a word, or a part of a word (like -tion), depending on the model. For example, GPT-4, a model behind ChatGPT, breaks the phrase “I can’t wait to build AI applications” into nine tokens, as shown below

The JSON vs. Markdown Trick

A great way to understand how many tokens we are using is by using this tool tiktokenizer or a similar one.

Tiktokenizer shows us how many tokens we are using, but not how we could save them.
Suppose, for example, we have a JSON file

[
  {"id": 1, "status": "active", "label": "low_risk"},
  {"id": 2, "status": "pending", "label": "high_risk"}
]

This format counts as 44 tokens.

Convert to Markdown

By converting to .md (specifically tables or lists), you almost always save tokens because you eliminate the syntax overhead (braces and repeated keys).

Avoid "TOON" Formats

While newer compression formats like "Toon" offer significant token savings, they aren't always your best ally. LLMs are primarily trained on vast datasets of natural language and established standards. Moving away from these "standard" patterns in favor of niche formats can actually degrade the model's reasoning performance.

Tips and Tricks

As a final tip for this first installment of Antigravity: What others don't tell you, I highly recommend the Antigravity Cockpit extension. It provides an intuitive dashboard with infographics to monitor your remaining usage limits for each model.

See you in the next one! 👋🏻

Your AI Can Read Your .env File - Unless You Stop It Like This

Gianluca La Manna — Wed, 11 Feb 2026 14:49:26 +0000

Let’s be honest: giving an AI Agent access to our file system is incredibly convenient. It can write code, fix bugs, and analyze logs in an instant.

However, with great power comes great responsibility. If the AI decides (or is tricked via prompt injection) to read your .env file, your API keys, database passwords, and production secrets are potentially compromised. This remains a critical risk even if you use premium plans - which generally preserve data privacy compared to free tiers that use data for training - because the vulnerability lies in the execution access you've granted.

Let's look at how to implement a "read_hook" in Node.js to block the reading of these sensitive files.

The Problem: AI is Too Curious

AI agents typically operate by receiving instructions and parameters in JSON format. If a system tool allows the AI to read a file via a path parameter, the AI will simply attempt to execute that command if it deems it useful for the user's request.

The Solution: Intercepting the Request

The most effective approach is to insert a control middleware (a hook) between the output generated by the AI and the actual execution on your system.
Configure your hook based on the coding agent you are using.
Eg: Claude, Gemini

Let’s analyze this Node.js code snippet:

async function main() {
  const chunks = [];
  // 1. Read the input from standard input (stdin)
  for await (const chunk of process.stdin) {
    chunks.push(chunk);
  }

  const toolArgs = JSON.parse(Buffer.concat(chunks).toString());

  // 2. Extract the path the AI is trying to read
  const readPath = 
    toolArgs.tool_input?.file_path || toolArgs.tool_input?.path || "";

  // 3. Security Check: Prevent access to .env files
  if(readPath.includes('.env')) {
    console.error("SECURITY ERROR: You cannot read the .env file");
    process.exit(2); // Forced exit with error code
  }

  // If the check passes, proceed with the read operation...
}

Why This Approach Works

Fail-Fast: Instead of just returning a text error to the AI (which might try to bypass it with another prompt), the process terminates abruptly with process.exit(2).
Parameter Analysis: It doesn't matter if the AI calls the field file_path or simply path; the hook covers both common naming conventions.
Zero Trust: We don't rely on the "common sense" of the model or system prompts. We enforce a hard-coded rule at the operating system level.

Beyond Simple .env: Best Practices

Blocking just the .env string is a good start, but in a production environment, you should consider:

Whitelisting vs. Blacklisting: Instead of just banning .env files, allow the AI to read only from a specific folder (e.g., /src).
Path Normalization: Use path.resolve() to prevent the AI from using "dot notation" (../../.env) to climb out of the intended directory and bypass checks
Isolated Environments: Whenever possible, run the AI inside a Docker container or a sandbox with restricted file permissions.

Conclusion

Integrating AI tools into our workflows is the future, but security must not be an afterthought. A simple script of just a few lines can be the difference between a productive day and a catastrophic data breach.

i18n Check: Tips & Tricks for Comparing Localization Files

Gianluca La Manna — Tue, 21 Oct 2025 11:00:00 +0000

How many times have I forgotten to update my localization JSON file when I added a new key?

We are human beings, and we can do wrong above all when we write something like code.

I wanted to search for something that can give me more safety when I add a new key to the localization files.

My first idea was to write a node script to check all JSON files in the locales dir, but then I found this useful plugin:

18n-Check

Yes, I know: It doesn't have a lot of stars on GitHub, but I tried it and it works perfectly.

Why do we have to recreate the wheel?

Let's dive into this plugin.

Installation and configuration

You can see all the documentation inside the Readme file on the GitHub repo.

here to install the plugin I used the pnpm command

pnpm add --save-dev @lingual/i18n-check

Then we have to create a command in package.json like this:

"i18n:check": "npx i18n-check --locales public/locales -s en -f i18next && i18n-check --locales public/locales -s it -f i18next"

here I'm calling i18n-check with --locales option. With this you define which folder or multiple folders you want to run the i18n checks against.

My structure files are this:

.
└── public/
    └── locales/
        ├── it/
        │   ├── pricing.json
        │   └── external.json
        └── en/
            ├── pricing.json
            └── external.json

I used the && operator because i18n-check wants a target to compare the files from to start. In my case, I want to have every file notify me about missing keys or invalid translations.

So if you use husky precommit you can configure that with this command:

pnpm run i18n:check

if you try to remove any keys from any files and launch the command you can see this:

So with this, every change (add or remove) in the JSON localization file will be notified, and we have to update it.

Thanks for the reading. See ya ✨

Tailwind CSS - tips & tricks: ordering classes

Gianluca La Manna — Sun, 19 Oct 2025 04:00:00 +0000

These days, I'm using this CSS framework almost every day. One of the things that was difficult for me was the order of the classes when we write something like this:

<div class="sm:grid-cols-1 gap-3 col-start-6 grid md:grid-cols-1 lg:grid-cols-3 col-span-6">

In my mind, I have to find a rule for these orders. 🤯

The result is the same on the browser, but if we have clean and linear code, we can improve the comprehensibility, and we will be faster to understand it.

After some research, I found that there exists an official rule from tailwindcss

Rules

Any classes in the base layer must be sorted first, followed by classes in the components layer, and then finally classes in the utilities layer.

<!-- `container` is a component so it comes first -->
<div class="container mx-auto px-6">
  <!-- ... -->
</div>

any classes that override other classes always appear later in the class list:

- <div class="pt-2 p-4"> <!-- before -->
+ <div class="p-4 pt-2"> <!-- after -->
    <!-- ... -->
  </div>
</div>

Modifiers like hover: and focus: are grouped together and sorted after any plain utilities:

- <div class="hover:opacity-75 opacity-50 hover:scale-150 scale-125"> <!-- before -->
+ <div class="scale-125 opacity-50 hover:scale-150 hover:opacity-75"> <!-- after -->
    <!-- ... -->
  </div>
</div>

Responsive modifiers like md: and lg: are grouped together at the end in the same order they're configured in your theme — which is smallest to largest by default:

- <div class="lg:grid-cols-4 grid sm:grid-cols-3 grid-cols-2">  <!-- before -->
+ <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4">  <!-- after -->
    <!-- ... -->
  </div>
</div>

Any custom classes that don't come from Tailwind plugins (like classes for targeting a third-party library) must always be sorted to the front, so it's easy to see when an element is using them:

- <div class="p-3 shadow-xl select2-dropdown"> <!-- before -->
+ <div class="select2-dropdown p-3 shadow-xl"> <!-- after -->
    <!-- ... -->
  </div>
</div>

That's a lot of rules! 🤯

We have the solution

Yes, in fact I found an official plugins: Prettier Plugins for Tailwind

This will do it for us.

We can use this command:

npm install -D prettier prettier-plugin-tailwindcss

And then add the plugin to your Prettier configuration file:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

That's all, guys. See you next time 👋🏻

Stop drifting around in the dark when using "any" and "unknown" TypeScript types

Gianluca La Manna — Mon, 13 Oct 2025 15:28:38 +0000

I often see junior developers overuse the any type. They also rarely use unknown, or don't use it at all.

We define the Differences

The main difference between these two types is:

any: Can be anything
unknown: It's similar, but you must check or assert the type before using it

So, the question is: When should we use these types?

"Use" any

Probably an answer we already have: Don't use any type or avoid using it as much as possible.

This is because if we use any, we're saying: this object can be anything:

 const person: any

Imagine if you want to access a single prop, for example, lastname
We will do something like this:

const lastname =  person.lastname

At runtime, if we are lucky, we won't have any problems. But this means that if the lastname props do not exist, we have a runtime error, probably in production.

We want to avoid it. It's the same if we use vanilla JS, because we don't define a type.

Use unkwnown

But when we have to use unknown?

let b: unknown = 42;

let c: number = b; // ❌ Error

if (typeof b === "number") {
  let c: number = b; // ✅ ok
}

Another right case is when we want to handle an error

try {
 ...something
} catch (err: unknown) { }

Sometimes we don't know the type of error, and here we use unknown
In the above example:

try {
  ...something
} catch (err: unknown) { 
  if(err instanceof Error) {
    console.error(err)
}

Or when you want to do this (here it's allowed):

const person: any

person.trim()

while here is not allowed:

const person: unknown

person.trim() // ❌ Error

instead, you have to do:

const person: unknown

if(typeof person === 'string') person.trim()

That's all. Bye guy 👋🏻

Unlock the Power of TypeScript’s infer Keyword

Gianluca La Manna — Fri, 10 Oct 2025 10:23:14 +0000

These days, I want to deep dive into TypeScript's type system. By mastering this, you can become a better developer.

At the end of this article, there will be a tip to improve it.

So, take this example:

Implement a generic First that takes an Array T and returns its first element’s type.

For example:

type arr1 = ['a', 'b', 'c']
type arr2 = [3, 2, 1]

type head1 = First<arr1> // expected to be 'a'
type head2 = First<arr2> // expected to be 3

A good way to do it is using Typescript's infer keyword.

You use the infer keyword inside a conditional type

You can imagine this as:
Hey infer, guess the type and give it a name that I can use later.

Well, to solve the previous example, you can use infer like this:

type First<T extends unknown[]> = T extends [infer U, ...unknown[]] ? U : never

Here we say:

The First type accepts a generic T that extends an unknown array.
Then it checks if T matches a tuple whose first element can be inferred as U.
If it does, it returns U (the type of the first element), otherwise it returns never.

So we can use the First type like this

type arr2 = [3, 2, 1]
type head2 = First<arr2> // 3

Now, my wise promise ✨
If you want to become a stronger developer you have to practice on this.

Here is an excellent repo to do it.

Thanks. See you next time 👋🏻

From Static Pages to Interactive Spaces: Embedding Now4Real Chat

Gianluca La Manna — Tue, 23 Sep 2025 10:37:02 +0000

Today I want to show a cool thing. Have you never thought to chat instantly inside a specific web page with other people who share the same interest?

Now4Real is an excellent solution for that.

We at Claranet Italy have made this integration with a web management software: Logica by Sinapsi SB.

Now I show how we did it and how simple it is to integrate this tool into every web page.

First of all, we have to create an account on https://now4real.com/, and then we will have to access the dashboard like this:

As you can see in the bottom right corner, we have the chat icon, and this keeps track of the people, in that specific moment, who are showing the same page as you.

Inside it, we can chat with other people and share knowledge about the page, or share the same interests or something like that.

Let's move to the practice.

From the dashboard, we have to add a new site.

Important: Here we have to use a public domain.

Now, inside index.html of our application, we have to add this line of code:

<meta name="now4real-site-verification" content="XXXXX"/>

where XXXXX is a key provided by now4Real when you add the new site.

Commit and publish this modification to link the site with now4real.

Then we can manage the JWT authentication, because we want to use a logged-in user inside of Logica. So, if I log on to Logica with the Angelo user, I want to use the chat with the same user.

To do this, go to the menu dashboard under the Authentication menu item and generate a shared secret

As you can see, you have a lot of configuration on the side of the menu. We will show something later.

Now we need a JWT signed with the algorithm HS256, and use it inside the now4real object, like this:

window.now4real = window.now4real || {};

now4real.config = {
target: "api+widget",
scope: "page",
custom_auth: {
    enabled: true,
    jwt,
},
page_context: getPageContextFromHash()
};

Here are some considerations:

target is api+widget by now4real documentation to istantiate the service
scope, we want to use this to enable different chats per page.
custom_auth to use the authentication inside the chat
page_contextto use the discriminant per page, for example an id.

To remove the chat from some pages, currently we can remove the widget from the DOM like this:

const removeNow4RealFromDom = () => {
    document.getElementById('NOW4REAL')?.remove();
    const SCRIPT_REGEX = /.*now4real\.(min\.)?js/;
    document.querySelectorAll('script').forEach((script) => {
    const src = script.getAttribute('src');

    if (src && SCRIPT_REGEX.test(src)) {
        script.remove();
        console.log(`Removed Now4Real script: ${src}`);
    }

    });

    isInitialized = false;
    delete window.now4real;
};

Maybe we will have a new api from Now4real to manage this specific case.

Cool things
From the dashboard, we are able to manage the styles and position of our chat component

And you can publish instantly the modifications.

Or manage the messages

with message duration, or block specific words or offensive language

Thanks for reading. See you next time 👋🏻

Build Your MCP Server in Just 5 Minutes using Vibe Coding with Kiro

Gianluca La Manna — Sat, 06 Sep 2025 13:06:41 +0000

Hey folks, today I want to show you how to create an MCP server with special assistants: Kiro and Sonnet Claude. ✨

But what is this new term? MCP. Is it a buzzword? I don't know, but recently it is has been very discussed recently.

So, let's dive into the MCP concept.

MCP: a new protocol by Anthropic

I'll start by showing right away the schema of the MCP Protocol:

Simple: with this protocol, we can connect our AI applications to the world.

We can imagine this protocol like a USB port to connect the LLM to other services, like Gmail, Notion, Obsidian, Drive or more simply a DB or API service, with a unique standard. This is the work done by Anthropic.

Now let's zoom in on this diagram 🔭

As you can see, the MCP is a layer that simplifies the communication between LLM and another service.

We define a real scenario.

In this last year, I've focused on my diet and gym results. So I want to know what I eat and the nutrients in food.

There are a ton of mobile applications to search for foods and get more info about them, but I'd like to search with more flexibility using natural language, for example, in a specific dataset when I'm using an AI client like Claude. The MCP protocol is the right way. We can ask, for example:
"I ate two eggs Bio Carrefour", and I'll expect a response with nutritional information.
Great, but how?

Let's move on to practice.

Use Vibe coding to create our MCP Server

As the literature says, we have to use the code vibe formula

$Vibe = (Project Soul + Your Intuition + Model's Character)$

If you are curious, read this book by David Gillette.

The first argument is What and Why of our project.

The second is our unique contribution as a human creators. It's our gut feeling, our creative spark, our accumulated experience.

The third is about understanding the specific AI model we are working with.

With this information, we can use Kiro's agent to address it to create our MCP Server.

Here is an example of text:

1) Project Soul — What & Why

Goal: build an MCP Server that communicates with the dataset and APIs of Open Food Facts. The server should receive requests from an MCP Client and fetch food-related information directly from the official API (ingredients, nutrition facts, allergens, categories, brands), never generating or hallucinating data.

Why: this enables AI systems to integrate verifiable, real-world food data in a reliable and traceable way.

Expected outcome: an MCP implementation with well-defined tools that can search, filter, and retrieve products, always returning source: "openfoodfacts:<endpoint>".



2) Your Intuition — Human Spark

Keep the architecture clean and modular: separate the MCP protocol layer from the connectors to Open Food Facts.

Define strict JSON Schemas for inputs and outputs of all tools so Claude Sonnet can safely orchestrate the calls.

Add support for language localisation (lang), since Open Food Facts is multilingual.

Implement lightweight caching to avoid redundant API requests.

Provide clear error messages, always including a hint field to guide the client in correcting invalid inputs.

Code style requirement:

Do not use class constructors.

Use const declarations and arrow functions for all functions, exports, and callbacks.

Prefer functional composition over OOP patterns.

Use Typescript for entire project.



3) Model’s Character — Who You Are

Model to use: Claude Sonnet.

Character traits:

excels at producing structured, logical, and safe outputs;

prefers explicit schemas and typed definitions;

skilled at summarising without losing precision;

acts as a connector to the API, not as a data source.

Constraint: every output must reference the Open Food Facts source (source).

We can use this prompt on Kiro, and then we will have our MCP Server that gets the information from Open Food Facts via API (in this case, not authenticated)

Client MCP

Now we need the client MCP to communicate with the Server.
We have to create a .kiro folder in our project and inside define a file called mcp.json with this content

{
  "mcpServers": {
    "calormeal": {
      "command": "node",
      "args": ["/Users/myUser/projects/new-calormeal/build/index.js"],
      "disabled": false,
      "autoApprove": ["search_products", "get_product", "search_by_nutrition", "search_by_category"]
    }
  }
}

That's all.

Let's try

Now we can ask our server something, like this

I ate 2 organic eggs from Carrefour. How much protein did I consume?

This is the result

As you can see, the response does not come from Claude's model, but our server is called, which in turn calls the Open Food Facts API and returns the information according to the structure we have defined.

The code

Let's see the code generated

We have an openfoodfacts.ts file that defines a direct interface with the openfoodfacts API.
We have for example, the searchProduct function.

export const searchProducts = async (input: SearchProductsInput): Promise<ProductListResponse | ErrorResponse> => {
  const cacheKey = `search:${JSON.stringify(input)}`;
  const cached = getCached<ProductListResponse>(cacheKey);
  if (cached) return cached;

  try {
    const params = new URLSearchParams({
      search_terms: input.query,
      page: input.page?.toString() || '1',
      page_size: input.page_size?.toString() || '20',
      sort_by: input.sort_by || 'popularity',
      json: '1'
    });

    const url = `https://${input.lang || 'world'}.openfoodfacts.org/cgi/search.pl?${params}`;
    const response = await fetch(url);

    if (!response.ok) {
      return createError(
        `API request failed with status ${response.status}`,
        'Check your network connection and try again with a simpler query'
      );
    }

    const data = await response.json() as any;

    const result: ProductListResponse = {
      products: (data.products || []).map(normalizeProduct),
      count: data.count || 0,
      page: input.page || 1,
      page_size: input.page_size || 20,
      source: 'openfoodfacts'
    };

    setCache(cacheKey, result);
    return result;

  } catch (error) {
    return createError(
      `Network error: ${error instanceof Error ? error.message : 'Unknown error'}`,
      'Verify your internet connection and ensure the query contains valid characters'
    );
  }
};

The server.ts defines an MCP server, and there are 4 registered tools:

search_products - General search by name/brand
get_product - Product details via barcode
search_by_nutrition - Filter by nutritional values
search_by_category - Search by food category

and then

ListToolsRequest - Returns a list of available tools
CallToolRequest - Runs the requested tool with input validation

Here we define the Server

import { Server } from '@modelcontextprotocol/sdk/server/index.js';

const server = new Server(
  {
    name: 'openfoodfacts-mcp-server',
    version: '1.0.0',
  },
  {
    capabilities: {
      tools: {},
    },
  }
);

and then we define the tools for each action like this:

const tools = [
  {
    name: 'search_products',
    description: 'Search for food products by name, brand, or keywords in Open Food Facts database',
    inputSchema: {
      type: 'object',
      properties: {
        query: {
          type: 'string',
          description: 'Search query (product name, brand, keywords)',
          minLength: 1
        },
        lang: {
          type: 'string',
          description: 'Language code (en, fr, es, de, etc.)',
          default: 'en'
        },
        page: {
          type: 'number',
          description: 'Page number for pagination',
          minimum: 1,
          default: 1
        },
        page_size: {
          type: 'number',
          description: 'Number of results per page',
          minimum: 1,
          maximum: 100,
          default: 20
        },
        sort_by: {
          type: 'string',
          enum: ['product_name', 'popularity', 'created_t'],
          description: 'Sort results by field',
          default: 'popularity'
        }
      },
      required: ['query']
    }
  },
/* [other tools] */

Here, the setRequestHandler associates a handler function with a specific request type:

Pattern matching – When a request matches the schema, the function is executed
Two registered handlers:

ListToolsRequestSchema → returns the list of available tools
CallToolRequestSchema → executes a specific tool

server.setRequestHandler(ListToolsRequestSchema, async () => ({
  tools
}));

server.setRequestHandler(CallToolRequestSchema, async (request) => {
  const { name, arguments: args } = request.params;

  try {
    switch (name) {
      case 'search_products': {
        const input = SearchProductsInputSchema.parse(args);
        const result = await searchProducts(input);
        return {
          content: [
            {
              type: 'text',
              text: JSON.stringify(result, null, 2)
            }
          ]
        };
      }

...
 /* [other cases] */

and finally run the server

export const runServer = async (): Promise<void> => {
  const transport = new StdioServerTransport();
  await server.connect(transport);
  console.error('Open Food Facts MCP Server running on stdio');
};

Use Claude Desktop

Also, you can use the Claude desktop. Just configure this file claude_desktop_config.json

Then run the application, and under settings, you can find the MCP

and the ours functions

The result is

You can find all the code on my repo.

Remeber

You can find a lot of servers here (official and unofficial), but if you want to create one from zero to integrate your private service or for another reason, you can follow the previous steps for a good starter.

Thanks for the reading, and see you soon 👋🏻.

From a Brown Field to One in Bloom: Revitalizing AngularJS with React

Gianluca La Manna — Tue, 11 Feb 2025 16:34:49 +0000

If you have worked at least once on a brownfield project, you know how difficult and frustrating it can be.

You can use old approaches, but you're probably writing code without the Typescript superset. Furthermore, you are losing all the functionalities that a new framework has, which compromises the velocity and the devEx.

We can write the entire solution with another framework. Probably, this won't be a good idea, basically for two reasons:

Time 🕰️
Costs 💸

The good news is that you can write the new features with the latest framework while keeping the old features. If you have good craftsmanship, you will be able to use the strangler fig pattern by Martin Fowler, promoting a smooth and clean transition.

From brownfield to one in bloom 🌸, but how?

AngularJS issues

We take the example of AngularJS.

The most significant risk of staying on AngularJS is safety, given that Google doesn't provide new security patches.

Another big issue is the two-way-data-binding. Each change in UI is reflected in the model and vice versa.

Each state change synchronizes more variables, and the use of a digest cycle can slow the application.

The next example of how AngularJS makes you suffer is Dependency Injection 💉. In AngularJS, dependencies are injected by the name of an argument.

function MyController($scope, $state) { 
// … 
}

Here, the .toString() method is called, which extracts the argument names and then compares them with the already registered dependencies.
So, when you minify the code, it stops working.

Ultimately, we won't have TypeScript and all its advantages.

Perhaps we have enough points to think about writing with a new framework:

Safety
Two way data binding
DI
TS

Now, let's see how to integrate React into the AngularJS application.

Scaffolding React

The idea is to create a new folder in the AngularJS project's tree structure called app-new. This will be the entry point of our React application. Here, we can install the latest version of React. Preferably, we will install React with the Vite plugin.

Then, we will have a similar tree:

/
├── app
│   ├── assets
│   ├── modules
│   └── package.json
├── app-new
│   └── public
│       ├── src
│       └── package.json
├── assets
├── cypress
└── doc

As you can see, we have two package.json. One for app (AngularJS) and one for app-new (React)

Integration layer between two apps

We will create an Angular component that we will call into the routes.js file. Then, we will define a new route for this component.

 .state('react-home', {
        url: '/home',
        template: '<app-new-wrapper></app-new-wrapper>',
        data: { requiresAuth: true }
      })

Here, we can pass any props for this component.

Then, in the index.js Angular file, we should define a scope variable. This variable defines a base URL that will be used from React.

scope.NEW_APP_BASE_URL = 'http://localhost:3000';

The controller, instead, should be something like that:

(function () {
  const controller = function ($sce) {
    const ctrl = this;

    ctrl.$onInit = () => {
      ctrl.baseUrl = window.NEW_APP_BASE_URL;

      ctrl.url = $sce.trustAsResourceUrl(`${ctrl.baseUrl}/app-new/`);
    };
  };

  angular.module('libClient.common').component('appNewWrapper', {
    bindings: {
    },
    templateUrl: '/modules/common/component/appNewWrapper/appNewWrapper.html',
    controller: [
      '$sce',
      controller
    ]
  });
})();

and the view

<iframe name="iframe1" frameBorder="0" width="100%" height="100%" scrolling="no" src="{{$ctrl.url}}" allow="camera; microphone; display-capture; geolocation"></iframe>

Here's a little summary:

Generally, the iframe is not a good idea for several reasons. The basic idea is to use it only for the transition from Angular to React, then remove it. With iframe, if you have SEO on your website, you may be penalized by Google indexing and have a ranking problem, in addition to various security issues.

So, we will have 2 apps launched on different ports.

To call our React components inside the iframe, let's define them in our AppRouter with the correct url that will open the iframe.

const AppRouter = () => {
  return useRoutes([
    {
      path: '/home',
      element: <Home />
    },

    ...

Communication both frameworks

All right! Now we might ask ourselves a rather spontaneous question:

How can I communicate between a part of my app in angular and one in react or navigate through pages?

The answer? 🥁... : window.postMessage()

The window.postMessage() method safely enables cross-origin communication between a page and an iframe embedded within it

So, we create a function called goTo to navigate across the pages.

function goTo(destination: Destination, params?: NavigationParams): void {

    const {
        parent
    } = window

    parent.postMessage({
        type: 'navigation',
        state: destination,
        params: params ? params : null
    }, "*")
}

If we send a message from React to Angular, we use this

window.parent.postMessage(
        {
            type: 'UPDATE_ID',
            id: params.id.toString(),
        },
        '*'
    );

and then in the Angular controller

 window.addEventListener('message', (event) => {
  if (event.data?.type) {
    switch (event.data.type) {
      case 'UPDATE_ID':
        ctrl.id = event.data.id;
        break;
      }
    }
  });

Conclusion

With this approach, we can integrate React into AngularJS and revitalize it. A good next step would be to rewrite the old AngularJS controllers into React components. This way, we have a smooth transition from AngularJS to React. In the end, we can remove our app-new-wrapper and iframe and delete the old app folder. Then, we will have the whole project in the React framework ✨

See ya next time. 👋🏻

How to integrate Gravatar with custom fallback on React App and tanstack query

Gianluca La Manna — Wed, 15 May 2024 11:01:32 +0000

Recently at work I integrated the famous service to manage avatar: Gravatar
This service is very useful, because with only one configuration we can have the same avatar in different places.

So, let's go into the deep for integrating Gravatar on React application using tanstack query.

Prerequisites:

React
Tanstack query
Valibot

First of all, we analyze how to get avatar image from Gravatar. Here the official doc:
https://docs.gravatar.com/api/avatars/images/

We have a lot of configurations, but for us are importants 3 things:

Email Hash (MD5 or SHA256)
Default parameter
Json format

Email Hash

With this we can get the avatar image. Just call this url with email hashed

For example:

https://gravatar.com/avatar/27205e5c51cb03f862138b22bcb5dc20f94a342e744ff6df1b8dc8af3c865109

So we know that if we call this url we obtain the avatar. Cool.😎

But, if I don't have any account on Gravatar, how can manage this situation?

Let's see the default parameter

Default parameter

Gravatar offer differents parameters for our url. One of this is d=404

d means default and 404 is the famous error. So if we don't have any account on Gravatar the url will response with Not found.
So the url will be something like that:

https://gravatar.com/avatar/27205e5c51cb03f862138b22bcb5dc20f94a342e744ff6df1b8dc8af3c865109?d=404

Json format

If we want more information on this Gravatar account we can add the json extension on url. For example in my case I added this:

https://gravatar.com/avatar/27205e5c51cb03f862138b22bcb5dc20f94a342e744ff6df1b8dc8af3c865109.json?d=404

This will return an specific json structure with also the avatar url.
More info here: https://docs.gravatar.com/api/profiles/json/

Code

Let's look the code

Create schema validation with Valibot

import { array, object, string, type Output } from "valibot";

export const GravatarSchema = object({
  entry: array(
    object({
      photos: array(
        object({
          value: string(),
        })
      ),
    })
  ),
});

export type GravatarSchema = Output<typeof GravatarSchema>;

Make the api call with Tanstack Query

import { GravatarSchema } from '@/types';
import { gravatarClient } from '@/utils';

export const getAvatar = async (emailHash: string) =>
    gravatarClient.get(`/${emailHash}.json?d=404`, GravatarSchema);

Here we can use the md5 library to generate email hash or sha256 if we want be safe.

const { data, isError } = useQuery({
        queryKey: ['getAvatar', username],
        queryFn: () => getAvatar(md5(username))
    });

Check if we have an error and we show the fallback icon or we show the avatar.

<div className="mr-4">
  <Avatar>
    {!isError ? (
      <AvatarImage
        className="rounded-b-lg"
        src={data?.entry
          .flatMap((item) => item.photos.map((photo) => photo.value))
          .at(0)}
        alt={username}
      />
    ) : (
      <AvatarImage className="bg-gray p-1" src={UserIcon} alt="avatar-fallback" />
    )}
  </Avatar>
</div>

And that's it.

See you next time. ✨

Little mini tip: Github CLI

Gianluca La Manna — Tue, 13 Feb 2024 21:20:05 +0000

Hi guys👋,
I'll be super fast. What I learday?
Usage Github CLI to avoid context switch.

Install 🍺
brew install gh

Show PR list 🍭
gh pr list

Checkout on PR (#n)🥜
gh pr checkout 22

Approve PR 🪄
gh pr review --approve

See ya next time 💫