PassCraft WebMCP

Inspiration

Aujourd'hui, les agents IA progressent à une vitesse folle, mais la majorité des sites web restent conçus uniquement pour des clics et des saisies humaines. L'idée derrière PassCraft WebMCP est née d'une question simple : comment permettre à une IA de comprendre instantanément les capacités d'une application web, d'exécuter une action concrète (comme réserver un billet) et d'afficher le résultat en direct à l'écran ? En exploitant le protocole WebMCP (Web Model Context Protocol), nous avons voulu bâtir un pont direct et naturel entre le raisonnement de l'agent et l'interface utilisateur, sans passer par des architectures API tierces lourdes.

What it does

PassCraft WebMCP est une plateforme de réservation de pass événementiels conçue nativement pour les agents IA. L'application expose ses capacités directement au navigateur grâce au protocole WebMCP. Un agent IA peut détecter l'outil disponible (reserver_pass_evenement), vérifier les types de billets (Standard, Premium, VIP), valider les informations saisies, calculer le montant total et générer instantanément un pass événementiel personnalisé doté d'un QR code dynamique prêt à être scanné.

How we built it

Le projet a été développé sous la forme d'une application web monopage (single-file application) fluide, légère et autonome :

• Interface & UI : Structurée en HTML5 propre avec Tailwind CSS v4 pour le style réactif et Lucide Icons pour les visuels.
• Architecture WebMCP : Un script d'initialisation (ensureModelContext) vérifie la présence native de document.modelContext ou active un polyfill sur mesure pour enregistrer l'outil reserver_pass_evenement.
• Validation & Modélisation Mathématique : Les règles de calcul de la réservation et de validation s'appuient sur une logique explicite : Le prix total P_{\text{total}} est calculé selon la formule : où la quantité de billets respecte la contrainte q \in \mathbb{N} \cap [1, 10], et où le prix unitaire P(T) dépend du type de billet T \in {\text{standard}, \text{premium}, \text{vip}} : La fonction de validation V(R) rejette toute requête R ne respectant pas le schéma :
• Moteur Canvas QR : Génération procédurale du QR code directement sur un élément HTML5 en JavaScript natif, sans aucune dépendance lourde.
• Simulateur d'agent : Un mode démo intégré permet de visualiser en direct la saisie de l'agent, la synchronisation du DOM et l'invocation de l'outil WebMCP. Challenges we ran into
• Concevoir un polyfill WebMCP robuste : Il a fallu reproduire fidèlement le comportement du protocole natif pour garantir un fonctionnement sans faille sur tous les navigateurs.
• Générer le QR Code en pure JS sur Canvas : Dessiner une matrice QR propre, lisible et scannable uniquement via l'API Canvas HTML5 sans importer de module externe a demandé une grande précision mathématique et algorithmique.
• Fluidité de la simulation : Synchroniser la saisie automatique caractère par caractère dans le DOM avec l'exécution réelle du tool call WebMCP sans ralentir l'affichage. ##Accomplishments that we're proud of
• Une application 100 % autonome : Aucun serveur lourd, aucune dépendance externe superflue, tout tourne directement dans le navigateur et sur Netlify.
• Un rendu Canvas sur mesure : Réussir à générer un visuel de pass complet et son QR code de manière procédurale en JavaScript.
• Une démonstration concrète du WebMCP : Prouver qu'avec quelques attributs et un schéma clair, une web app devient immédiatement utilisable par un agent IA. What we learned
• La simplicité et l'efficacité des attributs déclaratifs WebMCP (toolname, tooldescription) pour exposer des fonctionnalités web aux LLMs.
• La nécessité absolue d'une validation JSON Schema ultra-stricte côté client lorsqu'on donne la main à un agent autonome pour exécuter des actions. ##What's next for PassCraft WebMCP
• Connexion à un backend réel : Connecter l'outil WebMCP à une API de billetterie en production (Node.js/Python) et une base de données pour la persistance des pass.
• Exportation & Calendrier : Ajouter la génération automatique de fichiers .ics pour ajouter l'événement directement dans l'agenda de l'utilisateur.
• Outil de vérification pour les organisateurs : Développer un deuxième outil WebMCP dédié au contrôle à l'entrée, permettant à un agent IA d'un organisateur de scanner et valider les pass générés.

Built With

• git
• google-fonts
• html5
• javascript
• json-schema
• lucide-icons
• netlify
• tailwind-css-v4
• webmcp-api