Guida alle MCP Apps

Guida alle MCP Apps

Portare Capacità UI nei Client MCP

Indice Guida alle MCP Apps

1. Introduzione alle MCP Apps
2. Architettura e Funzionamento
3. Perché Utilizzare le MCP Apps
4. Le App API
5. Il Modello di Sicurezza
6. Il Futuro degli Agentic UI Frameworks
7. Casi d’Uso Pratici con Esempi di Codice
8. Formazione Continua e AI Generativa

1. Introduzione alle MCP Apps

Le MCP Apps rappresentano la prima estensione ufficiale del Model Context Protocol (MCP), uno standard aperto sviluppato da Anthropic per connettere Large Language Models (LLM) a strumenti e sorgenti dati esterne. Annunciate ufficialmente a gennaio 2026, le MCP Apps introducono una capacità rivoluzionaria: consentire ai tool di restituire interfacce UI interattive che si renderizzano direttamente all’interno della conversazione con l’AI.

Fino ad oggi, gli strumenti MCP potevano restituire solo testo, immagini o dati strutturati. Con le MCP Apps, è possibile creare dashboard, form, visualizzazioni di dati, workflow multi-step e molto altro, tutto integrato nel contesto conversazionale. Questo elimina la necessità di passare continuamente tra diverse interfacce o tab del browser, mantenendo l’utente focalizzato sul flusso di lavoro.

Le MCP Apps sono già supportate da client come Claude (web e desktop), ChatGPT, Visual Studio Code Insiders, Goose e altri, permettendo agli sviluppatori di creare esperienze interattive che funzionano su più piattaforme senza scrivere codice client-specific.

2. Architettura e Funzionamento – Guida alle MCP Apps

L’architettura delle MCP Apps si basa su due primitive fondamentali del protocollo MCP:

2.1 Tool con Metadati UI

I tool MCP possono includere un campo _meta.ui.resourceUri nella loro descrizione, che punta a una risorsa UI identificata dallo schema ui://. Questa risorsa contiene l’HTML bundled con JavaScript e CSS necessari per renderizzare l’interfaccia.

2.2 UI Resources

Le risorse UI sono servite dal server MCP tramite lo schema ui:// e contengono pagine HTML complete. Queste risorse vengono fetchate dal client host e renderizzate in un iframe sandboxed per garantire l’isolamento di sicurezza.

Il flusso di funzionamento è il seguente:

1. Il LLM decide di chiamare un tool che supporta le MCP Apps
2. L’host può precaricare la risorsa UI prima ancora che il tool venga chiamato
3. L’host fetcha la risorsa UI dal server
4. L’HTML viene renderizzato in un iframe sandboxed
5. La comunicazione bidirezionale avviene tramite JSON-RPC su postMessage

Questo approccio mantiene l’app isolata dal contesto del client host, garantendo sicurezza senza compromettere la funzionalità.

3. Perché Utilizzare le MCP Apps

Le MCP Apps colmano il gap tra ciò che i tool possono fare e ciò che gli utenti possono vedere. Consideriamo un tool che interroga un database: può restituire centinaia di righe di dati. Il modello può riassumerle, ma gli utenti spesso vogliono esplorare: ordinare per colonna, filtrare per intervallo di date, o approfondire un record specifico. Con risposte testuali, ogni interazione richiede un nuovo prompt. Le MCP Apps rendono queste operazioni immediate e naturali.

I principali vantaggi sono:

• Preservazione del contesto: l’app vive all’interno della conversazione, eliminando la necessità di cambiare tab o perdere il filo del discorso
• Flusso dati bidirezionale: l’app può chiamare tool sul server MCP e l’host può inviare nuovi risultati all’app
• Integrazione con le capacità dell’host: l’app può delegare azioni all’host che può invocare le capacità già connesse dall’utente
• Garanzie di sicurezza: le MCP Apps vengono eseguite in un iframe sandboxed controllato dall’host, impedendo accessi non autorizzati

4. Le App API – Guida alle MCP Apps

Per costruire nuove MCP Apps, gli sviluppatori possono utilizzare il package @modelcontextprotocol/ext-apps, che fornisce una classe App per la comunicazione UI-to-host. Questa API astrae la complessità del protocollo JSON-RPC su postMessage, rendendo semplice la gestione delle interazioni.

Le funzionalità principali dell’API includono:

• app.connect(): stabilisce la comunicazione con l’host
• app.ontoolresult: callback che viene attivato quando l’host invia un risultato del tool
• app.callServerTool(): permette all’app di chiamare proattivamente tool sul server
• app.updateModelContext(): aggiorna il contesto del modello con dati strutturati dall’app

