[{"data":1,"prerenderedAt":308},["ShallowReactive",2],{"i-ic:sharp-mail":3,"i-fa6-brands:github":8,"i-fa6-brands:linkedin":12,"i-fa6-brands:telegram":15,"blog\u002F2026-07-30-client-mcp\u002Fposition":4,"\u002Fblog\u002F2026-07-30-client-mcp":17,"i-openmoji:flag-france":299,"i-mdi-light:clipboard":302,"i-ic:sharp-monitor":304,"i-ic:sharp-arrow-forward-ios":306},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"currentColor\" d=\"M22 4H2v16h20zm-2 4l-8 5l-8-5V6l8 5l8-5z\"\u002F>",{"left":4,"top":4,"width":9,"height":10,"rotate":4,"vFlip":6,"hFlip":6,"body":11},496,512,"\u003Cpath fill=\"currentColor\" d=\"M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2\"\u002F>",{"left":4,"top":4,"width":13,"height":10,"rotate":4,"vFlip":6,"hFlip":6,"body":14},448,"\u003Cpath fill=\"currentColor\" d=\"M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3M135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5c0 21.3-17.2 38.5-38.5 38.5m282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7c-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5c67.2 0 79.7 44.3 79.7 101.9z\"\u002F>",{"left":4,"top":4,"width":9,"height":10,"rotate":4,"vFlip":6,"hFlip":6,"body":16},"\u003Cpath fill=\"currentColor\" d=\"M248 8C111.033 8 0 119.033 0 256s111.033 248 248 248s248-111.033 248-248S384.967 8 248 8m114.952 168.66c-3.732 39.215-19.881 134.378-28.1 178.3c-3.476 18.584-10.322 24.816-16.948 25.425c-14.4 1.326-25.338-9.517-39.287-18.661c-21.827-14.308-34.158-23.215-55.346-37.177c-24.485-16.135-8.612-25 5.342-39.5c3.652-3.793 67.107-61.51 68.335-66.746c.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608 69.142q-14.845 10.194-26.894 9.934c-8.855-.191-25.888-5.006-38.551-9.123c-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7 18.45-13.7q108.446-47.248 144.628-62.3c68.872-28.647 83.183-33.623 92.511-33.789c2.052-.034 6.639.474 9.61 2.885a10.45 10.45 0 0 1 3.53 6.716a43.8 43.8 0 0 1 .417 9.769\"\u002F>",{"id":18,"title":19,"body":20,"date":281,"description":282,"draft":6,"extension":283,"image":284,"lang":285,"meta":286,"navigation":287,"path":288,"seo":289,"stem":290,"tags":291,"__hash__":294,"before":295,"after":298},"blog\u002Fblog\u002F2026-07-30-client-mcp.md","C’est quoi ça, le client MCP ?",{"type":21,"value":22,"toc":276},"minimark",[23,27,39,44,47,55,201,204,217,221,224,227,230,244,247,251,254,257,269,272],[24,25,19],"h1",{"id":26},"cest-quoi-ça-le-client-mcp",[28,29,30,31,38],"p",{},"J'ai déjà écrit que le serveur MCP n'est pas vraiment différent des serveurs HTTP : ",[32,33,37],"a",{"href":34,"rel":35},"https:\u002F\u002Fd0rich.me\u002Fblog\u002F2026-07-06-mcp-pour-les-enfants\u002F",[36],"nofollow","Le serveur MCP (Model Context Protocol) pour les enfants",". Il reste à comprendre ce qu'est le client MCP, comment l'intégrer dans une application.",[40,41,43],"h2",{"id":42},"configuration-simple","Configuration simple",[28,45,46],{},"Agents LLM nombreux (ex. GitHub Copilot, Claude Code, Antigravity) supportent MCP par défaut. Ce qu'il vous faut, c'est juste de déclarer serveur MCP dans le fichier de configuration ou de l'ajouter en utilisant une commande CLI.",[28,48,49,50,54],{},"Exemple de ",[51,52,53],"code",{},"mcp.json"," pour GitHub Copilot avec déclaration de connexions à l'Angular MCP (type StdIO) et au MCP de MDN (type HTTP) :",[56,57,62],"pre",{"className":58,"code":59,"language":60,"meta":61,"style":61},"language-json shiki shiki-themes github-light one-dark-pro","{\n  \"servers\": {\n    \"angular-cli\": {\n      \"type\": \"stdio\",\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@angular\u002Fcli\", \"mcp\"]\n    },\n    \"mdn\": {\n      \"type\": \"http\",\n      \"url\": \"https:\u002F\u002Fmcp.mdn.mozilla.net\u002F\"\n    }\n  }\n}\n","json","",[51,63,64,73,83,91,107,120,146,152,160,172,183,189,195],{"__ignoreMap":61},[65,66,69],"span",{"class":67,"line":68},"line",1,[65,70,72],{"class":71},"sXDFC","{\n",[65,74,76,80],{"class":67,"line":75},2,[65,77,79],{"class":78},"s9rLl","  \"servers\"",[65,81,82],{"class":71},": {\n",[65,84,86,89],{"class":67,"line":85},3,[65,87,88],{"class":78},"    \"angular-cli\"",[65,90,82],{"class":71},[65,92,94,97,100,104],{"class":67,"line":93},4,[65,95,96],{"class":78},"      \"type\"",[65,98,99],{"class":71},": ",[65,101,103],{"class":102},"sDOtg","\"stdio\"",[65,105,106],{"class":71},",\n",[65,108,110,113,115,118],{"class":67,"line":109},5,[65,111,112],{"class":78},"      \"command\"",[65,114,99],{"class":71},[65,116,117],{"class":102},"\"npx\"",[65,119,106],{"class":71},[65,121,123,126,129,132,135,138,140,143],{"class":67,"line":122},6,[65,124,125],{"class":78},"      \"args\"",[65,127,128],{"class":71},": [",[65,130,131],{"class":102},"\"-y\"",[65,133,134],{"class":71},", ",[65,136,137],{"class":102},"\"@angular\u002Fcli\"",[65,139,134],{"class":71},[65,141,142],{"class":102},"\"mcp\"",[65,144,145],{"class":71},"]\n",[65,147,149],{"class":67,"line":148},7,[65,150,151],{"class":71},"    },\n",[65,153,155,158],{"class":67,"line":154},8,[65,156,157],{"class":78},"    \"mdn\"",[65,159,82],{"class":71},[65,161,163,165,167,170],{"class":67,"line":162},9,[65,164,96],{"class":78},[65,166,99],{"class":71},[65,168,169],{"class":102},"\"http\"",[65,171,106],{"class":71},[65,173,175,178,180],{"class":67,"line":174},10,[65,176,177],{"class":78},"      \"url\"",[65,179,99],{"class":71},[65,181,182],{"class":102},"\"https:\u002F\u002Fmcp.mdn.mozilla.net\u002F\"\n",[65,184,186],{"class":67,"line":185},11,[65,187,188],{"class":71},"    }\n",[65,190,192],{"class":67,"line":191},12,[65,193,194],{"class":71},"  }\n",[65,196,198],{"class":67,"line":197},13,[65,199,200],{"class":71},"}\n",[28,202,203],{},"Après la configuration initiale, votre agent va s’occuper de :",[205,206,207,211,214],"ol",{},[208,209,210],"li",{},"Récupération des tools \u002F resources \u002F prompts du serveur MCP",[208,212,213],{},"Décisions à quel moment appeler quelle fonctionnalité",[208,215,216],{},"Appels des fonctionnalités choisies",[40,218,220],{"id":219},"intégration-propriétaire","Intégration propriétaire",[28,222,223],{},"Il n’existe pas un seul chemin pour écrire sa propre implémentation du client MCP. Ça dépend toujours de son stack technique, mais la logique de base reste la même.",[28,225,226],{},"Oui, juste appeler une utilité d’un serveur MCP est assez simple : il faut utiliser le SDK de Model Context Protocol officiel pour envoyer une requête (comme la requête HTTP). Néanmoins la tâche principale, c’est de comprendre quelle fonctionnalité de MCP utiliser selon le contexte.",[28,228,229],{},"En général, l’algorithme est le suivant :",[205,231,232,235,238,241],{},[208,233,234],{},"Préparation — on se connecte à un serveur MCP et récupère ses outils.",[208,236,237],{},"On donne le contexte et les outils MCP disponibles à un modèle LLM et lui demande de choisir des outils pertinents.",[208,239,240],{},"On appelle les serveurs MCP choisis en utilisant les entrées générées par le LLM.",[208,242,243],{},"On ajoute les réponses des MCP au contexte principal pour la génération de la réponse.",[28,245,246],{},"Comme ça, l’agent va avoir beaucoup plus de contexte pertinent pour ou même agir dans un système si MCP le permet.",[40,248,250],{"id":249},"et-maintenant","Et maintenant ?",[28,252,253],{},"Le client MCP n’est pas une brique magique : c’est simplement la partie de votre application qui donne du contexte à un LLM, lui permet de choisir des outils, puis exécute ces outils via un serveur MCP. Une fois que vous avez compris ce cycle — préparation, sélection, appel, enrichissement du contexte — vous pouvez l’adapter à n’importe quel stack, du prototype en Python à l’application enterprise en TypeScript.",[28,255,256],{},"Si vous voulez aller plus loin :",[258,259,260,263,266],"ul",{},[208,261,262],{},"Expérimentez avec un serveur MCP existant (Angular CLI, MDN, ou un serveur maison) et intégrez-le dans un petit agent.",[208,264,265],{},"Observez comment le choix des outils évolue selon le contexte que vous donnez au LLM.",[208,267,268],{},"Itérez sur la manière dont vous présentez les tools \u002F resources \u002F prompts : c’est souvent là que se gagne la pertinence des réponses.",[28,270,271],{},"Si vous aussi vous naviguez dans l’IT — étudiant, développeur junior ou plus senior, en France ou ailleurs — je serais ravi d’échanger sur vos propres expériences, vos galères et vos victoires.",[273,274,275],"style",{},"html pre.shiki code .sXDFC, html code.shiki .sXDFC{--shiki-default:#24292E;--shiki-dark:#ABB2BF}html pre.shiki code .s9rLl, html code.shiki .s9rLl{--shiki-default:#005CC5;--shiki-dark:#E06C75}html pre.shiki code .sDOtg, html code.shiki .sDOtg{--shiki-default:#032F62;--shiki-dark:#98C379}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);}",{"title":61,"searchDepth":75,"depth":75,"links":277},[278,279,280],{"id":42,"depth":75,"text":43},{"id":219,"depth":75,"text":220},{"id":249,"depth":75,"text":250},"2026-07-30","Express.js vs MCP : la même logique, une API que les LLM comprennent mieux","md","\u002Fblog\u002F2026-07-30\u002Fcover.webp","fr",{},true,"\u002Fblog\u002F2026-07-30-client-mcp",{"title":19,"description":282},"blog\u002F2026-07-30-client-mcp",[292,293],"MCP","AI","_ieFMUhHDhBKW120yOtsFM1XRB7FXYWITJqMaEOh4Vc",{"title":37,"path":296,"stem":297,"description":282,"children":-1},"\u002Fblog\u002F2026-07-06-mcp-pour-les-enfants","blog\u002F2026-07-06-mcp-pour-les-enfants",null,{"left":4,"top":4,"width":300,"height":300,"rotate":4,"vFlip":6,"hFlip":6,"body":301},72,"\u003Cpath fill=\"#fff\" d=\"M5 17h62v38H5z\"\u002F>\u003Cpath fill=\"#1e50a0\" d=\"M5 17h21v38H5z\"\u002F>\u003Cpath fill=\"#d22f27\" d=\"M46 17h21v38H46z\"\u002F>\u003Cpath fill=\"none\" stroke=\"#000\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 17h62v38H5z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":303},"\u003Cpath fill=\"currentColor\" d=\"M6 5h2.5a3 3 0 0 1 3-3a3 3 0 0 1 3 3H17a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V8a3 3 0 0 1 3-3m0 1a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-1v3H7V6zm2 2h7V6H8zm3.5-5a2 2 0 0 0-2 2h4a2 2 0 0 0-2-2\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":305},"\u003Cpath fill=\"currentColor\" d=\"M22 3H2v15h5l-1 1v2h12v-2l-1-1h5zm-2 13H4V5h16z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":307},"\u003Cpath fill=\"currentColor\" d=\"M6.23 20.23L8 22l10-10L8 2L6.23 3.77L14.46 12z\"\u002F>",1787421103528]