Le workflow typique d’un data engineer implique six changements de contexte : écrire du SQL dans votre IDE, exécuter dans le warehouse, exporter en CSV, importer dans votre outil BI, construire la visualisation, partager le lien du dashboard. Chaque étape interrompt votre réflexion. Le temps de construire le graphique, vous avez oublié la question qui l’avait motivé.

MCP Apps condense tout cela en une seule conversation. Annoncée en janvier 2026, cette extension du Model Context Protocol permet aux serveurs de retourner des interfaces HTML interactives qui s’affichent directement dans Claude. Vous posez une question, obtenez un graphique, approfondissez avec des questions de suivi, et l’IA maintient le contexte tout au long.

Connecter votre stack existante

La valeur pratique dépend de la connexion aux outils que vous utilisez déjà.

BigQuery dispose d’un support MCP prêt pour la production via le MCP Toolbox for Databases officiel de Google. Il fournit les outils bigquery-execute-sql, bigquery-forecast et bigquery-conversational-analytics, configurés via OAuth dans un fichier tools.yaml.

L’intégration dbt provient du serveur officiel de dbt Labs. Au-delà des opérations CLI (build, run, test, compile), il expose la semantic layer via list_metrics et query_metrics. Le tier Fusion ajoute le lineage au niveau des colonnes via get_column_lineage.

GA4 fonctionne via google-analytics-mcp, qui expose run_report avec plus de 200 dimensions et métriques, plus le reporting en temps réel. Une requête comme “revenue par pays et catégorie d’appareil sur les 30 derniers jours” retourne des données structurées prêtes pour la visualisation.

Une fois les données récupérées, il faut quelque chose pour les afficher. AntV mcp-server-chart propose plus de 26 types de graphiques incluant cartes géographiques, graphes de réseaux et diagrammes sankey :

npx -y @antv/mcp-server-chart

Le serveur Vega-Lite adopte une approche déclarative où vous spécifiez la structure de visualisation plutôt que la logique de rendu. Pour une analyse entièrement privée, mcp-visualization-duckdb combine Plotly avec un traitement LLM local pour que les données ne quittent jamais votre machine.

Quand c’est pertinent (et quand ça ne l’est pas)

MCP Apps excelle pour l’analyse cross-source. Combiner des métriques Looker avec des tickets Jira et des données CRM dans une seule conversation n’est pas quelque chose que les outils BI traditionnels gèrent bien. Le raisonnement de Claude gère aussi les questions ambiguës en plusieurs parties qui nécessiteraient plusieurs vues de dashboard.

Les outils BI traditionnels conservent toutefois de réels avantages. La semantic layer LookML de Looker impose des définitions de métriques cohérentes dans toute l’organisation, offrant une gouvernance que MCP Apps n’a pas. Tableau produit le niveau de finition attendu dans les présentations au board. Metabase offre un déploiement self-hosted simple.

L’architecture sensée n’est pas un choix binaire : utilisez dbt pour la transformation, Looker pour la semantic layer et les dashboards de production, MCP Apps comme couche conversationnelle pour l’exploration ad-hoc. Le Looker MCP Server de Google (lancé en août 2025) permet exactement cette approche hybride.

Comment ça fonctionne en interne

MCP Apps étend le protocole via deux primitives : des tools qui déclarent des métadonnées d’interface, et des resources qui servent du contenu HTML.

Quand vous appelez un tool avec support MCP Apps, la description du tool inclut un champ _meta.ui.resourceUri pointant vers une resource ui://. Cela permet aux hosts de précharger l’interface avant l’exécution. Le host récupère le bundle HTML/JavaScript, le rend dans une iframe sandboxée, et établit une communication JSON-RPC bidirectionnelle via postMessage. L’app peut appeler des tools du serveur pendant que le host pousse des données fraîches.

// Tool avec métadonnées UI
registerAppTool(server, "visualize-data", {
  title: "Visualize Data",
  description: "Returns an interactive chart visualization",
  inputSchema: { type: "object", properties: { data: { type: "array" } } },
  _meta: { ui: { resourceUri: "ui://charts/interactive" } }
}, async (args) => {
  return { content: [{ type: "text", text: JSON.stringify(args.data) }] };
});

Les apps reçoivent les résultats des tools via app.ontoolresult, appellent les tools du serveur via app.callServerTool(), et peuvent mettre à jour le contexte du modèle avec app.updateModelContext() pour informer l’IA des actions effectuées par l’utilisateur dans l’interface.

Considérations de sécurité