Poiché le app vengono eseguite all’interno del client, possono anche loggare eventi per debugging, aprire link nel browser dell’utente, inviare messaggi di follow-up per guidare la conversazione, o aggiornare silenziosamente il contesto del modello per utilizzi futuri. Tutto questo avviene su postMessage standard, quindi non si è vincolati a nessun framework specifico.

5. Il Modello di Sicurezza

Eseguire UI da server MCP significa eseguire codice non scritto direttamente all’interno dell’host MCP. Le MCP Apps gestiscono questo attraverso molteplici livelli di sicurezza:

5.1 Sandboxing degli Iframe

Tutti i contenuti UI vengono eseguiti in iframe sandboxed con permessi ristretti. L’attributo sandbox dell’iframe previene l’accesso al DOM della pagina parent, impedisce la lettura di cookie o local storage dell’host, blocca la navigazione della pagina parent e previene l’esecuzione di script nel contesto parent.

5.2 Template Pre-dichiarati

Gli host possono rivedere il contenuto HTML prima del rendering. Questo permette l’ispezione statica del codice prima che venga eseguito, creando una whitelist di risorse UI approvate.

5.3 Messaggi Auditable

Tutta la comunicazione UI-to-host passa attraverso JSON-RPC loggabile. Ogni chiamata di tool, ogni richiesta di aggiornamento del contesto, e ogni tentativo di interazione può essere registrato, monitorato e analizzato. Questo crea un audit trail completo delle azioni dell’app.

5.4 Consenso Utente

Gli host possono richiedere l’approvazione esplicita per le chiamate di tool iniziate dall’UI. Prima che un’app possa eseguire un’azione sensibile, l’utente deve confermare, garantendo che nessuna operazione avvenga senza consapevolezza.

Il modello di sicurezza MCP si basa anche su OAuth 2.1 per l’autenticazione e l’autorizzazione quando si lavora con server remoti. Questo approccio sostituisce le API key statiche con token a tempo limitato e con scope specifici, emessi da un authorization server affidabile. L’implementazione OAuth nelle MCP Apps utilizza PKCE (Proof Key for Code Exchange) per garantire la sicurezza anche con client pubblici che non possono memorizzare secret in modo sicuro.

6. Il Futuro degli Agentic UI Frameworks

Le MCP Apps standardizzano i pattern che MCP-UI e OpenAI Apps SDK hanno pionieristicamente esplorato. Questi progetti hanno dimostrato che le risorse UI si integrano naturalmente nell’ecosistema MCP, con aziende di tutte le dimensioni che adottano entrambi gli SDK per applicazioni in produzione.

MCP-UI continua a essere un framework di riferimento per gli sviluppatori, con il Client SDK raccomandato per gli host che vogliono adottare le MCP Apps. La community contribuisce attivamente alla specifica e se si sta già utilizzando MCP-UI, la migrazione all’estensione ufficiale è semplice quando si è pronti.

Il futuro degli agentic UI frameworks punta verso esperienze sempre più integrate dove gli agenti AI non sono più incorporati in singole app, creando esperienze frammentate e isolate. MCP inverte questo paradigma rendendo le app componenti pluggable all’interno degli agenti. Le MCP Apps estendono ulteriormente questo concetto portando le interfacce utente direttamente nell’esperienza dell’agente.

Questo significa che gli sviluppatori possono ora costruire esperienze interattive che si renderizzano direttamente nella conversazione: giochi, calendari, mappe, flussi di checkout. Il futuro si concentra sugli utenti che navigano attraverso un agente affidabile piuttosto che passare tra esperienze frammentate, e le MCP Apps supportano questa visione.

7. Casi d’Uso Pratici con Esempi di Codice

Vediamo due esempi pratici di implementazione di MCP Apps: uno per l’integrazione con servizi esterni (API weather) e uno per la visualizzazione dati interattiva.

7.1 Esempio 1: Integrazione API Weather (TypeScript)

Questo esempio mostra come creare un’app che interroga un’API meteo esterna e visualizza i dati in modo interattivo.

Lato Server (TypeScript):

// server.ts
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { registerAppTool, registerAppResource } from "@modelcontextprotocol/ext-apps/server";

const server = new McpServer({ name: "Weather MCP Server", version: "1.0.0" });
const resourceUri = "ui://weather/dashboard";

