Name: Exemple de Fond Transparent
Availability: InStock
Author: localden

Ce qu'elle fait

Ceci est une implémentation de référence d'un widget d'application MCP conçu pour s'intégrer directement dans l'interface de chat. Contrairement aux widgets standard qui se trouvent dans des boîtes opaques, cette application supprime le fond et adopte les jetons de thème de l'hôte (couleurs, polices et rayons) en temps réel.

Caractéristiques principales

Intégration transparente : Utilise des fonds transparents pour éliminer l'aspect « encadré » des widgets standards.
Thématisation dynamique : S'adapte automatiquement aux modes clair et sombre en utilisant les jetons de thème fournis par l'hôte.
Sensibilité au thème : Implémente l'événement ui/notifications/host-context-changed pour mettre à jour les styles instantanément lorsque l'utilisateur change de thème.
Design sans bordure : Demande explicitement un cadre sans bordure via prefersBorder: false pour une expérience native.

Installation

Claude Desktop

Ajoutez ce qui suit à votre fichier claude_desktop_config.json :

{
  "mcpServers": {
    "transparent-widget-sample": {
      "command": "npm",
      "args": ["start", "--prefix", "/absolute/path/to/mcp-app-transparent-bg", "--", "--stdio"]
    }
  }
}