Tout le contenu UI s’exécute dans des iframes sandboxées avec des permissions restreintes. Les apps ne peuvent pas accéder au DOM de la fenêtre parente, lire les cookies du host, naviguer dans la page parente, ou exécuter des scripts dans le contexte parent. Les templates pré-déclarés permettent une revue de sécurité avant exécution, et les hosts peuvent exiger une approbation explicite de l’utilisateur pour les appels de tools initiés par l’UI.

L’écosystème MCP plus large fait face à de vrais défis toutefois. Une recherche d’Equixly a trouvé des failles d’injection de commandes dans 43% des serveurs MCP analysés. Les recommandations de sécurité de Docker préconisent de conteneuriser chaque serveur MCP avec des limites CPU/mémoire et des systèmes de fichiers en lecture seule. Maintenir des listes blanches de serveurs approuvés et auditer les logs de messages devrait être une pratique standard.

Construire un serveur de visualisation personnalisé

Si les serveurs existants ne couvrent pas vos besoins, l’implémentation nécessite Node.js 18+ et le SDK @modelcontextprotocol/ext-apps. Vous enregistrez un tool avec des métadonnées UI et une resource HTML correspondante :

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE }
  from "@modelcontextprotocol/ext-apps/server";
import * as fs from "fs/promises";

const server = new McpServer({ name: "Analytics Dashboard", version: "1.0.0" });
const resourceUri = "ui://dashboard/main.html";

// Enregistrer le tool
registerAppTool(server, "show-dashboard", {
  title: "Analytics Dashboard",
  description: "Display interactive metrics dashboard",
  inputSchema: { type: "object", properties: { metrics: { type: "array" } } },
  _meta: { ui: { resourceUri } }
}, async (args) => ({
  content: [{ type: "text", text: JSON.stringify(args.metrics) }]
}));

// Enregistrer la resource HTML
registerAppResource(server, resourceUri, resourceUri,
  { mimeType: RESOURCE_MIME_TYPE },
  async () => {
    const html = await fs.readFile("./dist/dashboard.html", "utf-8");
    return { contents: [{ uri: resourceUri, mimeType: RESOURCE_MIME_TYPE, text: html }] };
  }
);

Le SDK App côté client gère la communication avec le host :

import { App } from "@modelcontextprotocol/ext-apps";

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

app.ontoolresult = (result) => {
  const data = JSON.parse(result.content?.find(c => c.type === "text")?.text);
  renderChart(data); // Votre logique de visualisation
};

// Appeler des tools serveur supplémentaires depuis les interactions UI
async function drillDown(segment) {
  const result = await app.callServerTool({
    name: "get-segment-details",
    arguments: { segment }
  });
  // Mettre à jour la visualisation avec les données du segment
}

app.connect();

Vite avec vite-plugin-singlefile bundle l’UI dans le fichier HTML unique que MCP Apps requiert. Des templates de démarrage existent pour React, Vue, Svelte, Preact, Solid et JavaScript vanilla.

Problèmes de configuration courants

Problèmes de PATH sur macOS : les apps lancées depuis le Finder n’héritent pas du PATH du shell. Utilisez des chemins absolus comme /opt/homebrew/bin/npx dans votre configuration.

Échecs JSON silencieux : les erreurs de syntaxe dans les fichiers de configuration MCP échouent silencieusement. Validez avec un linter JSON avant de redémarrer Claude. Les logs de debug se trouvent dans ~/Library/Logs/Claude/mcp-server-*.log.

Prolifération des tools : des recherches montrent que 50 tools n’atteignent que 31% de taux de succès tandis que 8 tools ciblés atteignent 89%. Si vous ne pouvez pas expliquer ce que fait chaque tool en une phrase, consolidez.

Limitations actuelles : le support est limité au contenu text/html. Les URLs externes, le DOM distant et les widgets natifs sont reportés aux itérations futures. Chaque appel de tool implique une latence aller-retour.

Pour commencer

La façon la plus rapide de voir ce qui est possible est d’installer le serveur de graphiques AntV et de demander à Claude de visualiser des données. Une fois que vous comprenez le modèle d’interaction, connectez vos sources de données et construisez à partir de là.

Les dashboards de production ont toujours leur place dans Looker et Tableau. Mais l’analyse exploratoire fonctionne différemment quand la visualisation vit au même endroit que la conversation. Vous voyez un graphique, posez une question de suivi, et approfondissez le sujet sans perdre le fil qui vous y a mené.

Ressources :

• Documentation officielle MCP Apps
• SDK @modelcontextprotocol/ext-apps sur npm
• AntV mcp-server-chart pour de la visualisation prête pour la production
• Exemples de serveurs ext-apps sur GitHub