registerAppTool(server, "get-weather", {
  title: "Get Weather",
  description: "Mostra il meteo per una città",
  inputSchema: {
    type: "object",
    properties: { city: { type: "string" } },
    required: ["city"]
  },
  _meta: { ui: { resourceUri } }
}, async (args) => {
  const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${args.city}&appid=YOUR_KEY`);
  const data = await response.json();
  return {
    content: [{ type: "text", text: JSON.stringify(data) }]
  };
});

Lato Client UI (TypeScript):

// src/weather-app.ts
import { App } from "@modelcontextprotocol/ext-apps";

const app = new App({ name: "Weather Dashboard", version: "1.0.0" });
await app.connect();

app.ontoolresult = (result) => {
  const data = JSON.parse(result.content[0].text);
  document.getElementById('temp').textContent = `${data.main.temp}°K`;
  document.getElementById('desc').textContent = data.weather[0].description;
};

document.getElementById('refresh-btn').addEventListener('click', async () => {
  const city = document.getElementById('city-input').value;
  const result = await app.callServerTool({
    name: "get-weather",
    arguments: { city }
  });
  app.ontoolresult(result);
});

7.2 Esempio 2: Visualizzazione Dati Vendite (Python)

Questo esempio mostra come creare una dashboard interattiva per esplorare dati di vendita utilizzando Python sul lato server.

Lato Server (Python):

# server.py
from mcp.server import Server
from mcp.server.models import InitializationOptions
import mcp.types as types

server = Server("sales-dashboard")

@server.list_tools()
async def handle_list_tools() -> list[types.Tool]:
    return [
        types.Tool(
            name="analyze-sales",
            description="Analizza dati vendite per regione",
            inputSchema={
                "type": "object",
                "properties": {
                    "region": {"type": "string"},
                    "period": {"type": "string"}
                }
            },
            _meta={"ui": {"resourceUri": "ui://sales/dashboard"}}
        )
    ]

@server.call_tool()
async def handle_call_tool(name: str, arguments: dict) -> list[types.TextContent]:
    if name == "analyze-sales":
        # Query database o API per ottenere dati
        sales_data = get_sales_from_db(arguments["region"], arguments["period"])
        return [types.TextContent(type="text", text=json.dumps(sales_data))]

Lato Client UI (JavaScript):

// src/sales-dashboard.js
import { App } from "@modelcontextprotocol/ext-apps";
import Chart from 'chart.js/auto';

const app = new App({ name: "Sales Dashboard", version: "1.0.0" });
await app.connect();

let chart = null;

app.ontoolresult = (result) => {
  const salesData = JSON.parse(result.content[0].text);

  if (chart) chart.destroy();

  const ctx = document.getElementById('salesChart').getContext('2d');
  chart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: salesData.months,
      datasets: [{
        label: 'Vendite per Mese',
        data: salesData.values,
        backgroundColor: 'rgba(54, 162, 235, 0.5)'
      }]
    }
  });
};

Questi esempi dimostrano come le MCP Apps permettano di creare interfacce ricche mantenendo la separazione tra logica server e presentazione client. La comunicazione bidirezionale consente aggiornamenti real-time e interazioni fluide senza refresh della pagina.

8. Formazione Continua e AI Generativa

Nel panorama tecnologico in rapida evoluzione, la formazione continua del team di sviluppatori è fondamentale per restare aggiornati sia nel mondo IT che nel mondo dell’intelligenza artificiale. Le MCP Apps rappresentano solo l’ultima innovazione in un campo che si sta trasformando rapidamente, e le competenze necessarie per sfruttare queste tecnologie richiedono un aggiornamento costante.

Per le aziende che vogliono investire nella crescita professionale dei propri team, Innovaformazione offre corsi specializzati in AI Generativa, progettati specificamente per sviluppatori, AI engineer e professionisti IT. I corsi coprono le tecnologie più recenti, dai Large Language Models alle architetture agentiche, dai protocolli come MCP alle best practices di sicurezza e deployment.

Caratteristiche dei corsi:

• Modalità online in classe virtuale per massima flessibilità
• Attivazione su richiesta con calendari personalizzabili
• Contenuti aggiornati con le ultime tecnologie e framework
• Docenti esperti con esperienza pratica nel settore
• Approccio hands-on con esempi e progetti reali

Inoltre, Innovaformazione offre supporto nella progettazione e gestione dei finanziamenti Fondimpresa, permettendo alle aziende di accedere alla formazione gratuita per i propri dipendenti. Il processo di richiesta fondi viene gestito completamente, dalla documentazione iniziale fino all’erogazione del corso.

Per maggiori informazioni e per richiedere un preventivo personalizzato:

• Visita: QUI.
• Email: info@innovaformazione.net
• Telefono: 3471012275 (Dario Carrassi)

Investire nella formazione del team non è solo un modo per acquisire nuove competenze tecniche, ma rappresenta un vantaggio competitivo strategico che permette alle aziende di innovare più rapidamente, implementare soluzioni all’avanguardia e rimanere leader nel proprio settore.

(fonte) (fonte) (fonte) (fonte)