[{"data":1,"prerenderedAt":3948},["ShallowReactive",2],{"navigation_fr":3,"posts_fr:/fr/blog/mcp-create":51,"posts_fr:/fr/blog/mcp-create:surround":1615},[4],{"title":5,"path":6,"stem":7,"children":8,"page":50},"Fr","/fr","fr",[9],{"title":10,"path":11,"stem":12,"children":13,"page":50},"Blog","/fr/blog","fr/blog",[14,18,22,26,30,34,38,42,46],{"title":15,"path":16,"stem":17},"Serveurs MCP comme Serveurs de Ressources OAuth : Une Approche Simplifiée","/fr/blog/mcp-aouth","fr/blog/1. mcp-aouth",{"title":19,"path":20,"stem":21},"Pratiques de Sécurité pour MCP Utilisant JSON-RPC","/fr/blog/mcp-security","fr/blog/1. mcp-security",{"title":23,"path":24,"stem":25},"Serveurs MCP : Connecter l'IA aux Données en Temps Réel","/fr/blog/mcp-create","fr/blog/2. mcp-create",{"title":27,"path":28,"stem":29},"Agents MCP Tiny On-Premises : S'affranchir des Dépendances Cloud","/fr/blog/mcp-tiny-agents-on-premises","fr/blog/5. mcp-tiny-agents-on-premises",{"title":31,"path":32,"stem":33},"De l'Idée à l'API en 2 Jours : Construction de Bankly avec les Flux de Travail Agentiques","/fr/blog/overvibing","fr/blog/6. overvibing",{"title":35,"path":36,"stem":37},"Chatbot IA, Serveur MCP construit avec le Protocole de Flux de Travail Agentique pour démo sur Checkatrade.com","/fr/blog/mcp-in-chat-demo","fr/blog/8. mcp-in-chat-demo",{"title":39,"path":40,"stem":41},"DDD et les Frameworks Full-Stack","/fr/blog/architecture","fr/blog/architecture",{"title":43,"path":44,"stem":45},"Qualité : Comment protéger les Frontends alimentés par l'IA ?","/fr/blog/qa-front","fr/blog/qa-front",{"title":47,"path":48,"stem":49},"Consultation et Stratégie IT","/fr/blog/strategy","fr/blog/strategy",false,{"id":52,"title":23,"authors":53,"badge":60,"body":64,"date":1607,"description":1608,"extension":1609,"image":1610,"meta":1612,"navigation":265,"path":24,"seo":1613,"stem":25,"__hash__":1614},"posts_fr/fr/blog/2. mcp-create.md",[54],{"name":55,"description":56,"to":57,"avatar":58},"Michael Wybraniec","Freelance, Serveurs MCP, Développement Full-Stack, Architecture","https://www.linkedin.com/in/one-front/",{"src":59},"https://media.licdn.com/dms/image/v2/D4D03AQEGvIVcrTTS2g/profile-displayphoto-shrink_800_800/B4DZbtSf7LIEAc-/0/1747737772225?e=1753315200&v=beta&t=EOviZQkM396PoGctVjDCdlG8U3vN5UKWiIeNQ8IFUgQ",{"label":61,"color":62,"variant":63},"MCP, Temps Réel","error","soft",{"type":65,"value":66,"toc":1595},"minimark",[67,76,99,158,173,196,211,222,341,356,769,927,942,948,1124,1139,1157,1207,1222,1250,1265,1295,1381,1396,1402,1409,1544,1559,1568,1578,1591],[68,69,72],"div",{"className":70},[71],"text-justify",[73,74,75],"p",{},"Les serveurs MCP révolutionnent la façon dont les modèles de langage interagissent avec les sources de données externes. Considérez-les comme des plugins sophistiqués qui étendent les capacités de l'IA au-delà de leurs données d'entraînement. Dans ce tutoriel complet, nous construirons un serveur MCP météorologique qui connecte Claude, GPT-4, ou tout autre LLM aux informations météorologiques en temps réel en utilisant Python et l'API Open-Meteo.",[68,77,82,90],{"className":78},[79,80,81],"flex","justify-between","items-center",[83,84,86],"h2",{"id":85},"quest-ce-quun-serveur-mcp",[87,88,89],"strong",{},"Qu'est-ce qu'un Serveur MCP ?",[73,91,92],{},[93,94,96],"a",{"href":95},"#top",[87,97,98],{},"⤴",[68,100,108,127],{"className":101},[102,103,104,105,106,107],"grid","grid-cols-1","md:grid-cols-2","items-start","w-full","gap-x-8",[68,109,110],{},[73,111,112,121],{},[113,114],"img",{"alt":115,"className":116,"height":118,"src":119,"style":120},"Diagramme d'Architecture MCP",[117],"rounded-md",400,"/blog/mcp/llm-has-tools.png","padding: 20px; background-color: white",[93,122,126],{"href":123,"rel":124},"http://one-front/blog/mcp",[125],"nofollow","Serveur MCP : Connecter l'IA aux Données en Temps Réel",[68,128,130,133,136],{"className":129},[71],[73,131,132],{},"Les serveurs MCP étendent les capacités des modèles de langage en les connectant aux sources de données et services. Ce sont des applications agnostiques qui facilitent l'intégration avec n'importe quelle donnée ou service que vous pouvez imaginer. Pensez aux appels de fonction, mais les fonctions sont des plugins qui peuvent virtuellement tout faire.",[73,134,135],{},"Les serveurs MCP exposent trois primitives principales :",[137,138,139,146,152],"ul",{},[140,141,142,145],"li",{},[87,143,144],{},"Ressources"," (contrôlées par le client) : Exposition passive de données pour le contexte",[140,147,148,151],{},[87,149,150],{},"Outils"," (contrôlés par le modèle) : Fonctionnalité exécutable pour les actions",[140,153,154,157],{},[87,155,156],{},"Prompts"," (contrôlés par l'utilisateur) : Workflows réutilisables et modèles",[68,159,161,167],{"className":160},[79,80,81],[83,162,164],{"id":163},"pourquoi-les-données-météorologiques",[87,165,166],{},"Pourquoi les Données Météorologiques ?",[73,168,169],{},[93,170,171],{"href":95},[87,172,98],{},[68,174,176,179,182],{"className":175},[71],[73,177,178],{},"Les données météorologiques fournissent un excellent exemple pour le développement de serveurs MCP car elles démontrent l'intégration d'API du monde réel avec des applications pratiques. Les modèles de langage excellent à transformer les données météorologiques brutes (température, vitesse du vent, humidité) en descriptions en langage naturel et recommandations actionnables.",[73,180,181],{},"Nous utiliserons l'API Open-Meteo car elle est :",[137,183,184,187,190,193],{},[140,185,186],{},"Gratuite pour un usage non commercial",[140,188,189],{},"Aucune clé API requise",[140,191,192],{},"Facilement configurable via les paramètres de requête",[140,194,195],{},"Parfaite pour l'intégration LLM",[68,197,199,205],{"className":198},[79,80,81],[83,200,202],{"id":201},"configuration-du-projet",[87,203,204],{},"Configuration du Projet",[73,206,207],{},[93,208,209],{"href":95},[87,210,98],{},[68,212,214],{"className":213},[71],[73,215,216,217,221],{},"Avant de plonger dans le code, assurez-vous d'avoir les outils nécessaires installés. Nous utiliserons ",[218,219,220],"code",{},"uv",", un gestionnaire de paquets Python basé sur Rust qui rend la gestion des dépendances transparente.",[223,224,229],"pre",{"className":225,"code":226,"language":227,"meta":228,"style":228},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# Créer le répertoire du projet\nmkdir mcp-server-weather\ncd mcp-server-weather\n\n# Initialiser le projet uv\nuv init\n\n# Créer et activer l'environnement virtuel\nuv venv\nsource .venv/bin/activate\n\n# Installer les dépendances\nuv add \"mcp[cli]\" httpx\n","bash","",[218,230,231,240,251,260,267,273,281,286,292,300,309,314,320],{"__ignoreMap":228},[232,233,236],"span",{"class":234,"line":235},"line",1,[232,237,239],{"class":238},"sHwdD","# Créer le répertoire du projet\n",[232,241,243,247],{"class":234,"line":242},2,[232,244,246],{"class":245},"sBMFI","mkdir",[232,248,250],{"class":249},"sfazB"," mcp-server-weather\n",[232,252,254,258],{"class":234,"line":253},3,[232,255,257],{"class":256},"s2Zo4","cd",[232,259,250],{"class":249},[232,261,263],{"class":234,"line":262},4,[232,264,266],{"emptyLinePlaceholder":265},true,"\n",[232,268,270],{"class":234,"line":269},5,[232,271,272],{"class":238},"# Initialiser le projet uv\n",[232,274,276,278],{"class":234,"line":275},6,[232,277,220],{"class":245},[232,279,280],{"class":249}," init\n",[232,282,284],{"class":234,"line":283},7,[232,285,266],{"emptyLinePlaceholder":265},[232,287,289],{"class":234,"line":288},8,[232,290,291],{"class":238},"# Créer et activer l'environnement virtuel\n",[232,293,295,297],{"class":234,"line":294},9,[232,296,220],{"class":245},[232,298,299],{"class":249}," venv\n",[232,301,303,306],{"class":234,"line":302},10,[232,304,305],{"class":256},"source",[232,307,308],{"class":249}," .venv/bin/activate\n",[232,310,312],{"class":234,"line":311},11,[232,313,266],{"emptyLinePlaceholder":265},[232,315,317],{"class":234,"line":316},12,[232,318,319],{"class":238},"# Installer les dépendances\n",[232,321,323,325,328,332,335,338],{"class":234,"line":322},13,[232,324,220],{"class":245},[232,326,327],{"class":249}," add",[232,329,331],{"class":330},"sMK4o"," \"",[232,333,334],{"class":249},"mcp[cli]",[232,336,337],{"class":330},"\"",[232,339,340],{"class":249}," httpx\n",[68,342,344,350],{"className":343},[79,80,81],[83,345,347],{"id":346},"construction-du-serveur-mcp",[87,348,349],{},"Construction du Serveur MCP",[73,351,352],{},[93,353,354],{"href":95},[87,355,98],{},[68,357,359,757],{"className":358},[102,103,104,105,106,107],[68,360,361],{},[223,362,366],{"className":363,"code":364,"language":365,"meta":228,"style":228},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","  [{\"type\": \"text\", \"text\": \"Prévisions pour 40.7128, -74.006 :\\n\\nAujourd'hui :\\nTempérature : 66°F\\nVent : 13 à 16 mph O\\nPrincipalement Ensoleillé\\n---\\nCe soir :\\nTempérature : 55°F\\nVent : 5 à 13 mph O\\nPartiellement Nuageux\\n---\\nLundi :\\nTempérature : 71°F\\nVent : 8 mph O\\nEnsoleillé\\n---\\nLundi Soir :\\nTempérature : 59°F\\nVent : 3 à 8 mph O\\nPrincipalement Dégagé\\n---\\nMardi :\\nTempérature : 77°F\\nVent : 3 à 7 mph SO\\nEnsoleillé\\n---\\nMardi Soir :\\nTempérature : 65°F\\nVent : 5 à 8 mph S\\nPrincipalement Dégagé\\n---\\nMercredi :\\nTempérature : 82°F\\nVent : 5 à 12 mph SO\\nEnsoleillé\\n---\\nMercredi Soir :\\nTempérature : 69°F\\nVent : 8 à 12 mph SO\\nPrincipalement Dégagé\\n---\\nJeudi :\\nTempérature : 85°F\\nVent : 7 à 12 mph SO\\nPrincipalement Ensoleillé\\n---\\nJeudi Soir :\\nTempérature : 72°F\\nVent : 7 à 12 mph SO\\nPartiellement Nuageux\\n---\\nVendredi :\\nTempérature : 82°F\\nVent : 7 à 12 mph SO\\nPossibilité d'Averses\\n---\\nVendredi Soir :\\nTempérature : 70°F\\nVent : 7 à 12 mph SO\\nPossibilité d'Averses\\n---\\nSamedi :\\nTempérature : 76°F\\nVent : 9 mph O\\nPossibilité d'Averses\\n---\\nSamedi Soir :\\nTempérature : 67°F\\nVent : 6 à 9 mph NO\\nPossibilité d'Averses\\n---\", \"uuid\": \"fb196843-938b-4a75-b1a5-b660892f9817\"}]\n","json",[218,367,368],{"__ignoreMap":228},[232,369,370,373,375,379,381,384,386,389,391,394,396,398,400,402,404,407,411,414,417,420,422,425,427,430,432,435,437,440,442,445,447,450,452,455,457,459,461,464,466,469,471,474,476,479,481,483,485,488,490,493,495,498,500,503,505,507,509,512,514,517,519,522,524,526,528,530,532,535,537,540,542,545,547,549,551,553,555,558,560,563,565,568,570,572,574,576,578,581,583,586,588,591,593,595,597,599,601,604,606,609,611,614,616,618,620,622,624,627,629,632,634,636,638,640,642,644,646,649,651,653,655,657,659,662,664,666,668,671,673,676,678,680,682,684,686,688,690,693,695,698,700,703,705,707,709,711,713,716,718,721,723,726,728,730,732,734,736,738,740,743,745,747,749,752,754],{"class":234,"line":235},[232,371,372],{"class":330},"  [{",[232,374,337],{"class":330},[232,376,378],{"class":377},"spNyl","type",[232,380,337],{"class":330},[232,382,383],{"class":330},":",[232,385,331],{"class":330},[232,387,388],{"class":249},"text",[232,390,337],{"class":330},[232,392,393],{"class":330},",",[232,395,331],{"class":330},[232,397,388],{"class":377},[232,399,337],{"class":330},[232,401,383],{"class":330},[232,403,331],{"class":330},[232,405,406],{"class":249},"Prévisions pour 40.7128, -74.006 :",[232,408,410],{"class":409},"sTEyZ","\\n\\n",[232,412,413],{"class":249},"Aujourd'hui :",[232,415,416],{"class":409},"\\n",[232,418,419],{"class":249},"Température : 66°F",[232,421,416],{"class":409},[232,423,424],{"class":249},"Vent : 13 à 16 mph O",[232,426,416],{"class":409},[232,428,429],{"class":249},"Principalement Ensoleillé",[232,431,416],{"class":409},[232,433,434],{"class":249},"---",[232,436,416],{"class":409},[232,438,439],{"class":249},"Ce soir :",[232,441,416],{"class":409},[232,443,444],{"class":249},"Température : 55°F",[232,446,416],{"class":409},[232,448,449],{"class":249},"Vent : 5 à 13 mph O",[232,451,416],{"class":409},[232,453,454],{"class":249},"Partiellement Nuageux",[232,456,416],{"class":409},[232,458,434],{"class":249},[232,460,416],{"class":409},[232,462,463],{"class":249},"Lundi :",[232,465,416],{"class":409},[232,467,468],{"class":249},"Température : 71°F",[232,470,416],{"class":409},[232,472,473],{"class":249},"Vent : 8 mph O",[232,475,416],{"class":409},[232,477,478],{"class":249},"Ensoleillé",[232,480,416],{"class":409},[232,482,434],{"class":249},[232,484,416],{"class":409},[232,486,487],{"class":249},"Lundi Soir :",[232,489,416],{"class":409},[232,491,492],{"class":249},"Température : 59°F",[232,494,416],{"class":409},[232,496,497],{"class":249},"Vent : 3 à 8 mph O",[232,499,416],{"class":409},[232,501,502],{"class":249},"Principalement Dégagé",[232,504,416],{"class":409},[232,506,434],{"class":249},[232,508,416],{"class":409},[232,510,511],{"class":249},"Mardi :",[232,513,416],{"class":409},[232,515,516],{"class":249},"Température : 77°F",[232,518,416],{"class":409},[232,520,521],{"class":249},"Vent : 3 à 7 mph SO",[232,523,416],{"class":409},[232,525,478],{"class":249},[232,527,416],{"class":409},[232,529,434],{"class":249},[232,531,416],{"class":409},[232,533,534],{"class":249},"Mardi Soir :",[232,536,416],{"class":409},[232,538,539],{"class":249},"Température : 65°F",[232,541,416],{"class":409},[232,543,544],{"class":249},"Vent : 5 à 8 mph S",[232,546,416],{"class":409},[232,548,502],{"class":249},[232,550,416],{"class":409},[232,552,434],{"class":249},[232,554,416],{"class":409},[232,556,557],{"class":249},"Mercredi :",[232,559,416],{"class":409},[232,561,562],{"class":249},"Température : 82°F",[232,564,416],{"class":409},[232,566,567],{"class":249},"Vent : 5 à 12 mph SO",[232,569,416],{"class":409},[232,571,478],{"class":249},[232,573,416],{"class":409},[232,575,434],{"class":249},[232,577,416],{"class":409},[232,579,580],{"class":249},"Mercredi Soir :",[232,582,416],{"class":409},[232,584,585],{"class":249},"Température : 69°F",[232,587,416],{"class":409},[232,589,590],{"class":249},"Vent : 8 à 12 mph SO",[232,592,416],{"class":409},[232,594,502],{"class":249},[232,596,416],{"class":409},[232,598,434],{"class":249},[232,600,416],{"class":409},[232,602,603],{"class":249},"Jeudi :",[232,605,416],{"class":409},[232,607,608],{"class":249},"Température : 85°F",[232,610,416],{"class":409},[232,612,613],{"class":249},"Vent : 7 à 12 mph SO",[232,615,416],{"class":409},[232,617,429],{"class":249},[232,619,416],{"class":409},[232,621,434],{"class":249},[232,623,416],{"class":409},[232,625,626],{"class":249},"Jeudi Soir :",[232,628,416],{"class":409},[232,630,631],{"class":249},"Température : 72°F",[232,633,416],{"class":409},[232,635,613],{"class":249},[232,637,416],{"class":409},[232,639,454],{"class":249},[232,641,416],{"class":409},[232,643,434],{"class":249},[232,645,416],{"class":409},[232,647,648],{"class":249},"Vendredi :",[232,650,416],{"class":409},[232,652,562],{"class":249},[232,654,416],{"class":409},[232,656,613],{"class":249},[232,658,416],{"class":409},[232,660,661],{"class":249},"Possibilité d'Averses",[232,663,416],{"class":409},[232,665,434],{"class":249},[232,667,416],{"class":409},[232,669,670],{"class":249},"Vendredi Soir :",[232,672,416],{"class":409},[232,674,675],{"class":249},"Température : 70°F",[232,677,416],{"class":409},[232,679,613],{"class":249},[232,681,416],{"class":409},[232,683,661],{"class":249},[232,685,416],{"class":409},[232,687,434],{"class":249},[232,689,416],{"class":409},[232,691,692],{"class":249},"Samedi :",[232,694,416],{"class":409},[232,696,697],{"class":249},"Température : 76°F",[232,699,416],{"class":409},[232,701,702],{"class":249},"Vent : 9 mph O",[232,704,416],{"class":409},[232,706,661],{"class":249},[232,708,416],{"class":409},[232,710,434],{"class":249},[232,712,416],{"class":409},[232,714,715],{"class":249},"Samedi Soir :",[232,717,416],{"class":409},[232,719,720],{"class":249},"Température : 67°F",[232,722,416],{"class":409},[232,724,725],{"class":249},"Vent : 6 à 9 mph NO",[232,727,416],{"class":409},[232,729,661],{"class":249},[232,731,416],{"class":409},[232,733,434],{"class":249},[232,735,337],{"class":330},[232,737,393],{"class":330},[232,739,331],{"class":330},[232,741,742],{"class":377},"uuid",[232,744,337],{"class":330},[232,746,383],{"class":330},[232,748,331],{"class":330},[232,750,751],{"class":249},"fb196843-938b-4a75-b1a5-b660892f9817",[232,753,337],{"class":330},[232,755,756],{"class":330},"}]\n",[68,758,760,763,766],{"className":759},[71],[73,761,762],{},"Ici vous pouvez voir une réponse de l'API get-weather d'un serveur MCP !",[73,764,765],{},"Commencez par créer l'échafaudage du serveur. Cela établit la fondation pour notre serveur MCP en utilisant FastMCP, qui simplifie la création et la gestion de serveurs.",[73,767,768],{},"FastMCP fournit une interface simplifiée pour définir les outils, ressources et prompts. En tirant parti de ses fonctionnalités intégrées, vous pouvez vous concentrer sur l'implémentation de la fonctionnalité sans vous soucier des détails de serveur de bas niveau.",[223,770,774],{"className":771,"code":772,"language":773,"meta":228,"style":228},"language-python shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","from typing import Any\nimport httpx\nfrom mcp.server.fastmcp import FastMCP\n\n# Initialiser le serveur FastMCP\nmcp = FastMCP(\"weather\")\n\n# Constantes\nOPENMETEO_API_BASE = \"https://api.open-meteo.com/v1\"\nUSER_AGENT = \"weather-app/1.0\"\n\n# Fonction d'aide pour les requêtes API\nasync def make_openmeteo_request(url: str) -> dict[str, Any] | None:\n    \"\"\"Effectuer une requête vers l'API Open-Meteo avec gestion d'erreur appropriée.\"\"\"\n    headers = {\n        \"User-Agent\": USER_AGENT,\n        \"Accept\": \"application/json\"\n    }\n    async with httpx.AsyncClient() as client:\n        try:\n            response = await client.get(url, headers=headers, timeout=30.0)\n            response.raise_for_status()\n            return response.json()\n        except Exception:\n            return None\n\nif __name__ == \"__main__\":\n    mcp.run(transport='stdio')\n","python",[218,775,776,781,786,791,795,800,805,809,814,819,824,828,833,838,844,850,856,862,868,874,880,886,892,898,904,910,915,921],{"__ignoreMap":228},[232,777,778],{"class":234,"line":235},[232,779,780],{},"from typing import Any\n",[232,782,783],{"class":234,"line":242},[232,784,785],{},"import httpx\n",[232,787,788],{"class":234,"line":253},[232,789,790],{},"from mcp.server.fastmcp import FastMCP\n",[232,792,793],{"class":234,"line":262},[232,794,266],{"emptyLinePlaceholder":265},[232,796,797],{"class":234,"line":269},[232,798,799],{},"# Initialiser le serveur FastMCP\n",[232,801,802],{"class":234,"line":275},[232,803,804],{},"mcp = FastMCP(\"weather\")\n",[232,806,807],{"class":234,"line":283},[232,808,266],{"emptyLinePlaceholder":265},[232,810,811],{"class":234,"line":288},[232,812,813],{},"# Constantes\n",[232,815,816],{"class":234,"line":294},[232,817,818],{},"OPENMETEO_API_BASE = \"https://api.open-meteo.com/v1\"\n",[232,820,821],{"class":234,"line":302},[232,822,823],{},"USER_AGENT = \"weather-app/1.0\"\n",[232,825,826],{"class":234,"line":311},[232,827,266],{"emptyLinePlaceholder":265},[232,829,830],{"class":234,"line":316},[232,831,832],{},"# Fonction d'aide pour les requêtes API\n",[232,834,835],{"class":234,"line":322},[232,836,837],{},"async def make_openmeteo_request(url: str) -> dict[str, Any] | None:\n",[232,839,841],{"class":234,"line":840},14,[232,842,843],{},"    \"\"\"Effectuer une requête vers l'API Open-Meteo avec gestion d'erreur appropriée.\"\"\"\n",[232,845,847],{"class":234,"line":846},15,[232,848,849],{},"    headers = {\n",[232,851,853],{"class":234,"line":852},16,[232,854,855],{},"        \"User-Agent\": USER_AGENT,\n",[232,857,859],{"class":234,"line":858},17,[232,860,861],{},"        \"Accept\": \"application/json\"\n",[232,863,865],{"class":234,"line":864},18,[232,866,867],{},"    }\n",[232,869,871],{"class":234,"line":870},19,[232,872,873],{},"    async with httpx.AsyncClient() as client:\n",[232,875,877],{"class":234,"line":876},20,[232,878,879],{},"        try:\n",[232,881,883],{"class":234,"line":882},21,[232,884,885],{},"            response = await client.get(url, headers=headers, timeout=30.0)\n",[232,887,889],{"class":234,"line":888},22,[232,890,891],{},"            response.raise_for_status()\n",[232,893,895],{"class":234,"line":894},23,[232,896,897],{},"            return response.json()\n",[232,899,901],{"class":234,"line":900},24,[232,902,903],{},"        except Exception:\n",[232,905,907],{"class":234,"line":906},25,[232,908,909],{},"            return None\n",[232,911,913],{"class":234,"line":912},26,[232,914,266],{"emptyLinePlaceholder":265},[232,916,918],{"class":234,"line":917},27,[232,919,920],{},"if __name__ == \"__main__\":\n",[232,922,924],{"class":234,"line":923},28,[232,925,926],{},"    mcp.run(transport='stdio')\n",[68,928,930,936],{"className":929},[79,80,81],[83,931,933],{"id":932},"création-des-outils-météorologiques",[87,934,935],{},"Création des Outils Météorologiques",[73,937,938],{},[93,939,940],{"href":95},[87,941,98],{},[68,943,945],{"className":944},[71],[73,946,947],{},"Les outils sont le cœur des serveurs MCP. Ils exposent des fonctionnalités exécutables que les modèles de langage peuvent invoquer. Notre outil météorologique récupérera les conditions actuelles et les prévisions basées sur les coordonnées géographiques.",[223,949,951],{"className":771,"code":950,"language":773,"meta":228,"style":228},"@mcp.tool()\nasync def get_current_weather(latitude: float, longitude: float) -> str:\n    \"\"\"Obtenir la météo actuelle pour un emplacement.\n\n    Args:\n        latitude: Latitude de l'emplacement\n        longitude: Longitude de l'emplacement\n    \"\"\"\n    \n    url = f\"{OPENMETEO_API_BASE}/forecast?latitude={latitude}&longitude={longitude}&current=temperature_2m,is_day,showers,cloud_cover,wind_speed_10m,wind_direction_10m,pressure_msl,snowfall,precipitation,relative_humidity_2m,apparent_temperature,rain,weather_code,surface_pressure,wind_gusts_10m\"\n    \n    data = await make_openmeteo_request(url)\n\n    if not data:\n        return \"Impossible de récupérer les données météorologiques actuelles pour cet emplacement.\"\n\n    return data\n\n@mcp.tool()\nasync def get_forecast(latitude: float, longitude: float, days: int = 7) -> str:\n    \"\"\"Obtenir les prévisions météorologiques pour un emplacement.\n\n    Args:\n        latitude: Latitude de l'emplacement\n        longitude: Longitude de l'emplacement  \n        days: Nombre de jours à prévoir (1-16)\n    \"\"\"\n    \n    url = f\"{OPENMETEO_API_BASE}/forecast?latitude={latitude}&longitude={longitude}&daily=temperature_2m_max,temperature_2m_min,precipitation_sum,wind_speed_10m_max,weather_code&forecast_days={days}\"\n    \n    data = await make_openmeteo_request(url)\n    \n    if not data:\n        return \"Impossible de récupérer les données de prévision pour cet emplacement.\"\n    \n    return data\n",[218,952,953,958,963,968,972,977,982,987,992,997,1002,1006,1011,1015,1020,1025,1029,1034,1038,1042,1047,1052,1056,1060,1064,1069,1074,1078,1082,1088,1093,1098,1103,1108,1114,1119],{"__ignoreMap":228},[232,954,955],{"class":234,"line":235},[232,956,957],{},"@mcp.tool()\n",[232,959,960],{"class":234,"line":242},[232,961,962],{},"async def get_current_weather(latitude: float, longitude: float) -> str:\n",[232,964,965],{"class":234,"line":253},[232,966,967],{},"    \"\"\"Obtenir la météo actuelle pour un emplacement.\n",[232,969,970],{"class":234,"line":262},[232,971,266],{"emptyLinePlaceholder":265},[232,973,974],{"class":234,"line":269},[232,975,976],{},"    Args:\n",[232,978,979],{"class":234,"line":275},[232,980,981],{},"        latitude: Latitude de l'emplacement\n",[232,983,984],{"class":234,"line":283},[232,985,986],{},"        longitude: Longitude de l'emplacement\n",[232,988,989],{"class":234,"line":288},[232,990,991],{},"    \"\"\"\n",[232,993,994],{"class":234,"line":294},[232,995,996],{},"    \n",[232,998,999],{"class":234,"line":302},[232,1000,1001],{},"    url = f\"{OPENMETEO_API_BASE}/forecast?latitude={latitude}&longitude={longitude}&current=temperature_2m,is_day,showers,cloud_cover,wind_speed_10m,wind_direction_10m,pressure_msl,snowfall,precipitation,relative_humidity_2m,apparent_temperature,rain,weather_code,surface_pressure,wind_gusts_10m\"\n",[232,1003,1004],{"class":234,"line":311},[232,1005,996],{},[232,1007,1008],{"class":234,"line":316},[232,1009,1010],{},"    data = await make_openmeteo_request(url)\n",[232,1012,1013],{"class":234,"line":322},[232,1014,266],{"emptyLinePlaceholder":265},[232,1016,1017],{"class":234,"line":840},[232,1018,1019],{},"    if not data:\n",[232,1021,1022],{"class":234,"line":846},[232,1023,1024],{},"        return \"Impossible de récupérer les données météorologiques actuelles pour cet emplacement.\"\n",[232,1026,1027],{"class":234,"line":852},[232,1028,266],{"emptyLinePlaceholder":265},[232,1030,1031],{"class":234,"line":858},[232,1032,1033],{},"    return data\n",[232,1035,1036],{"class":234,"line":864},[232,1037,266],{"emptyLinePlaceholder":265},[232,1039,1040],{"class":234,"line":870},[232,1041,957],{},[232,1043,1044],{"class":234,"line":876},[232,1045,1046],{},"async def get_forecast(latitude: float, longitude: float, days: int = 7) -> str:\n",[232,1048,1049],{"class":234,"line":882},[232,1050,1051],{},"    \"\"\"Obtenir les prévisions météorologiques pour un emplacement.\n",[232,1053,1054],{"class":234,"line":888},[232,1055,266],{"emptyLinePlaceholder":265},[232,1057,1058],{"class":234,"line":894},[232,1059,976],{},[232,1061,1062],{"class":234,"line":900},[232,1063,981],{},[232,1065,1066],{"class":234,"line":906},[232,1067,1068],{},"        longitude: Longitude de l'emplacement  \n",[232,1070,1071],{"class":234,"line":912},[232,1072,1073],{},"        days: Nombre de jours à prévoir (1-16)\n",[232,1075,1076],{"class":234,"line":917},[232,1077,991],{},[232,1079,1080],{"class":234,"line":923},[232,1081,996],{},[232,1083,1085],{"class":234,"line":1084},29,[232,1086,1087],{},"    url = f\"{OPENMETEO_API_BASE}/forecast?latitude={latitude}&longitude={longitude}&daily=temperature_2m_max,temperature_2m_min,precipitation_sum,wind_speed_10m_max,weather_code&forecast_days={days}\"\n",[232,1089,1091],{"class":234,"line":1090},30,[232,1092,996],{},[232,1094,1096],{"class":234,"line":1095},31,[232,1097,1010],{},[232,1099,1101],{"class":234,"line":1100},32,[232,1102,996],{},[232,1104,1106],{"class":234,"line":1105},33,[232,1107,1019],{},[232,1109,1111],{"class":234,"line":1110},34,[232,1112,1113],{},"        return \"Impossible de récupérer les données de prévision pour cet emplacement.\"\n",[232,1115,1117],{"class":234,"line":1116},35,[232,1118,996],{},[232,1120,1122],{"class":234,"line":1121},36,[232,1123,1033],{},[68,1125,1127,1133],{"className":1126},[79,80,81],[83,1128,1130],{"id":1129},"test-de-votre-serveur-mcp",[87,1131,1132],{},"Test de Votre Serveur MCP",[73,1134,1135],{},[93,1136,1137],{"href":95},[87,1138,98],{},[68,1140,1142,1151],{"className":1141},[102,103,104,105,106,107],[68,1143,1144],{},[73,1145,1146],{},[113,1147],{"alt":1148,"className":1149,"height":118,"src":1150,"style":120},"Interface MCP Inspector",[117],"/blog/mcp/mcp-inspector.png",[68,1152,1154],{"className":1153},[71],[73,1155,1156],{},"Le MCP Inspector fournit une interface web pour tester votre serveur avant de l'intégrer avec les modèles de langage. Cet outil est inestimable pour le débogage et la validation.",[223,1158,1160],{"className":225,"code":1159,"language":227,"meta":228,"style":228},"# Démarrer le serveur MCP en mode développement\nmcp dev server.py\n\n# Ouvrir le navigateur sur http://localhost:5173\n# Se connecter au serveur\n# Naviguer vers l'onglet Outils\n# Tester get_current_weather avec des coordonnées\n# Exemple : latitude=63.4463991, longitude=10.8127596\n",[218,1161,1162,1167,1178,1182,1187,1192,1197,1202],{"__ignoreMap":228},[232,1163,1164],{"class":234,"line":235},[232,1165,1166],{"class":238},"# Démarrer le serveur MCP en mode développement\n",[232,1168,1169,1172,1175],{"class":234,"line":242},[232,1170,1171],{"class":245},"mcp",[232,1173,1174],{"class":249}," dev",[232,1176,1177],{"class":249}," server.py\n",[232,1179,1180],{"class":234,"line":253},[232,1181,266],{"emptyLinePlaceholder":265},[232,1183,1184],{"class":234,"line":262},[232,1185,1186],{"class":238},"# Ouvrir le navigateur sur http://localhost:5173\n",[232,1188,1189],{"class":234,"line":269},[232,1190,1191],{"class":238},"# Se connecter au serveur\n",[232,1193,1194],{"class":234,"line":275},[232,1195,1196],{"class":238},"# Naviguer vers l'onglet Outils\n",[232,1198,1199],{"class":234,"line":283},[232,1200,1201],{"class":238},"# Tester get_current_weather avec des coordonnées\n",[232,1203,1204],{"class":234,"line":288},[232,1205,1206],{"class":238},"# Exemple : latitude=63.4463991, longitude=10.8127596\n",[68,1208,1210,1216],{"className":1209},[79,80,81],[83,1211,1213],{"id":1212},"principes-de-conception-clés",[87,1214,1215],{},"Principes de Conception Clés",[73,1217,1218],{},[93,1219,1220],{"href":95},[87,1221,98],{},[68,1223,1225,1228,1233],{"className":1224},[71],[73,1226,1227],{},"Lors de la construction de serveurs MCP, résistez à la tentation de formater les données retournées dans vos outils. Au lieu de cela, retournez les données brutes et laissez le modèle de langage les traiter et les formater de manière appropriée. Cette approche tire parti des capacités de langage naturel du LLM tout en maintenant l'intégrité des données.",[73,1229,1230],{},[87,1231,1232],{},"Meilleures Pratiques :",[137,1234,1235,1238,1241,1244,1247],{},[140,1236,1237],{},"Retourner des jeux de données complets plutôt que des résumés filtrés",[140,1239,1240],{},"Utiliser des noms d'outils descriptifs et de la documentation",[140,1242,1243],{},"Implémenter une gestion d'erreur appropriée pour les échecs d'API",[140,1245,1246],{},"Garder les outils focalisés sur des responsabilités uniques",[140,1248,1249],{},"Tirer parti d'async/await pour de meilleures performances",[68,1251,1253,1259],{"className":1252},[79,80,81],[83,1254,1256],{"id":1255},"extension-de-votre-serveur",[87,1257,1258],{},"Extension de Votre Serveur",[73,1260,1261],{},[93,1262,1263],{"href":95},[87,1264,98],{},[68,1266,1268,1271,1277,1283,1289],{"className":1267},[71],[73,1269,1270],{},"Une fois que vous avez un serveur météorologique de base fonctionnel, considérez l'ajout de ces améliorations :",[73,1272,1273,1276],{},[87,1274,1275],{},"Services de Localisation :"," Intégrer l'API de Géocodage Open-Meteo pour convertir les noms de villes en coordonnées, réduisant la dépendance au LLM pour la génération de coordonnées.",[73,1278,1279,1282],{},[87,1280,1281],{},"Données Historiques :"," Ajouter des outils pour accéder aux modèles météorologiques historiques et aux données climatiques.",[73,1284,1285,1288],{},[87,1286,1287],{},"Alertes et Avertissements :"," Implémenter la surveillance d'alertes météorologiques pour les conditions météorologiques sévères.",[73,1290,1291,1294],{},[87,1292,1293],{},"Emplacements Multiples :"," Supporter les requêtes par lot pour comparer la météo à travers plusieurs emplacements.",[223,1296,1298],{"className":771,"code":1297,"language":773,"meta":228,"style":228},"@mcp.tool()\nasync def get_location(city: str, country: str = \"\") -> str:\n    \"\"\"Obtenir les coordonnées d'une ville en utilisant le géocodage.\n    \n    Args:\n        city: Nom de la ville\n        country: Nom du pays optionnel pour désambiguïsation\n    \"\"\"\n    \n    query = f\"{city},{country}\" if country else city\n    url = f\"https://geocoding-api.open-meteo.com/v1/search?name={query}&count=1&language=fr&format=json\"\n    \n    data = await make_openmeteo_request(url)\n    \n    if not data or not data.get('results'):\n        return \"Emplacement non trouvé.\"\n    \n    return data['results'][0]\n",[218,1299,1300,1304,1309,1314,1318,1322,1327,1332,1336,1340,1345,1350,1354,1358,1362,1367,1372,1376],{"__ignoreMap":228},[232,1301,1302],{"class":234,"line":235},[232,1303,957],{},[232,1305,1306],{"class":234,"line":242},[232,1307,1308],{},"async def get_location(city: str, country: str = \"\") -> str:\n",[232,1310,1311],{"class":234,"line":253},[232,1312,1313],{},"    \"\"\"Obtenir les coordonnées d'une ville en utilisant le géocodage.\n",[232,1315,1316],{"class":234,"line":262},[232,1317,996],{},[232,1319,1320],{"class":234,"line":269},[232,1321,976],{},[232,1323,1324],{"class":234,"line":275},[232,1325,1326],{},"        city: Nom de la ville\n",[232,1328,1329],{"class":234,"line":283},[232,1330,1331],{},"        country: Nom du pays optionnel pour désambiguïsation\n",[232,1333,1334],{"class":234,"line":288},[232,1335,991],{},[232,1337,1338],{"class":234,"line":294},[232,1339,996],{},[232,1341,1342],{"class":234,"line":302},[232,1343,1344],{},"    query = f\"{city},{country}\" if country else city\n",[232,1346,1347],{"class":234,"line":311},[232,1348,1349],{},"    url = f\"https://geocoding-api.open-meteo.com/v1/search?name={query}&count=1&language=fr&format=json\"\n",[232,1351,1352],{"class":234,"line":316},[232,1353,996],{},[232,1355,1356],{"class":234,"line":322},[232,1357,1010],{},[232,1359,1360],{"class":234,"line":840},[232,1361,996],{},[232,1363,1364],{"class":234,"line":846},[232,1365,1366],{},"    if not data or not data.get('results'):\n",[232,1368,1369],{"class":234,"line":852},[232,1370,1371],{},"        return \"Emplacement non trouvé.\"\n",[232,1373,1374],{"class":234,"line":858},[232,1375,996],{},[232,1377,1378],{"class":234,"line":864},[232,1379,1380],{},"    return data['results'][0]\n",[68,1382,1384,1390],{"className":1383},[79,80,81],[83,1385,1387],{"id":1386},"intégration-avec-les-modèles-de-langage",[87,1388,1389],{},"Intégration avec les Modèles de Langage",[73,1391,1392],{},[93,1393,1394],{"href":95},[87,1395,98],{},[68,1397,1399],{"className":1398},[71],[73,1400,1401],{},"Votre serveur MCP peut s'intégrer avec divers modèles de langage incluant Claude Desktop, GPT-4 à travers des clients compatibles, et d'autres applications compatibles MCP. Le serveur communique à travers l'entrée/sortie standard (stdio), le rendant universellement compatible.",[73,1403,1404,1405,1408],{},"Pour utiliser avec Claude Desktop, ajoutez votre configuration de serveur au fichier de paramètres MCP, typiquement situé à ",[218,1406,1407],{},"~/Library/Application Support/Claude/claude_desktop_config.json"," sur macOS.",[223,1410,1412],{"className":363,"code":1411,"language":365,"meta":228,"style":228},"{\n  \"mcpServers\": {\n    \"weather\": {\n      \"command\": \"uv\",\n      \"args\": [\"run\", \"python\", \"server.py\"],\n      \"cwd\": \"/chemin/vers/votre/mcp-server-weather\"\n    }\n  }\n}\n",[218,1413,1414,1419,1434,1448,1470,1511,1530,1534,1539],{"__ignoreMap":228},[232,1415,1416],{"class":234,"line":235},[232,1417,1418],{"class":330},"{\n",[232,1420,1421,1424,1427,1429,1431],{"class":234,"line":242},[232,1422,1423],{"class":330},"  \"",[232,1425,1426],{"class":377},"mcpServers",[232,1428,337],{"class":330},[232,1430,383],{"class":330},[232,1432,1433],{"class":330}," {\n",[232,1435,1436,1439,1442,1444,1446],{"class":234,"line":253},[232,1437,1438],{"class":330},"    \"",[232,1440,1441],{"class":245},"weather",[232,1443,337],{"class":330},[232,1445,383],{"class":330},[232,1447,1433],{"class":330},[232,1449,1450,1453,1457,1459,1461,1463,1465,1467],{"class":234,"line":262},[232,1451,1452],{"class":330},"      \"",[232,1454,1456],{"class":1455},"sbssI","command",[232,1458,337],{"class":330},[232,1460,383],{"class":330},[232,1462,331],{"class":330},[232,1464,220],{"class":249},[232,1466,337],{"class":330},[232,1468,1469],{"class":330},",\n",[232,1471,1472,1474,1477,1479,1481,1484,1486,1489,1491,1493,1495,1497,1499,1501,1503,1506,1508],{"class":234,"line":269},[232,1473,1452],{"class":330},[232,1475,1476],{"class":1455},"args",[232,1478,337],{"class":330},[232,1480,383],{"class":330},[232,1482,1483],{"class":330}," [",[232,1485,337],{"class":330},[232,1487,1488],{"class":249},"run",[232,1490,337],{"class":330},[232,1492,393],{"class":330},[232,1494,331],{"class":330},[232,1496,773],{"class":249},[232,1498,337],{"class":330},[232,1500,393],{"class":330},[232,1502,331],{"class":330},[232,1504,1505],{"class":249},"server.py",[232,1507,337],{"class":330},[232,1509,1510],{"class":330},"],\n",[232,1512,1513,1515,1518,1520,1522,1524,1527],{"class":234,"line":275},[232,1514,1452],{"class":330},[232,1516,1517],{"class":1455},"cwd",[232,1519,337],{"class":330},[232,1521,383],{"class":330},[232,1523,331],{"class":330},[232,1525,1526],{"class":249},"/chemin/vers/votre/mcp-server-weather",[232,1528,1529],{"class":330},"\"\n",[232,1531,1532],{"class":234,"line":283},[232,1533,867],{"class":330},[232,1535,1536],{"class":234,"line":288},[232,1537,1538],{"class":330},"  }\n",[232,1540,1541],{"class":234,"line":294},[232,1542,1543],{"class":330},"}\n",[68,1545,1547,1553],{"className":1546},[79,80,81],[83,1548,1550],{"id":1549},"conclusion",[87,1551,1552],{},"Conclusion",[73,1554,1555],{},[93,1556,1557],{"href":95},[87,1558,98],{},[68,1560,1562,1565],{"className":1561},[71],[73,1563,1564],{},"La construction de serveurs MCP ouvre de nouvelles possibilités pour l'intégration de l'IA avec les sources de données du monde réel. Ce serveur météorologique démontre les concepts fondamentaux qui s'appliquent à toute intégration d'API externe ou de service. Le Model Context Protocol représente un pas significatif vers des systèmes d'IA plus capables et connectés.",[73,1566,1567],{},"Le code source complet pour ce tutoriel est disponible dans le dépôt des fichiers d'exercice. Expérimentez avec différentes APIs, ajoutez de nouveaux outils, et explorez les possibilités infinies du développement de serveurs MCP.",[68,1569,1572],{"className":1570},[79,1571,81],"justify-end",[73,1573,1574],{},[93,1575,1577],{"href":57,"rel":1576},[125],"#OuverteAuxCollaborationsFreelance",[68,1579,1585],{"className":1580},[1581,1582,1583,1584],"text-md","text-center","mt-10","font-bold",[73,1586,1587],{},[93,1588,1589],{"href":95},[87,1590,98],{},[1592,1593,1594],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":228,"searchDepth":242,"depth":242,"links":1596},[1597,1598,1599,1600,1601,1602,1603,1604,1605,1606],{"id":85,"depth":242,"text":89},{"id":163,"depth":242,"text":166},{"id":201,"depth":242,"text":204},{"id":346,"depth":242,"text":349},{"id":932,"depth":242,"text":935},{"id":1129,"depth":242,"text":1132},{"id":1212,"depth":242,"text":1215},{"id":1255,"depth":242,"text":1258},{"id":1386,"depth":242,"text":1389},{"id":1549,"depth":242,"text":1552},"2025-06-01","Apprenez à créer un serveur Model Context Protocol (MCP) en utilisant Python et l'API Open-Meteo pour fournir des données météorologiques aux modèles de langage comme GPT-4 et Claude.","md",{"src":1611},"/blog/mcp/mcp-cover.png",{},{"title":23,"description":1608},"F458zeQnEhe_o8Ydhx3dx9iGkSe4WoRy7kzhh_eDBGE",[1616,2601],{"id":1617,"title":19,"authors":1618,"badge":1621,"body":1624,"date":2595,"description":2596,"extension":1609,"image":2597,"meta":2598,"navigation":265,"path":20,"seo":2599,"stem":21,"__hash__":2600},"posts_fr/fr/blog/1. mcp-security.md",[1619],{"name":55,"description":56,"to":57,"avatar":1620},{"src":59},{"label":1622,"color":1623,"variant":63},"Sécurité","primary",{"type":65,"value":1625,"toc":2582},[1626,1632,1654,1669,1675,1680,1740,1744,1801,1805,1845,1860,2068,2083,2183,2198,2241,2286,2301,2346,2361,2537,2552,2570,2579],[73,1627,1628],{},[93,1629,1631],{"href":1630},"/blog/","Retour au Blog",[68,1633,1635],{"className":1634},[71],[73,1636,1637,1638,1641,1642,1645,1646,1649,1650,1653],{},"Le Protocole de Contexte de Modèle (MCP) est un framework pour la communication structurée entre clients et serveurs utilisant JSON-RPC 2.0. Il permet l'échange de messages à granularité fine dans des systèmes distribués ou modulaires, y compris ceux impliquant des modèles d'IA, des agents modulaires ou l'orchestration de services. Lors de l'utilisation de protocoles légers comme JSON-RPC 2.0 pour la communication MCP, les développeurs font face à plusieurs défis de sécurité. Cet article décrit les ",[87,1639,1640],{},"problèmes critiques",", les ",[87,1643,1644],{},"meilleures solutions"," et les ",[87,1647,1648],{},"outils pratiques pour développeurs"," pour assurer des ",[87,1651,1652],{},"systèmes MCP robustes et sécurisés",".",[68,1655,1657,1663],{"className":1656},[79,80,81],[83,1658,1660],{"id":1659},"guide-visuel-de-larchitecture-de-sécurité-mcp",[87,1661,1662],{},"Guide Visuel de l'Architecture de Sécurité MCP",[73,1664,1665],{},[93,1666,1667],{"href":95},[87,1668,98],{},[68,1670,1672],{"className":1671},[71],[73,1673,1674],{},"Ce guide fournit un aperçu visuel et pratique de la sécurisation des systèmes MCP, incluant la signature de messages, la gestion de sessions et les modèles d'architecture du monde réel. Il s'adresse aux développeurs et architectes construisant des systèmes modulaires, basés sur des agents ou distribués d'IA.",[1676,1677,1679],"h3",{"id":1678},"flux-de-signature-et-vérification-de-messages","Flux de Signature et Vérification de Messages",[223,1681,1685],{"className":1682,"code":1683,"language":1684,"meta":228,"style":228},"language-mermaid shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","sequenceDiagram\n  participant Client\n  participant Serveur\n\n  Client->>Client: Sérialiser méthode + paramètres\n  Client->>Client: Signer payload avec clé privée\n  Client->>Serveur: Envoyer JSON-RPC + signature + clé publique\n\n  Serveur->>Serveur: Canonicaliser méthode + paramètres\n  Serveur->>Serveur: Vérifier signature avec clé publique\n  Serveur-->>Client: Traiter ou rejeter\n","mermaid",[218,1686,1687,1692,1697,1702,1706,1711,1716,1721,1725,1730,1735],{"__ignoreMap":228},[232,1688,1689],{"class":234,"line":235},[232,1690,1691],{},"sequenceDiagram\n",[232,1693,1694],{"class":234,"line":242},[232,1695,1696],{},"  participant Client\n",[232,1698,1699],{"class":234,"line":253},[232,1700,1701],{},"  participant Serveur\n",[232,1703,1704],{"class":234,"line":262},[232,1705,266],{"emptyLinePlaceholder":265},[232,1707,1708],{"class":234,"line":269},[232,1709,1710],{},"  Client->>Client: Sérialiser méthode + paramètres\n",[232,1712,1713],{"class":234,"line":275},[232,1714,1715],{},"  Client->>Client: Signer payload avec clé privée\n",[232,1717,1718],{"class":234,"line":283},[232,1719,1720],{},"  Client->>Serveur: Envoyer JSON-RPC + signature + clé publique\n",[232,1722,1723],{"class":234,"line":288},[232,1724,266],{"emptyLinePlaceholder":265},[232,1726,1727],{"class":234,"line":294},[232,1728,1729],{},"  Serveur->>Serveur: Canonicaliser méthode + paramètres\n",[232,1731,1732],{"class":234,"line":302},[232,1733,1734],{},"  Serveur->>Serveur: Vérifier signature avec clé publique\n",[232,1736,1737],{"class":234,"line":311},[232,1738,1739],{},"  Serveur-->>Client: Traiter ou rejeter\n",[1676,1741,1743],{"id":1742},"initialisation-sécurisée-de-session","Initialisation Sécurisée de Session",[223,1745,1747],{"className":1682,"code":1746,"language":1684,"meta":228,"style":228},"sequenceDiagram\n  participant Coordinateur\n  participant Agent A\n  participant Agent B\n\n  Agent A->>Coordinateur: Demander démarrage de session\n  Coordinateur->>Agent A: Envoyer UUID de session + token\n  Agent A->>Agent B: Partager contexte avec token\n  Agent B->>Coordinateur: Vérifier session + rejoindre\n\n  Note over Coordinateur: Le coordinateur suit les rôles, tours et état\n",[218,1748,1749,1753,1758,1763,1768,1772,1777,1782,1787,1792,1796],{"__ignoreMap":228},[232,1750,1751],{"class":234,"line":235},[232,1752,1691],{},[232,1754,1755],{"class":234,"line":242},[232,1756,1757],{},"  participant Coordinateur\n",[232,1759,1760],{"class":234,"line":253},[232,1761,1762],{},"  participant Agent A\n",[232,1764,1765],{"class":234,"line":262},[232,1766,1767],{},"  participant Agent B\n",[232,1769,1770],{"class":234,"line":269},[232,1771,266],{"emptyLinePlaceholder":265},[232,1773,1774],{"class":234,"line":275},[232,1775,1776],{},"  Agent A->>Coordinateur: Demander démarrage de session\n",[232,1778,1779],{"class":234,"line":283},[232,1780,1781],{},"  Coordinateur->>Agent A: Envoyer UUID de session + token\n",[232,1783,1784],{"class":234,"line":288},[232,1785,1786],{},"  Agent A->>Agent B: Partager contexte avec token\n",[232,1788,1789],{"class":234,"line":294},[232,1790,1791],{},"  Agent B->>Coordinateur: Vérifier session + rejoindre\n",[232,1793,1794],{"class":234,"line":302},[232,1795,266],{"emptyLinePlaceholder":265},[232,1797,1798],{"class":234,"line":311},[232,1799,1800],{},"  Note over Coordinateur: Le coordinateur suit les rôles, tours et état\n",[1676,1802,1804],{"id":1803},"routage-de-contexte-mcp","Routage de Contexte MCP",[223,1806,1808],{"className":1682,"code":1807,"language":1684,"meta":228,"style":228},"graph TD\n  A[Client] -->|JSON-RPC| B[Coordinateur]\n  B -->|Routage de Session| C1[Agent A]\n  B -->|Routage de Session| C2[Agent B]\n  C1 -->|Message de Contexte| C2\n  C2 -->|Réponse| C1\n  B -->|Observabilité| D[Stockage de Logs Signés]\n",[218,1809,1810,1815,1820,1825,1830,1835,1840],{"__ignoreMap":228},[232,1811,1812],{"class":234,"line":235},[232,1813,1814],{},"graph TD\n",[232,1816,1817],{"class":234,"line":242},[232,1818,1819],{},"  A[Client] -->|JSON-RPC| B[Coordinateur]\n",[232,1821,1822],{"class":234,"line":253},[232,1823,1824],{},"  B -->|Routage de Session| C1[Agent A]\n",[232,1826,1827],{"class":234,"line":262},[232,1828,1829],{},"  B -->|Routage de Session| C2[Agent B]\n",[232,1831,1832],{"class":234,"line":269},[232,1833,1834],{},"  C1 -->|Message de Contexte| C2\n",[232,1836,1837],{"class":234,"line":275},[232,1838,1839],{},"  C2 -->|Réponse| C1\n",[232,1841,1842],{"class":234,"line":283},[232,1843,1844],{},"  B -->|Observabilité| D[Stockage de Logs Signés]\n",[68,1846,1848,1854],{"className":1847},[79,80,81],[83,1849,1851],{"id":1850},"problèmes-critiques-de-sécurité-dans-mcp-basé-sur-json-rpc",[87,1852,1853],{},"Problèmes Critiques de Sécurité dans MCP Basé sur JSON-RPC",[73,1855,1856],{},[93,1857,1858],{"href":95},[87,1859,98],{},[1861,1862,1863,1882],"table",{},[1864,1865,1866],"thead",{},[1867,1868,1869,1873,1876,1879],"tr",{},[1870,1871,1872],"th",{},"Zone",[1870,1874,1875],{},"Problème Critique",[1870,1877,1878],{},"Pourquoi C'est Important dans MCP",[1870,1880,1881],{},"Solution",[1883,1884,1885,1900,1914,1928,1942,1956,1970,1984,1998,2012,2026,2040,2054],"tbody",{},[1867,1886,1887,1891,1894,1897],{},[1888,1889,1890],"td",{},"🗭 Coordination",[1888,1892,1893],{},"Pas de routage natif multi-parties",[1888,1895,1896],{},"MCP implique souvent l'orchestration de plusieurs services ou agents",[1888,1898,1899],{},"Implémenter un service coordinateur pour gérer le routage, les rôles et les relais de messages",[1867,1901,1902,1905,1908,1911],{},[1888,1903,1904],{},"🔐 Identité",[1888,1906,1907],{},"Pas de couche d'identité/auth/session",[1888,1909,1910],{},"Vous devez authentifier et vérifier l'origine du message",[1888,1912,1913],{},"Utiliser DIDs, mTLS ou couches d'identité basées sur signature avec tokens de session",[1867,1915,1916,1919,1922,1925],{},[1888,1917,1918],{},"⚠️ Erreurs",[1888,1920,1921],{},"Mauvaise observabilité et sémantique d'erreurs",[1888,1923,1924],{},"Difficile de tracer les échecs dans les flux de modèles contextuels",[1888,1926,1927],{},"Ajouter logs signés, codes d'erreur structurés et tableaux de bord de trace",[1867,1929,1930,1933,1936,1939],{},[1888,1931,1932],{},"📦 Types de Données",[1888,1934,1935],{},"Pas de support pour données binaires/complexes",[1888,1937,1938],{},"Les paramètres et réponses du modèle peuvent ne pas s'adapter facilement au JSON",[1888,1940,1941],{},"Utiliser encodage base64, CBOR ou attacher payloads structurés en dehors des champs JSON-RPC centraux",[1867,1943,1944,1947,1950,1953],{},[1888,1945,1946],{},"🧪 Tests",[1888,1948,1949],{},"Pas de simulation ou d'outils étape par étape",[1888,1951,1952],{},"Besoin de replay de protocole et de débogage",[1888,1954,1955],{},"Construire des harnais de test déterministes avec replay de protocole et mocking d'agents",[1867,1957,1958,1961,1964,1967],{},[1888,1959,1960],{},"🧱 Persistance",[1888,1962,1963],{},"Pas de session/mémoire entre appels",[1888,1965,1966],{},"La continuité du contexte entre appels de modèle nécessite état et rôles suivis",[1888,1968,1969],{},"Utiliser Redis ou stockage de session en mémoire pour persister l'état de rôle, tour et message",[1867,1971,1972,1975,1978,1981],{},[1888,1973,1974],{},"💨 Agents Malveillants",[1888,1976,1977],{},"N'importe quel acteur peut injecter logique ou contexte nuisible",[1888,1979,1980],{},"Les agents malveillants peuvent faire dérailler ou empoisonner l'exécution du modèle",[1888,1982,1983],{},"Utiliser sandboxing (ex. VM2/WASM), validation de comportement et listes autorisées pour flux de contexte",[1867,1985,1986,1989,1992,1995],{},[1888,1987,1988],{},"🦮 Dérive de Session",[1888,1990,1991],{},"Les agents peuvent désynchroniser données de contexte/tour",[1888,1993,1994],{},"Conduit à conditions de course, hallucinations ou écrasement de contexte",[1888,1996,1997],{},"Utiliser snapshots de session signés, compteurs de tour et outils de replay du coordinateur",[1867,1999,2000,2003,2006,2009],{},[1888,2001,2002],{},"🔄 Attaques de Replay",[1888,2004,2005],{},"Réutilisation de messages valides entre contextes",[1888,2007,2008],{},"Non détecté, peut manipuler le comportement ou la sortie de l'agent",[1888,2010,2011],{},"Tokens horodatés, validation de nonce ou chaînes de hash pour assurer la fraîcheur",[1867,2013,2014,2017,2020,2023],{},[1888,2015,2016],{},"🛨️ Atténuation d'Agents Malveillants",[1888,2018,2019],{},"Agents compromis agissant dans une session valide",[1888,2021,2022],{},"Menace l'intégrité du système",[1888,2024,2025],{},"Appliquer règles de comportement, utiliser sandboxes sécurisés et valider modèles d'entrée/sortie",[1867,2027,2028,2031,2034,2037],{},[1888,2029,2030],{},"🌐 Identité Décentralisée (DIDs)",[1888,2032,2033],{},"Manque de résolution d'identité globale fiable",[1888,2035,2036],{},"Nécessaire pour délégation de confiance sécurisée entre agents",[1888,2038,2039],{},"Adopter DIDs W3C et résoudre clés via Documents DID ou registres de clés",[1867,2041,2042,2045,2048,2051],{},[1888,2043,2044],{},"📡 Gestion Sécurisée de Sessions",[1888,2046,2047],{},"Les sessions peuvent être piratées, perdues ou incohérentes",[1888,2049,2050],{},"Critique pour état du modèle, contexte et protection replay",[1888,2052,2053],{},"Suivre sessions via coordinateur, assigner IDs uniques, utiliser clés par session",[1867,2055,2056,2059,2062,2065],{},[1888,2057,2058],{},"🔄 Protection Replay et Course",[1888,2060,2061],{},"Requêtes dupliquées ou réordonnées peuvent causer erreurs",[1888,2063,2064],{},"Les agents peuvent mal se comporter ou retraiter anciennes données",[1888,2066,2067],{},"Utiliser nonces, timestamps et compteurs de tour dans chaque message",[68,2069,2071,2077],{"className":2070},[79,80,81],[83,2072,2074],{"id":2073},"tableau-de-vue-densemble-des-capacités",[87,2075,2076],{},"Tableau de Vue d'Ensemble des Capacités",[73,2078,2079],{},[93,2080,2081],{"href":95},[87,2082,98],{},[1861,2084,2085,2107],{},[1864,2086,2087],{},[1867,2088,2089,2092,2095,2098,2101,2104],{},[1870,2090,2091],{},"Capacité",[1870,2093,2094],{},"Contrôlé Par",[1870,2096,2097],{},"Direction",[1870,2099,2100],{},"Effets Secondaires",[1870,2102,2103],{},"Approbation Nécessaire",[1870,2105,2106],{},"Cas d'Usage Typiques",[1883,2108,2109,2128,2146,2164],{},[1867,2110,2111,2113,2116,2119,2122,2125],{},[1888,2112,150],{},[1888,2114,2115],{},"Modèle (LLM)",[1888,2117,2118],{},"Client → Serveur",[1888,2120,2121],{},"Oui (potentiellement)",[1888,2123,2124],{},"Oui",[1888,2126,2127],{},"Actions, appels API, manipulation de données",[1867,2129,2130,2132,2135,2137,2140,2143],{},[1888,2131,144],{},[1888,2133,2134],{},"Application",[1888,2136,2118],{},[1888,2138,2139],{},"Non (lecture seule)",[1888,2141,2142],{},"Généralement non",[1888,2144,2145],{},"Récupération de données, collecte de contexte",[1867,2147,2148,2150,2153,2156,2159,2161],{},[1888,2149,156],{},[1888,2151,2152],{},"Utilisateur",[1888,2154,2155],{},"Serveur → Client",[1888,2157,2158],{},"Non",[1888,2160,2158],{},[1888,2162,2163],{},"Flux guidés, modèles spécialisés",[1867,2165,2166,2169,2172,2175,2178,2180],{},[1888,2167,2168],{},"Échantillonnage",[1888,2170,2171],{},"Serveur",[1888,2173,2174],{},"Serveur → Client → Serveur",[1888,2176,2177],{},"Indirectement",[1888,2179,2124],{},[1888,2181,2182],{},"Tâches multi-étapes, comportements agentiques",[68,2184,2186,2192],{"className":2185},[79,80,81],[83,2187,2189],{"id":2188},"architecture-de-référence-du-monde-réel",[87,2190,2191],{},"Architecture de Référence du Monde Réel",[73,2193,2194],{},[93,2195,2196],{"href":95},[87,2197,98],{},[137,2199,2200,2206,2212,2218,2224,2230,2235],{},[140,2201,2202,2205],{},[87,2203,2204],{},"Frontend",": Nuxt 3 (avec Nuxt Content & Tailwind)",[140,2207,2208,2211],{},[87,2209,2210],{},"Backend",": Node.js / Fastify / Express",[140,2213,2214,2217],{},[87,2215,2216],{},"Coordinateur MCP",": Routage personnalisé + logique de contexte (sans état + conscient de session)",[140,2219,2220,2223],{},[87,2221,2222],{},"Agents",": Microservices indépendants ou modules basés sur WASM",[140,2225,2226,2229],{},[87,2227,2228],{},"Transport",": JSON-RPC 2.0 sur HTTPS (ou mTLS)",[140,2231,2232,2234],{},[87,2233,1622],{},": Validation de signature, DIDs et clés de chiffrement par session",[140,2236,2237,2240],{},[87,2238,2239],{},"Logs",": Logs signés en ajout seul + tableau de bord d'observabilité (Grafana / OpenTelemetry)",[223,2242,2244],{"className":1682,"code":2243,"language":1684,"meta":228,"style":228},"graph LR\n  FE[Client Nuxt3] -->|JSON-RPC| COORD[Coordinateur MCP]\n  COORD --> A1[Agent A]\n  COORD --> A2[Agent B]\n  COORD --> REDIS[(Stockage de Session)]\n  COORD --> LOG[Logs Signés]\n  A1 --> RES1[(API Externe)]\n  A2 --> RES2[(LLM ou Outil)]\n",[218,2245,2246,2251,2256,2261,2266,2271,2276,2281],{"__ignoreMap":228},[232,2247,2248],{"class":234,"line":235},[232,2249,2250],{},"graph LR\n",[232,2252,2253],{"class":234,"line":242},[232,2254,2255],{},"  FE[Client Nuxt3] -->|JSON-RPC| COORD[Coordinateur MCP]\n",[232,2257,2258],{"class":234,"line":253},[232,2259,2260],{},"  COORD --> A1[Agent A]\n",[232,2262,2263],{"class":234,"line":262},[232,2264,2265],{},"  COORD --> A2[Agent B]\n",[232,2267,2268],{"class":234,"line":269},[232,2269,2270],{},"  COORD --> REDIS[(Stockage de Session)]\n",[232,2272,2273],{"class":234,"line":275},[232,2274,2275],{},"  COORD --> LOG[Logs Signés]\n",[232,2277,2278],{"class":234,"line":283},[232,2279,2280],{},"  A1 --> RES1[(API Externe)]\n",[232,2282,2283],{"class":234,"line":288},[232,2284,2285],{},"  A2 --> RES2[(LLM ou Outil)]\n",[68,2287,2289,2295],{"className":2288},[79,80,81],[83,2290,2292],{"id":2291},"outils-et-solutions-pour-développeurs",[87,2293,2294],{},"Outils et Solutions pour Développeurs",[73,2296,2297],{},[93,2298,2299],{"href":95},[87,2300,98],{},[137,2302,2303,2310,2316,2322,2328,2334,2340],{},[140,2304,2305,2306,2309],{},"✅ ",[87,2307,2308],{},"Messages JSON-RPC Signés",": Créer JSON canonique, signer en utilisant EdDSA/ECDSA, envoyer avec clé publique ou DID.",[140,2311,2305,2312,2315],{},[87,2313,2314],{},"Snapshots de Session",": Stocker snapshots JSON par tour avec signatures.",[140,2317,2305,2318,2321],{},[87,2319,2320],{},"Détection de Replay",": Utiliser nonce + timestamps + chaînage de hash.",[140,2323,2305,2324,2327],{},[87,2325,2326],{},"Harnais de Test",": Construire outils de replay MCP avec agents simulés.",[140,2329,2305,2330,2333],{},[87,2331,2332],{},"Observabilité",": Utiliser OpenTelemetry ou agrégateurs de logs avec événements structurés.",[140,2335,2305,2336,2339],{},[87,2337,2338],{},"Validation de Signature",": Les bibliothèques client + agent doivent appliquer validation avant traitement.",[140,2341,2305,2342,2345],{},[87,2343,2344],{},"Service Résolveur DID",": Résoudre clés publiques liées aux DIDs d'agent.",[68,2347,2349,2355],{"className":2348},[79,80,81],[83,2350,2352],{"id":2351},"comment-signer-les-payloads-json-rpc",[87,2353,2354],{},"Comment Signer les Payloads JSON-RPC",[73,2356,2357],{},[93,2358,2359],{"href":95},[87,2360,98],{},[223,2362,2366],{"className":2363,"code":2364,"language":2365,"meta":228,"style":228},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { sign, verify } from 'crypto';\nconst method = 'agent.perform';\nconst params = { input: 'Exécuter test' };\nconst payload = JSON.stringify({ method, params });\nconst signature = sign('sha256', Buffer.from(payload), privateKey);\n\n// Envoyer: { method, params, signature, pubKey }\n","ts",[218,2367,2368,2403,2423,2450,2488,2528,2532],{"__ignoreMap":228},[232,2369,2370,2374,2377,2380,2382,2385,2388,2391,2394,2397,2400],{"class":234,"line":235},[232,2371,2373],{"class":2372},"s7zQu","import",[232,2375,2376],{"class":330}," {",[232,2378,2379],{"class":409}," sign",[232,2381,393],{"class":330},[232,2383,2384],{"class":409}," verify",[232,2386,2387],{"class":330}," }",[232,2389,2390],{"class":2372}," from",[232,2392,2393],{"class":330}," '",[232,2395,2396],{"class":249},"crypto",[232,2398,2399],{"class":330},"'",[232,2401,2402],{"class":330},";\n",[232,2404,2405,2408,2411,2414,2416,2419,2421],{"class":234,"line":242},[232,2406,2407],{"class":377},"const",[232,2409,2410],{"class":409}," method ",[232,2412,2413],{"class":330},"=",[232,2415,2393],{"class":330},[232,2417,2418],{"class":249},"agent.perform",[232,2420,2399],{"class":330},[232,2422,2402],{"class":330},[232,2424,2425,2427,2430,2432,2434,2438,2440,2442,2445,2447],{"class":234,"line":253},[232,2426,2407],{"class":377},[232,2428,2429],{"class":409}," params ",[232,2431,2413],{"class":330},[232,2433,2376],{"class":330},[232,2435,2437],{"class":2436},"swJcz"," input",[232,2439,383],{"class":330},[232,2441,2393],{"class":330},[232,2443,2444],{"class":249},"Exécuter test",[232,2446,2399],{"class":330},[232,2448,2449],{"class":330}," };\n",[232,2451,2452,2454,2457,2459,2462,2464,2467,2470,2473,2476,2478,2480,2483,2486],{"class":234,"line":262},[232,2453,2407],{"class":377},[232,2455,2456],{"class":409}," payload ",[232,2458,2413],{"class":330},[232,2460,2461],{"class":409}," JSON",[232,2463,1653],{"class":330},[232,2465,2466],{"class":256},"stringify",[232,2468,2469],{"class":409},"(",[232,2471,2472],{"class":330},"{",[232,2474,2475],{"class":409}," method",[232,2477,393],{"class":330},[232,2479,2429],{"class":409},[232,2481,2482],{"class":330},"}",[232,2484,2485],{"class":409},")",[232,2487,2402],{"class":330},[232,2489,2490,2492,2495,2497,2499,2501,2503,2506,2508,2510,2513,2515,2518,2521,2523,2526],{"class":234,"line":269},[232,2491,2407],{"class":377},[232,2493,2494],{"class":409}," signature ",[232,2496,2413],{"class":330},[232,2498,2379],{"class":256},[232,2500,2469],{"class":409},[232,2502,2399],{"class":330},[232,2504,2505],{"class":249},"sha256",[232,2507,2399],{"class":330},[232,2509,393],{"class":330},[232,2511,2512],{"class":409}," Buffer",[232,2514,1653],{"class":330},[232,2516,2517],{"class":256},"from",[232,2519,2520],{"class":409},"(payload)",[232,2522,393],{"class":330},[232,2524,2525],{"class":409}," privateKey)",[232,2527,2402],{"class":330},[232,2529,2530],{"class":234,"line":275},[232,2531,266],{"emptyLinePlaceholder":265},[232,2533,2534],{"class":234,"line":283},[232,2535,2536],{"class":238},"// Envoyer: { method, params, signature, pubKey }\n",[68,2538,2540,2546],{"className":2539},[79,80,81],[83,2541,2543],{"id":2542},"résumé",[87,2544,2545],{},"Résumé",[73,2547,2548],{},[93,2549,2550],{"href":95},[87,2551,98],{},[73,2553,2554,2555,2558,2559,2558,2562,2565,2566,2569],{},"Un système MCP sécurisé construit avec JSON-RPC nécessite des couches de protection : identité, intégrité des messages, sécurité du contexte et règles de protocole claires. Combiner ",[87,2556,2557],{},"DIDs",", ",[87,2560,2561],{},"signatures",[87,2563,2564],{},"contrôle de session"," et ",[87,2567,2568],{},"défenses contre agents malveillants"," assure que votre système modulaire reste sûr, observable et extensible.",[68,2571,2573],{"className":2572},[1581,1582,1583,1584],[73,2574,2575],{},[93,2576,2577],{"href":95},[87,2578,98],{},[1592,2580,2581],{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":228,"searchDepth":242,"depth":242,"links":2583},[2584,2589,2590,2591,2592,2593,2594],{"id":1659,"depth":242,"text":1662,"children":2585},[2586,2587,2588],{"id":1678,"depth":253,"text":1679},{"id":1742,"depth":253,"text":1743},{"id":1803,"depth":253,"text":1804},{"id":1850,"depth":242,"text":1853},{"id":2073,"depth":242,"text":2076},{"id":2188,"depth":242,"text":2191},{"id":2291,"depth":242,"text":2294},{"id":2351,"depth":242,"text":2354},{"id":2542,"depth":242,"text":2545},"2025-06-26","Problèmes critiques de sécurité, meilleures solutions et outils pratiques pour des systèmes MCP robustes et sécurisés utilisant JSON-RPC.",{"src":1611},{},{"title":19,"description":2596},"v8QZCrRACbPHafMNqzDSLJTS3GEhRu0WnjMdQjJugMo",{"id":2602,"title":43,"authors":2603,"badge":2606,"body":2608,"date":3941,"description":3942,"extension":1609,"image":3943,"meta":3945,"navigation":265,"path":44,"seo":3946,"stem":45,"__hash__":3947},"posts_fr/fr/blog/qa-front.md",[2604],{"name":55,"description":56,"to":57,"avatar":2605},{"src":59},{"label":2607,"color":1623,"variant":63},"Tests",{"type":65,"value":2609,"toc":3920},[2610,2615,2618,2621,2624,2628,2631,2634,2637,2640,2644,2647,2663,2667,2673,2731,2734,2737,2741,2744,2811,2813,2817,2871,2873,2877,2912,2914,2918,2921,2924,2940,2943,2959,2962,2971,2974,3015,3018,3026,3029,3037,3040,3048,3274,3277,3282,3285,3293,3297,3300,3303,3307,3310,3313,3316,3318,3369,3372,3412,3415,3419,3422,3425,3428,3430,3458,3460,3493,3496,3500,3503,3506,3509,3511,3598,3601,3720,3723,3727,3730,3733,3736,3738,3793,3795,3855,3858,3862,3865,3868,3871,3874,3878,3881,3884,3887,3890,3894,3897,3900,3903,3906,3909,3912,3914,3917],[2611,2612,2614],"h1",{"id":2613},"comment-je-combine-laq-classique-et-les-tests-de-lère-ia-pour-les-applications-modernes","Comment je combine l'AQ classique et les tests de l'ère IA pour les applications modernes ?",[73,2616,2617],{},"Aujourd'hui, l'IA n'est plus quelque chose que nous construisons uniquement pour des projets IA — c'est quelque chose que nous utilisons dans presque toutes les applications modernes. Des systèmes de recommandation dans l'e-commerce aux chatbots dans le support client, les composants IA sont partout.",[73,2619,2620],{},"En tant que développeur, j'ai réalisé que ma stratégie de test doit couvrir à la fois l'AQ classique (comme les tests unitaires, les tests d'intégration, la sécurité, les performances) et les défis spécifiques à l'IA (comme la qualité des données, l'équité des modèles, l'explicabilité et la détection de dérive).",[73,2622,2623],{},"Dans cet article, je partage ma checklist QAI personnelle — un guide pratique que j'utilise pour tester les applications qui combinent le logiciel traditionnel avec les fonctionnalités IA. Je vais parcourir les outils et pratiques sur lesquels je m'appuie à travers le frontend, le backend (Node.js, Python, PHP) et les composants d'apprentissage automatique, et expliquer comment je configure l'automatisation, la surveillance et les boucles de rétroaction humaine. 🔥",[83,2625,2627],{"id":2626},"introduction","Introduction",[73,2629,2630],{},"Nous sommes entrés dans une nouvelle ère de développement logiciel où l'IA n'est plus limitée aux projets spécialisés — elle est intégrée dans presque tout ce que nous construisons. Qu'il s'agisse d'une fonction de recherche, d'un moteur de recommandation, d'un chatbot ou d'un tableau de bord prédictif, l'IA devient un élément standard de la pile technologique.",[73,2632,2633],{},"Mais voici le défi auquel j'ai été confronté : les approches d'AQ classiques ne suffisent plus. Les tests unitaires, les tests d'intégration, les vérifications de performance et les audits de sécurité sont toujours essentiels — mais ils ne me disent pas si les données derrière mon modèle dérivent, si mon chatbot donne des réponses biaisées, ou si mes recommandations sont toujours pertinentes.",[73,2635,2636],{},"C'est pourquoi j'ai élaboré une checklist QAI qui aide à tester systématiquement à la fois les couches classiques et les composants IA des applications modernes.",[73,2638,2639],{},"Dans cet article de blog, je vais parcourir comment j'aborde les tests à travers la pile, partager mes outils favoris, et mettre en évidence les étapes supplémentaires que je prends pour m'assurer que mes applications sont fiables, équitables et évolutives à l'ère de l'IA.",[83,2641,2643],{"id":2642},"_1-pourquoi-laq-moderne-a-besoin-à-la-fois-des-tests-classiques-et-ia","1. Pourquoi l'AQ moderne a besoin à la fois des tests classiques et IA",[73,2645,2646],{},"Dans les logiciels d'aujourd'hui, l'IA n'est plus optionnelle ou limitée aux projets spéciaux. Elle fait partie de la recherche, du chat, des recommandations, de la détection de fraude, de la personnalisation, de l'analyse prédictive — dans presque tous les secteurs.",[73,2648,2649,2650,2653,2654,2657,2659,2660],{},"Mais voici le problème que j'ai appris par expérience :",[2651,2652],"br",{},"\n✅ ",[87,2655,2656],{},"L'AQ classique (tests unitaires, d'intégration, E2E, de performance) garantit que l'app fonctionne comme codée.",[2651,2658],{},"\n❌ ",[87,2661,2662],{},"Elle ne garantit PAS que l'IA à l'intérieur se comporte de manière sûre, équitable ou fiable dans le temps.",[1676,2664,2666],{"id":2665},"_12-aq-classique-ce-quelle-détecte","1.2 AQ classique — Ce qu'elle détecte",[73,2668,2669,2670,2672],{},"L'AQ classique est toujours absolument nécessaire.",[2651,2671],{},"\nVoici ce que j'applique dans tous les projets, avec des outils spécifiques :",[137,2674,2675,2688,2698,2711,2721],{},[140,2676,2677,2680],{},[87,2678,2679],{},"Tests unitaires",[137,2681,2682,2685],{},[140,2683,2684],{},"Backend → Jest (Node.js), PyTest (Python), PHPUnit (PHP)",[140,2686,2687],{},"Frontend → Jest + Testing Library (React, Angular, Vue)",[140,2689,2690,2693],{},[87,2691,2692],{},"Tests d'intégration",[137,2694,2695],{},[140,2696,2697],{},"Supertest (APIs Node.js), collections Postman/Newman, pytest-django (APIs Python)",[140,2699,2700,2703],{},[87,2701,2702],{},"Tests E2E",[137,2704,2705,2708],{},[140,2706,2707],{},"Playwright, Cypress (E2E navigateur)",[140,2709,2710],{},"Selenium, Puppeteer (cross-browser, vérifications visuelles)",[140,2712,2713,2716],{},[87,2714,2715],{},"Tests de performance/charge",[137,2717,2718],{},[140,2719,2720],{},"k6, Artillery, Locust (simuler haute charge, tests de stress API)",[140,2722,2723,2726],{},[87,2724,2725],{},"Tests de sécurité",[137,2727,2728],{},[140,2729,2730],{},"OWASP ZAP, Snyk, npm audit, Bandit (scan statique Python)",[73,2732,2733],{},"✅ Exemple : Je teste mon API backend Node.js avec Supertest + Jest pour les réponses correctes et les cas d'échec.",[2735,2736],"hr",{},[1676,2738,2740],{"id":2739},"_13-nouveaux-problèmes-daq-introduits-par-lia","1.3 Nouveaux problèmes d'AQ introduits par l'IA",[73,2742,2743],{},"Quand j'ajoute des composants IA🤖 (modèles ML, embeddings, LLMs, moteurs de recommandation), de nouvelles catégories de risques apparaissent :",[137,2745,2746,2759,2772,2785,2798],{},[140,2747,2748,2751],{},[87,2749,2750],{},"Biais et équité",[137,2752,2753,2756],{},[140,2754,2755],{},"Exemple : Recommandations de produits qui favorisent les articles populaires et ignorent les catégories de niche, nuisant aux petits vendeurs.",[140,2757,2758],{},"Outil → IBM AI Fairness 360, Fairlearn",[140,2760,2761,2764],{},[87,2762,2763],{},"Dérive de modèle",[137,2765,2766,2769],{},[140,2767,2768],{},"Exemple : Un modèle de détection de fraude entraîné en 2023 devient inutile en 2025 car les modèles de fraude changent.",[140,2770,2771],{},"Outil → Evidently AI (détection de dérive, tableaux de bord)",[140,2773,2774,2777],{},[87,2775,2776],{},"Explicabilité",[137,2778,2779,2782],{},[140,2780,2781],{},"Exemple : Un chatbot de support client donne des réponses étranges, et personne dans l'équipe ne comprend pourquoi.",[140,2783,2784],{},"Outil → SHAP, LIME, Captum",[140,2786,2787,2790],{},[87,2788,2789],{},"Qualité des données",[137,2791,2792,2795],{},[140,2793,2794],{},"Exemple : Champs manquants dans les données d'entrée causent des prédictions incorrectes du modèle.",[140,2796,2797],{},"Outil → Great Expectations (validation des données)",[140,2799,2800,2803],{},[87,2801,2802],{},"Robustesse adversariale",[137,2804,2805,2808],{},[140,2806,2807],{},"Exemple : Un modèle de vision classe incorrectement une image manipulée.",[140,2809,2810],{},"Outil → Adversarial Robustness Toolbox (ART)",[2735,2812],{},[1676,2814,2816],{"id":2815},"_14-comment-je-combine-laq-classique-avec-qai","1.4 Comment je combine l'AQ classique avec + QAI",[1861,2818,2819,2832],{},[1864,2820,2821],{},[1867,2822,2823,2826,2829],{},[1870,2824,2825],{},"Couche",[1870,2827,2828],{},"AQ classique",[1870,2830,2831],{},"QAI (AQ consciente de l'IA)",[1883,2833,2834],{},[1867,2835,2836,2841,2856],{},[1888,2837,2838,2840],{},[87,2839,2204],{}," (React, Angular, Vue, Next, Nuxt)",[1888,2842,2843,2844,2846,2847,2849,2850,2852,2853,2855],{},"✅ Tests unitaires",[2651,2845],{},"✅ Tests E2E",[2651,2848],{},"✅ Régression visuelle",[2651,2851],{},"✅ Tests d'accessibilité (a11y)",[2651,2854],{},"✅ Tests cross-browser",[1888,2857,2858,2859,2861,2862,2864,2865,2867,2868,2870],{},"⚠️ Cohérence UX du code généré par IA",[2651,2860],{},"⚠️ Détecter les hallucinations (comportement incorrect ou inventé)",[2651,2863],{},"⚠️ Suivre la complexité cachée ou le code inutilisé",[2651,2866],{},"⚠️ Vérifier la justesse des dépendances + versions",[2651,2869],{},"⚠️ Valider le comportement de repli quand les fonctionnalités IA échouent ou donnent des résultats incertains",[2735,2872],{},[1676,2874,2876],{"id":2875},"_15-aq-frontend-classique-toujours-essentielle","1.5 AQ Frontend classique (toujours essentielle)",[137,2878,2879,2884,2889,2894,2900,2906],{},[140,2880,2881,2883],{},[87,2882,2679],{}," → Jest, Vitest, Mocha",[140,2885,2886,2888],{},[87,2887,2692],{}," → React Testing Library, Angular Testing Library",[140,2890,2891,2893],{},[87,2892,2702],{}," → Cypress, Playwright",[140,2895,2896,2899],{},[87,2897,2898],{},"Régression visuelle"," → Percy, Chromatic, Loki",[140,2901,2902,2905],{},[87,2903,2904],{},"Tests d'accessibilité"," → axe-core, Lighthouse",[140,2907,2908,2911],{},[87,2909,2910],{},"Tests cross-browser"," → BrowserStack, Sauce Labs",[2735,2913],{},[1676,2915,2917],{"id":2916},"_16-qai-tests-frontend-conscients-de-lia","1.6 QAI (Tests Frontend conscients de l'IA)",[73,2919,2920],{},"Parce que l'IA aide au codage, nous faisons face à de nouveaux risques :",[73,2922,2923],{},"✅ Vérification de la qualité du code + lisibilité",[137,2925,2926,2933],{},[140,2927,2928,2929,2932],{},"Utiliser ",[87,2930,2931],{},"ESLint, Prettier"," → détecter le code IA désordonné, incohérent",[140,2934,2935,2936,2939],{},"Ajouter des ",[87,2937,2938],{},"vérifications CI"," pour le formatage + linting",[73,2941,2942],{},"✅ Cohérence UI/UX",[137,2944,2945,2952],{},[140,2946,2947,2948,2951],{},"Vérifier si l'UI générée par IA correspond aux ",[87,2949,2950],{},"systèmes de design"," (Storybook aide !)",[140,2953,2954,2955,2958],{},"Utiliser des ",[87,2956,2957],{},"tests de régression visuelle"," pour détecter les dérives de style/mise en page",[73,2960,2961],{},"✅ Validation des hallucinations + logique",[137,2963,2964],{},[140,2965,2966,2967,2970],{},"Écrire des ",[87,2968,2969],{},"tests unitaires/d'intégration"," pour les assistants générés par IA",[73,2972,2973],{},"Exemple :",[223,2975,2979],{"className":2976,"code":2977,"language":2978,"meta":228,"style":228},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// Surveiller les assistants trop compliqués :\nconst getUniqueList = arr => [...new Set(arr)];\n","js",[218,2980,2981,2986],{"__ignoreMap":228},[232,2982,2983],{"class":234,"line":235},[232,2984,2985],{"class":238},"// Surveiller les assistants trop compliqués :\n",[232,2987,2988,2990,2993,2995,2999,3002,3004,3007,3010,3013],{"class":234,"line":242},[232,2989,2407],{"class":377},[232,2991,2992],{"class":409}," getUniqueList ",[232,2994,2413],{"class":330},[232,2996,2998],{"class":2997},"sHdIc"," arr",[232,3000,3001],{"class":377}," =>",[232,3003,1483],{"class":409},[232,3005,3006],{"class":330},"...new",[232,3008,3009],{"class":256}," Set",[232,3011,3012],{"class":409},"(arr)]",[232,3014,2402],{"class":330},[73,3016,3017],{},"✅ Justesse des dépendances + versions",[137,3019,3020,3023],{},[140,3021,3022],{},"Vérifier les versions de bibliothèques et mises à jour",[140,3024,3025],{},"Utiliser npm audit, pnpm audit, Snyk pour repérer les packages non sécurisés ou obsolètes",[73,3027,3028],{},"✅ Détection de complexité cachée / code mort",[137,3030,3031,3034],{},[140,3032,3033],{},"Détecter les imports, vars, fonctions inutilisés",[140,3035,3036],{},"Utiliser webpack, Rollup, ESLint no-unused-vars",[73,3038,3039],{},"✅ Tests de comportement de repli",[137,3041,3042,3045],{},[140,3043,3044],{},"Simuler les échecs et timeouts d'API",[140,3046,3047],{},"Assurer des replis conviviaux\nExemple :",[223,3049,3051],{"className":2976,"code":3050,"language":2978,"meta":228,"style":228},"describe('UI de repli', () => {\n  it('affiche le repli quand l\\'API IA échoue', async () => {\n    server.use(\n      rest.get('/api/ai-endpoint', (req, res, ctx) =>\n        res(ctx.status(500))\n      )\n    );\n    render(\u003CRecommendationWidget />);\n    expect(await screen.findByText('Désolé, recommandations indisponibles')).toBeInTheDocument();\n  });\n});\n",[218,3052,3053,3076,3107,3120,3162,3185,3190,3197,3217,3257,3266],{"__ignoreMap":228},[232,3054,3055,3058,3060,3062,3065,3067,3069,3072,3074],{"class":234,"line":235},[232,3056,3057],{"class":256},"describe",[232,3059,2469],{"class":409},[232,3061,2399],{"class":330},[232,3063,3064],{"class":249},"UI de repli",[232,3066,2399],{"class":330},[232,3068,393],{"class":330},[232,3070,3071],{"class":330}," ()",[232,3073,3001],{"class":377},[232,3075,1433],{"class":330},[232,3077,3078,3081,3083,3085,3088,3091,3094,3096,3098,3101,3103,3105],{"class":234,"line":242},[232,3079,3080],{"class":256},"  it",[232,3082,2469],{"class":2436},[232,3084,2399],{"class":330},[232,3086,3087],{"class":249},"affiche le repli quand l",[232,3089,3090],{"class":409},"\\'",[232,3092,3093],{"class":249},"API IA échoue",[232,3095,2399],{"class":330},[232,3097,393],{"class":330},[232,3099,3100],{"class":377}," async",[232,3102,3071],{"class":330},[232,3104,3001],{"class":377},[232,3106,1433],{"class":330},[232,3108,3109,3112,3114,3117],{"class":234,"line":253},[232,3110,3111],{"class":409},"    server",[232,3113,1653],{"class":330},[232,3115,3116],{"class":256},"use",[232,3118,3119],{"class":2436},"(\n",[232,3121,3122,3125,3127,3130,3132,3134,3137,3139,3141,3144,3147,3149,3152,3154,3157,3159],{"class":234,"line":262},[232,3123,3124],{"class":409},"      rest",[232,3126,1653],{"class":330},[232,3128,3129],{"class":256},"get",[232,3131,2469],{"class":2436},[232,3133,2399],{"class":330},[232,3135,3136],{"class":249},"/api/ai-endpoint",[232,3138,2399],{"class":330},[232,3140,393],{"class":330},[232,3142,3143],{"class":330}," (",[232,3145,3146],{"class":2997},"req",[232,3148,393],{"class":330},[232,3150,3151],{"class":2997}," res",[232,3153,393],{"class":330},[232,3155,3156],{"class":2997}," ctx",[232,3158,2485],{"class":330},[232,3160,3161],{"class":377}," =>\n",[232,3163,3164,3167,3169,3172,3174,3177,3179,3182],{"class":234,"line":269},[232,3165,3166],{"class":256},"        res",[232,3168,2469],{"class":2436},[232,3170,3171],{"class":409},"ctx",[232,3173,1653],{"class":330},[232,3175,3176],{"class":256},"status",[232,3178,2469],{"class":2436},[232,3180,3181],{"class":1455},"500",[232,3183,3184],{"class":2436},"))\n",[232,3186,3187],{"class":234,"line":275},[232,3188,3189],{"class":2436},"      )\n",[232,3191,3192,3195],{"class":234,"line":283},[232,3193,3194],{"class":2436},"    )",[232,3196,2402],{"class":330},[232,3198,3199,3202,3204,3207,3210,3213,3215],{"class":234,"line":288},[232,3200,3201],{"class":256},"    render",[232,3203,2469],{"class":2436},[232,3205,3206],{"class":330},"\u003C",[232,3208,3209],{"class":245},"RecommendationWidget",[232,3211,3212],{"class":330}," />",[232,3214,2485],{"class":2436},[232,3216,2402],{"class":330},[232,3218,3219,3222,3224,3227,3230,3232,3235,3237,3239,3242,3244,3247,3249,3252,3255],{"class":234,"line":294},[232,3220,3221],{"class":256},"    expect",[232,3223,2469],{"class":2436},[232,3225,3226],{"class":2372},"await",[232,3228,3229],{"class":409}," screen",[232,3231,1653],{"class":330},[232,3233,3234],{"class":256},"findByText",[232,3236,2469],{"class":2436},[232,3238,2399],{"class":330},[232,3240,3241],{"class":249},"Désolé, recommandations indisponibles",[232,3243,2399],{"class":330},[232,3245,3246],{"class":2436},"))",[232,3248,1653],{"class":330},[232,3250,3251],{"class":256},"toBeInTheDocument",[232,3253,3254],{"class":2436},"()",[232,3256,2402],{"class":330},[232,3258,3259,3262,3264],{"class":234,"line":302},[232,3260,3261],{"class":330},"  }",[232,3263,2485],{"class":2436},[232,3265,2402],{"class":330},[232,3267,3268,3270,3272],{"class":234,"line":311},[232,3269,2482],{"class":330},[232,3271,2485],{"class":409},[232,3273,2402],{"class":330},[73,3275,3276],{},"✅ Vérification sécurité + injection",[137,3278,3279],{},[140,3280,3281],{},"Auditer les interpolations de chaînes générées par IA + gestion HTML",[73,3283,3284],{},"✅ Tests de performance",[137,3286,3287,3290],{},[140,3288,3289],{},"Utiliser Lighthouse, WebPageTest pour détecter les inefficacités",[140,3291,3292],{},"Surveiller le debouncing/throttling manqués",[83,3294,3296],{"id":3295},"_2-aq-frontend-qai","2. AQ Frontend + QAI",[73,3298,3299],{},"Lors de l'utilisation de l'IA dans le développement frontend, plusieurs risques peuvent survenir, et ils doivent être considérés pendant les tests.",[73,3301,3302],{},"Ces risques sont un mélange de problèmes d'AQ classiques et de problèmes spécifiques QAI uniques que les outils IA peuvent introduire :",[1676,3304,3306],{"id":3305},"_211-qualité-du-code-et-lisibilité","2.1.1 Qualité du code et lisibilité",[73,3308,3309],{},"Le code généré par IA pourrait ne pas toujours suivre les meilleures pratiques ou les standards de codage de votre projet, rendant difficile la maintenance ou le débogage futur.",[73,3311,3312],{},"Code incohérent : L'IA pourrait générer du code qui manque de cohérence avec la structure de votre projet.",[73,3314,3315],{},"Nommage de variables peu clair : L'IA pourrait générer des fonctions ou variables avec des noms non descriptifs, rendant le code plus difficile à comprendre.",[73,3317,2973],{},[223,3319,3321],{"className":2976,"code":3320,"language":2978,"meta":228,"style":228},"// Code généré par IA\nfunction f(x, y) {\n  return x * y;\n}\n",[218,3322,3323,3328,3350,3365],{"__ignoreMap":228},[232,3324,3325],{"class":234,"line":235},[232,3326,3327],{"class":238},"// Code généré par IA\n",[232,3329,3330,3333,3336,3338,3341,3343,3346,3348],{"class":234,"line":242},[232,3331,3332],{"class":377},"function",[232,3334,3335],{"class":256}," f",[232,3337,2469],{"class":330},[232,3339,3340],{"class":2997},"x",[232,3342,393],{"class":330},[232,3344,3345],{"class":2997}," y",[232,3347,2485],{"class":330},[232,3349,1433],{"class":330},[232,3351,3352,3355,3358,3361,3363],{"class":234,"line":253},[232,3353,3354],{"class":2372},"  return",[232,3356,3357],{"class":409}," x",[232,3359,3360],{"class":330}," *",[232,3362,3345],{"class":409},[232,3364,2402],{"class":330},[232,3366,3367],{"class":234,"line":262},[232,3368,1543],{"class":330},[73,3370,3371],{},"Meilleure pratique serait :",[223,3373,3375],{"className":2976,"code":3374,"language":2978,"meta":228,"style":228},"function calculateProduct(x, y) {\n  return x * y;\n}\n",[218,3376,3377,3396,3408],{"__ignoreMap":228},[232,3378,3379,3381,3384,3386,3388,3390,3392,3394],{"class":234,"line":235},[232,3380,3332],{"class":377},[232,3382,3383],{"class":256}," calculateProduct",[232,3385,2469],{"class":330},[232,3387,3340],{"class":2997},[232,3389,393],{"class":330},[232,3391,3345],{"class":2997},[232,3393,2485],{"class":330},[232,3395,1433],{"class":330},[232,3397,3398,3400,3402,3404,3406],{"class":234,"line":242},[232,3399,3354],{"class":2372},[232,3401,3357],{"class":409},[232,3403,3360],{"class":330},[232,3405,3345],{"class":409},[232,3407,2402],{"class":330},[232,3409,3410],{"class":234,"line":253},[232,3411,1543],{"class":330},[73,3413,3414],{},"Solution de test QAI : Automatiser les vérifications des conventions de nommage et de cohérence de structure de code en utilisant des linters et formateurs comme ESLint ou Prettier.",[1676,3416,3418],{"id":3417},"_212-uiux-incohérente","2.1.2 UI/UX incohérente",[73,3420,3421],{},"L'IA pourrait générer du code UI qui ne s'aligne pas avec les principes UI/UX désirés, résultant en incohérences ou mauvaise accessibilité.",[73,3423,3424],{},"Incohérences de design : L'IA pourrait ne pas utiliser des systèmes de design cohérents, résultant en couleurs, polices et styles de composants discordants.",[73,3426,3427],{},"Accessibilité : L'IA peut négliger les fonctionnalités d'accessibilité comme les rôles ARIA ou la navigation clavier.",[73,3429,2973],{},[223,3431,3435],{"className":3432,"code":3433,"language":3434,"meta":228,"style":228},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cbutton>Cliquez-moi\u003C/button>\n","html",[218,3436,3437],{"__ignoreMap":228},[232,3438,3439,3441,3444,3447,3450,3453,3455],{"class":234,"line":235},[232,3440,3206],{"class":330},[232,3442,3443],{"class":2436},"button",[232,3445,3446],{"class":330},">",[232,3448,3449],{"class":409},"Cliquez-moi",[232,3451,3452],{"class":330},"\u003C/",[232,3454,3443],{"class":2436},[232,3456,3457],{"class":330},">\n",[73,3459,3371],{},[223,3461,3463],{"className":3432,"code":3462,"language":3434,"meta":228,"style":228},"\u003Cbutton aria-label=\"Soumettre le formulaire\">Cliquez-moi\u003C/button>\n",[218,3464,3465],{"__ignoreMap":228},[232,3466,3467,3469,3471,3474,3476,3478,3481,3483,3485,3487,3489,3491],{"class":234,"line":235},[232,3468,3206],{"class":330},[232,3470,3443],{"class":2436},[232,3472,3473],{"class":377}," aria-label",[232,3475,2413],{"class":330},[232,3477,337],{"class":330},[232,3479,3480],{"class":249},"Soumettre le formulaire",[232,3482,337],{"class":330},[232,3484,3446],{"class":330},[232,3486,3449],{"class":409},[232,3488,3452],{"class":330},[232,3490,3443],{"class":2436},[232,3492,3457],{"class":330},[73,3494,3495],{},"Solution de test QAI : Utiliser des outils de test d'accessibilité comme axe-core ou Lighthouse pour automatiser la détection des problèmes d'accessibilité et s'assurer que le code généré par IA adhère aux standards d'accessibilité.",[83,3497,3499],{"id":3498},"_213-vulnérabilités-de-sécurité","2.1.3 Vulnérabilités de sécurité",[73,3501,3502],{},"L'IA pourrait involontairement introduire des risques de sécurité en générant du code non sécurisé, particulièrement autour des entrées utilisateur ou appels API.",[73,3504,3505],{},"Vulnérabilités XSS : L'IA peut échouer à nettoyer correctement les entrées utilisateur, exposant votre application au cross-site scripting (XSS).",[73,3507,3508],{},"Appels API non sécurisés : L'IA peut générer des appels API sans HTTPS, exposant les données sensibles à l'interception.",[73,3510,2973],{},[223,3512,3514],{"className":2976,"code":3513,"language":2978,"meta":228,"style":228},"// Appel API non sécurisé généré par IA\nfetch('/api/user', { method: 'POST', body: JSON.stringify(user) })\n  .then(response => response.json());\n",[218,3515,3516,3521,3571],{"__ignoreMap":228},[232,3517,3518],{"class":234,"line":235},[232,3519,3520],{"class":238},"// Appel API non sécurisé généré par IA\n",[232,3522,3523,3526,3528,3530,3533,3535,3537,3539,3541,3543,3545,3548,3550,3552,3555,3557,3559,3561,3563,3566,3568],{"class":234,"line":242},[232,3524,3525],{"class":256},"fetch",[232,3527,2469],{"class":409},[232,3529,2399],{"class":330},[232,3531,3532],{"class":249},"/api/user",[232,3534,2399],{"class":330},[232,3536,393],{"class":330},[232,3538,2376],{"class":330},[232,3540,2475],{"class":2436},[232,3542,383],{"class":330},[232,3544,2393],{"class":330},[232,3546,3547],{"class":249},"POST",[232,3549,2399],{"class":330},[232,3551,393],{"class":330},[232,3553,3554],{"class":2436}," body",[232,3556,383],{"class":330},[232,3558,2461],{"class":409},[232,3560,1653],{"class":330},[232,3562,2466],{"class":256},[232,3564,3565],{"class":409},"(user) ",[232,3567,2482],{"class":330},[232,3569,3570],{"class":409},")\n",[232,3572,3573,3576,3579,3581,3584,3586,3589,3591,3593,3596],{"class":234,"line":253},[232,3574,3575],{"class":330},"  .",[232,3577,3578],{"class":256},"then",[232,3580,2469],{"class":409},[232,3582,3583],{"class":2997},"response",[232,3585,3001],{"class":377},[232,3587,3588],{"class":409}," response",[232,3590,1653],{"class":330},[232,3592,365],{"class":256},[232,3594,3595],{"class":409},"())",[232,3597,2402],{"class":330},[73,3599,3600],{},"Meilleure pratique :",[223,3602,3604],{"className":2976,"code":3603,"language":2978,"meta":228,"style":228},"fetch('/api/user', {\n  method: 'POST',\n  headers: { 'Content-Type': 'application/json' },\n  body: JSON.stringify(user),\n  secure: true\n}).then(response => response.json());\n",[218,3605,3606,3622,3637,3665,3683,3694],{"__ignoreMap":228},[232,3607,3608,3610,3612,3614,3616,3618,3620],{"class":234,"line":235},[232,3609,3525],{"class":256},[232,3611,2469],{"class":409},[232,3613,2399],{"class":330},[232,3615,3532],{"class":249},[232,3617,2399],{"class":330},[232,3619,393],{"class":330},[232,3621,1433],{"class":330},[232,3623,3624,3627,3629,3631,3633,3635],{"class":234,"line":242},[232,3625,3626],{"class":2436},"  method",[232,3628,383],{"class":330},[232,3630,2393],{"class":330},[232,3632,3547],{"class":249},[232,3634,2399],{"class":330},[232,3636,1469],{"class":330},[232,3638,3639,3642,3644,3646,3648,3651,3653,3655,3657,3660,3662],{"class":234,"line":253},[232,3640,3641],{"class":2436},"  headers",[232,3643,383],{"class":330},[232,3645,2376],{"class":330},[232,3647,2393],{"class":330},[232,3649,3650],{"class":2436},"Content-Type",[232,3652,2399],{"class":330},[232,3654,383],{"class":330},[232,3656,2393],{"class":330},[232,3658,3659],{"class":249},"application/json",[232,3661,2399],{"class":330},[232,3663,3664],{"class":330}," },\n",[232,3666,3667,3670,3672,3674,3676,3678,3681],{"class":234,"line":262},[232,3668,3669],{"class":2436},"  body",[232,3671,383],{"class":330},[232,3673,2461],{"class":409},[232,3675,1653],{"class":330},[232,3677,2466],{"class":256},[232,3679,3680],{"class":409},"(user)",[232,3682,1469],{"class":330},[232,3684,3685,3688,3690],{"class":234,"line":269},[232,3686,3687],{"class":2436},"  secure",[232,3689,383],{"class":330},[232,3691,3693],{"class":3692},"sfNiH"," true\n",[232,3695,3696,3698,3700,3702,3704,3706,3708,3710,3712,3714,3716,3718],{"class":234,"line":275},[232,3697,2482],{"class":330},[232,3699,2485],{"class":409},[232,3701,1653],{"class":330},[232,3703,3578],{"class":256},[232,3705,2469],{"class":409},[232,3707,3583],{"class":2997},[232,3709,3001],{"class":377},[232,3711,3588],{"class":409},[232,3713,1653],{"class":330},[232,3715,365],{"class":256},[232,3717,3595],{"class":409},[232,3719,2402],{"class":330},[73,3721,3722],{},"Solution de test QAI : Utiliser des outils comme OWASP ZAP ou Snyk pour les audits de sécurité et le scan automatisé de vulnérabilités pour vérifier les risques comme XSS, injection SQL, et plus.",[83,3724,3726],{"id":3725},"_214-problèmes-de-performance","2.1.4 Problèmes de performance",[73,3728,3729],{},"Les outils IA peuvent générer du code qui fonctionne mais n'est pas optimisé pour la performance.",[73,3731,3732],{},"Rendu inefficace : L'IA pourrait échouer à considérer la performance de rendu, résultant en manipulations DOM inutiles ou re-rendus.",[73,3734,3735],{},"Bundles non optimisés : Le code généré par IA peut ne pas tirer parti du lazy loading ou du code splitting, causant des tailles de bundle plus grandes et des temps de chargement plus lents.",[73,3737,2973],{},[223,3739,3741],{"className":2976,"code":3740,"language":2978,"meta":228,"style":228},"// Généré par IA sans debouncing\ninputElement.addEventListener('input', function() {\n  renderResults();\n});\n",[218,3742,3743,3748,3776,3785],{"__ignoreMap":228},[232,3744,3745],{"class":234,"line":235},[232,3746,3747],{"class":238},"// Généré par IA sans debouncing\n",[232,3749,3750,3753,3755,3758,3760,3762,3765,3767,3769,3772,3774],{"class":234,"line":242},[232,3751,3752],{"class":409},"inputElement",[232,3754,1653],{"class":330},[232,3756,3757],{"class":256},"addEventListener",[232,3759,2469],{"class":409},[232,3761,2399],{"class":330},[232,3763,3764],{"class":249},"input",[232,3766,2399],{"class":330},[232,3768,393],{"class":330},[232,3770,3771],{"class":377}," function",[232,3773,3254],{"class":330},[232,3775,1433],{"class":330},[232,3777,3778,3781,3783],{"class":234,"line":253},[232,3779,3780],{"class":256},"  renderResults",[232,3782,3254],{"class":2436},[232,3784,2402],{"class":330},[232,3786,3787,3789,3791],{"class":234,"line":262},[232,3788,2482],{"class":330},[232,3790,2485],{"class":409},[232,3792,2402],{"class":330},[73,3794,3600],{},[223,3796,3798],{"className":2976,"code":3797,"language":2978,"meta":228,"style":228},"const debouncedRender = debounce(() => renderResults(), 300);\ninputElement.addEventListener('input', debouncedRender);\n",[218,3799,3800,3832],{"__ignoreMap":228},[232,3801,3802,3804,3807,3809,3812,3814,3816,3818,3821,3823,3825,3828,3830],{"class":234,"line":235},[232,3803,2407],{"class":377},[232,3805,3806],{"class":409}," debouncedRender ",[232,3808,2413],{"class":330},[232,3810,3811],{"class":256}," debounce",[232,3813,2469],{"class":409},[232,3815,3254],{"class":330},[232,3817,3001],{"class":377},[232,3819,3820],{"class":256}," renderResults",[232,3822,3254],{"class":409},[232,3824,393],{"class":330},[232,3826,3827],{"class":1455}," 300",[232,3829,2485],{"class":409},[232,3831,2402],{"class":330},[232,3833,3834,3836,3838,3840,3842,3844,3846,3848,3850,3853],{"class":234,"line":242},[232,3835,3752],{"class":409},[232,3837,1653],{"class":330},[232,3839,3757],{"class":256},[232,3841,2469],{"class":409},[232,3843,2399],{"class":330},[232,3845,3764],{"class":249},[232,3847,2399],{"class":330},[232,3849,393],{"class":330},[232,3851,3852],{"class":409}," debouncedRender)",[232,3854,2402],{"class":330},[73,3856,3857],{},"Solution de test QAI : Exploiter les outils de performance comme WebPageTest ou Lighthouse pour mesurer les temps de rendu, tailles de bundle et temps de chargement des ressources. Vérifier régulièrement les goulots d'étranglement de performance causés par le code généré par IA.",[1676,3859,3861],{"id":3860},"_215-gestion-des-versions-et-dépendances","2.1.5 Gestion des versions et dépendances",[73,3863,3864],{},"Les outils IA pourraient suggérer des bibliothèques obsolètes ou incompatibles, menant à des problèmes de dépendances.",[73,3866,3867],{},"Bibliothèques obsolètes : L'IA pourrait suggérer des versions obsolètes de bibliothèques ou frameworks, résultant en problèmes de compatibilité.",[73,3869,3870],{},"Conflits de dépendances : Le code généré par IA peut introduire des conflits avec les versions actuelles des bibliothèques dans votre projet.",[73,3872,3873],{},"Solution de test QAI : Utiliser Dependabot ou des outils similaires pour vérifier automatiquement les dépendances obsolètes et conflits de versions. S'assurer que votre package.json est à jour et compatible avec les exigences de votre projet.",[1676,3875,3877],{"id":3876},"_216-comportement-imprévisible-et-manque-de-transparence","2.1.6 Comportement imprévisible et manque de transparence",[73,3879,3880],{},"Le code généré par IA peut parfois mener à un comportement imprévisible dû au manque de contexte ou de transparence dans le processus de génération de code.",[73,3882,3883],{},"Logique cachée : L'IA pourrait introduire des solutions complexes ou non-évidentes qui pourraient mener à des bugs.",[73,3885,3886],{},"Erreurs contextuelles : L'IA peut échouer à saisir le contexte complet du projet, causant des problèmes dans certains scénarios ou cas limites.",[73,3888,3889],{},"Solution de test QAI : Conduire des revues manuelles parallèlement aux tests unitaires pour identifier les cas limites potentiels qui pourraient surgir du code généré par IA. Les frameworks de test automatisés comme Jest, Mocha, ou Cypress peuvent aider à identifier les comportements inattendus.",[1676,3891,3893],{"id":3892},"_221-atténuer-les-risques-de-lia-dans-le-développement-frontend","2.2.1 Atténuer les risques de l'IA dans le développement frontend",[73,3895,3896],{},"Pour réduire ces risques, les développeurs devraient implémenter des stratégies spécifiques, comme :",[73,3898,3899],{},"Revues de code : Le code généré par IA devrait être minutieusement revu par les développeurs pour assurer la qualité et cohérence.",[73,3901,3902],{},"Tests automatisés : Construire des tests unitaires, d'intégration et end-to-end complets pour détecter les problèmes tôt et s'assurer que le frontend se comporte comme attendu.",[73,3904,3905],{},"Tests de performance : Utiliser des outils de performance comme Lighthouse ou WebPageTest pour surveiller continuellement les vitesses de rendu et l'utilisation des ressources.",[73,3907,3908],{},"Audits de sécurité : Utiliser des outils de sécurité automatisés pour détecter les vulnérabilités potentielles dans le code généré par IA.",[73,3910,3911],{},"Vérifications manuelles et automatisées : Utiliser des outils de linting et formatage (ex : ESLint, Prettier) pour appliquer les meilleures pratiques, et exécuter des vérifications d'accessibilité à travers des outils comme axe-core.",[83,3913,2545],{"id":2542},[73,3915,3916],{},"En combinant les pratiques d'AQ frontend traditionnelles avec des stratégies spécifiques QAI, nous pouvons efficacement s'assurer que le développement frontend assisté par IA ne compromet pas la qualité, sécurité, performance ou expérience utilisateur. Il est essentiel d'équilibrer la commodité des outils IA avec des tests et validations soigneux pour assurer des applications frontend robustes et fiables.",[1592,3918,3919],{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":228,"searchDepth":242,"depth":242,"links":3921},[3922,3923,3930,3934,3935,3940],{"id":2626,"depth":242,"text":2627},{"id":2642,"depth":242,"text":2643,"children":3924},[3925,3926,3927,3928,3929],{"id":2665,"depth":253,"text":2666},{"id":2739,"depth":253,"text":2740},{"id":2815,"depth":253,"text":2816},{"id":2875,"depth":253,"text":2876},{"id":2916,"depth":253,"text":2917},{"id":3295,"depth":242,"text":3296,"children":3931},[3932,3933],{"id":3305,"depth":253,"text":3306},{"id":3417,"depth":253,"text":3418},{"id":3498,"depth":242,"text":3499},{"id":3725,"depth":242,"text":3726,"children":3936},[3937,3938,3939],{"id":3860,"depth":253,"text":3861},{"id":3876,"depth":253,"text":3877},{"id":3892,"depth":253,"text":3893},{"id":2542,"depth":242,"text":2545},"2025-04-25","Aujourd'hui, l'IA n'est plus limitée aux projets spécialisés — elle est intégrée dans presque tout ce que nous construisons. Qu'il s'agisse d'une fonction de recherche, d'un moteur de recommandation, d'un chatbot ou d'un tableau de bord prédictif, l'IA devient un élément standard de la pile technologique.",{"src":3944},"/blog/testing/thumbnail.png",{},{"title":43,"description":3942},"m9N8QMH5OsbpBlIsdiz5Su1cStAs98p-snDh9f0k7TQ",1779118049943]