Sémantiques Jetpack Compose : Guide pour les agents IA

Apprendre aux agents IA à comprendre votre interface : Guide pratique des Sémantiques Jetpack Compose

Introduction

Si vous voulez que les agents IA et les outils d'automatisation de tests comprennent précisément "ce que fait ce bouton" dans Jetpack Compose, la conception adéquate des Sémantiques est la clé.

Compose maintient un "Arbre Sémantique" interne — une structure sémantique utilisée par les services d'accessibilité, les frameworks de test d'interface et les outils d'automatisation IA comme Appium, UIAutomator et MCP. Considérez-le comme l'équivalent Compose d'ARIA et du DOM sur le web.

Attributs Sémantiques fondamentaux

contentDescription

L'attribut le plus fondamental pour donner du sens aux boutons avec icône uniquement.

IconButton(
    onClick = onDelete,
    modifier = Modifier.semantics {
        contentDescription = "Supprimer"
    }
) {
    Icon(Icons.Default.Delete, contentDescription = null)
}

Les outils IA et d'accessibilité reconnaîtront ceci comme "bouton Supprimer, cliquable, rôle Bouton."

role

Déclare explicitement le type d'interface pour les composants personnalisés. Un simple Box(clickable) s'enregistre comme "quelque chose de cliquable", mais l'ajout d'un rôle en fait clairement un Bouton, Interrupteur, Case à cocher, Onglet, etc.

Modifier.semantics {
    role = Role.Button
}

stateDescription

Communique l'état actuel de l'interface à l'IA.

Modifier.semantics {
    stateDescription =
        if (subscribed) "Abonné"
        else "Non abonné"
}

testTag

L'identifiant le plus important pour MCP, Appium et les agents d'interface automatisés. Il permet une identification stable sans dépendre des coordonnées, de l'OCR ou des changements de texte.

Modifier.testTag("login_button")

Configuration de l'intégration UIAutomator

Étant donné que Compose ne crée pas de hiérarchie de vues natives, les valeurs testTag peuvent être invisibles pour UIAutomator. Ajoutez ceci à votre racine pour corriger cela :

Scaffold(
    modifier = Modifier.semantics {
        testTagsAsResourceId = true
    }
)

Cela rend les valeurs testTag visibles comme IDs de ressources, permettant à UIAutomator de les récupérer directement.

Le meilleur pattern pour la compréhension IA

La combinaison de plusieurs attributs est la meilleure pratique :

Button(
    onClick = login,
    modifier = Modifier
        .testTag("login_button")
        .semantics {
            contentDescription = "Se connecter"
            role = Role.Button
        }
) {
    Text("Se connecter")
}

Regrouper une interface complexe en une seule signification

Quand vous avez des compositions complexes d'icônes, de texte et de badges qui doivent apparaître comme un seul bouton pour l'IA, utilisez clearAndSetSemantics :

Modifier.clearAndSetSemantics {
    contentDescription = "Ajouter l'article au panier"
    role = Role.Button
}

Cela vous permet de ne passer que la signification à l'IA, en ignorant l'imbrication interne et la structure des icônes.

Ce que la conception des Sémantiques permet

Automatisation stable

Avec testTag, vous pouvez automatiser les interactions de manière fiable sans coordonnées ni OCR. Si le testTag reste le même après une refonte de l'interface, votre automatisation ne se cassera pas. Cela gère également les applications multilingues proprement.

Réduction des tokens

Les approches uniquement basées sur des captures d'écran nécessitent une analyse d'image, qui consomme beaucoup de tokens. Un Arbre Sémantique est des données structurées — beaucoup plus légères à traiter.

[
  {"type": "Button", "label": "Se connecter"},
  {"type": "TextField", "label": "Email"},
  {"type": "TextField", "label": "Mot de passe"}
]

C'est particulièrement efficace pour les longues sessions d'automatisation et l'analyse d'écran à grande échelle, et aide à prévenir le débordement de contexte.

Conscience d'état IA

stateDescription permet à l'IA de déduire l'état actuel de l'écran, permettant des décisions comme "la lecture est en pause, donc appuyer sur le bouton play." Cela permet de modéliser votre écran comme une machine à états.

Analyse structurée via MCP

En récupérant l'Arbre Sémantique via un Serveur MCP et en le transmettant à un agent LLM, vous pouvez activer la compréhension sémantique complète de l'écran, la prédiction des prochaines actions et l'analyse des transitions d'état.

Compose UI → Arbre Sémantique → Serveur MCP → Agent LLM

Référence des attributs Sémantiques

Résumé

Compose vous permet de séparer "l'apparence" de "la signification". L'essence de la conception des Sémantiques est la capacité à concevoir indépendamment l'interface orientée humain et la structure sémantique orientée IA.

Si vous utilisez des agents IA, MCP, UIAutomator ou des tests E2E automatisés, standardiser le pattern suivant dans vos composants offre un excellent retour sur investissement :

Modifier
    .testTag(...)
    .semantics {
        contentDescription = ...
        role = ...
    }

La couleur, la position et la taille importent moins que "à quoi sert ce bouton, que se passe-t-il quand on appuie, et quel est son état actuel" — transmettre cela via les Sémantiques est le cœur d'une conception d'interface conviviale pour l'IA.