MCP Apps

MCP Apps: schede interattive dentro la chat

Le MCP Apps permettono a un server MCP di mostrare nella conversazione un'interfaccia interattiva al posto del semplice testo. Un tool punta a una risorsa HTML e l'app di IA la mostra in un frame isolato (sandbox).

Nella tua app di IAMCP App
Ravens vs crows

Ravens are generally larger and heavier-billed than crows. Ravens often have wedge-shaped tails and deeper calls, while crows commonly make a familiar caw. Size: Generally larger (Ravens), Generally smaller (Crows) Bill: Heavier, more curved (Ravens), Usually slimmer (Crows) Tail: Often wedge-shaped (Ravens), Usually fan-shaped (Crows) Call: Deep croak (Ravens), Often a caw (Crows)

Esempi

Cosa può mostrare una MCP App

Sono risposte WebKnox registrate, mostrate dallo stesso elemento <webknox-answer> della MCP App di WebKnox. Aprine una nell'Answer Lab.

Come funzionano le MCP Apps

Una MCP App unisce due elementi di base di MCP, un tool e una risorsa. Le MCP Apps sono un'estensione facoltativa del protocollo, quindi l'app di IA deve supportarle.

  1. Il tool indica una vista

    La sua descrizione contiene _meta.ui.resourceUri, che punta a una risorsa ui://.

  2. L'app la recupera

    L'app di IA legge quella risorsa dal tuo server: una pagina HTML, spesso con script e stili inclusi.

  3. Gira in una sandbox

    La pagina viene mostrata in un iframe isolato (sandbox) nella conversazione e non può accedere all'app che la circonda.

  4. Comunicano con messaggi

    Tramite postMessage, l'app invia il risultato del tool alla vista, e la vista può chiamare tool o inviare un messaggio.

Quali app di IA le mostrano

Il supporto cambia da un'app all'altra ed evolve in fretta. Ecco dove WebKnox mostra oggi le sue risposte.

App di IAWebKnox mostra
ClaudeScheda interattiva
ChatGPTScheda interattiva
VS CodeScheda interattiva
GooseScheda interattiva
Claude CodeTesto con fonti
CodexTesto con fonti

Il progetto MCP mantiene un elenco delle app che supportano le estensioni. La sua documentazione cita anche Microsoft 365 Copilot, Postman e MCPJam.

Provane una in due minuti

WebKnox è un server MCP remoto con risposte gratuite ogni giorno, senza bisogno di accedere per iniziare. Aggiungi il suo indirizzo alla tua app di IA, poi chiedi un confronto, una previsione o una ricetta.

URL del server
https://mcp.webknox.com/mcp

Usa le schede WebKnox nella tua MCP App

Stai creando il tuo server MCP? Fai in modo che un tool interroghi l'Answers API e restituisca la risposta come structuredContent, poi mostrala con l'elemento WebKnox nella tua vista. Ottieni schede con fonti senza scrivere l'interfaccia.

Il tuo server MCP
import {registerAppTool, registerAppResource, RESOURCE_MIME_TYPE} from '@modelcontextprotocol/ext-apps/server';

const uri = 'ui://my-app/card.html';

registerAppResource(server, uri, uri, {mimeType: RESOURCE_MIME_TYPE}, async () => ({
  contents: [{
    uri,
    mimeType: RESOURCE_MIME_TYPE,
    text: viewHtml, // the bundled view below
    _meta: {ui: {csp: {resourceDomains: ['https://webknox.com']}}},
  }],
}));

registerAppTool(server, 'ask', {
  description: 'Answers with a sourced card.',
  inputSchema: z.object({question: z.string()}),
  _meta: {ui: {resourceUri: uri}},
}, async ({question}) => {
  const answer = await askWebKnox(question); // POST /v2/answers
  return {
    content: [{type: 'text', text: answer.text ?? 'No card for this question.'}],
    structuredContent: answer,
  };
});
La tua vista
<webknox-answer external-media></webknox-answer>

<script type="module">
  import '@webknox/elements';
  import {App} from '@modelcontextprotocol/ext-apps';

  const card = document.querySelector('webknox-answer');
  const app = new App({name: 'My cards', version: '1.0.0'});

  app.ontoolresult = ({structuredContent}) => {
    card.answer = structuredContent;
  };
  app.connect();
</script>

Raggruppa la vista in un unico file HTML, come fa la guida ufficiale. Le immagini delle risposte vengono caricate da https://webknox.com, che la policy di sicurezza della risorsa consente nell'esempio.

Domande sulle MCP Apps

Cosa sono le MCP Apps?

Le MCP Apps sono un'estensione ufficiale del Model Context Protocol. Permettono a un server MCP di restituire un'interfaccia HTML interattiva che l'app di IA mostra nella conversazione, invece del solo testo.

Che differenza c'è tra un server MCP e una MCP App?

Un server MCP offre a un'app di IA tool e dati. Una MCP App è un server MCP il cui tool porta anche una vista, così il risultato appare come un'interfaccia che le persone possono usare.

Le MCP Apps funzionano in Claude e ChatGPT?

Sì. Le schede di WebKnox compaiono in Claude, ChatGPT, VS Code e Goose. I client solo testo, come Claude Code e Codex, ricevono la risposta come testo con le sue fonti.

Le MCP Apps sono sicure?

Girano in un frame isolato controllato dall'app di IA, quindi non possono leggere la pagina che le circonda né i suoi cookie. Raggiungono l'app solo tramite messaggi, ed è l'app a decidere cosa possono fare.

Quanto costa la MCP App di WebKnox?

Senza account, ogni persona ha 10 risposte con scheda al giorno. Claude non dice a WebKnox chi sta chiedendo, quindi in Claude tutti condividono un'unica quota giornaliera, che può esaurirsi prima. Dopo, accedi con un account WebKnox gratuito per averne 50 al giorno, oppure usa un piano a pagamento per averne di più.

Metti online la tua prima scheda già oggi pomeriggio