[{"data":1,"prerenderedAt":1170},["ShallowReactive",2],{"post-\u002Ffr\u002Fposts\u002Ffrom-browsing-to-asking-the-web-learns-to-take-action":3},{"id":4,"title":5,"body":6,"contentId":1158,"date":1159,"description":1160,"extension":1161,"meta":1162,"navigation":111,"path":1163,"rawbody":1164,"robots":1165,"schemaOrg":1165,"seo":1166,"sitemap":1167,"stem":1168,"__hash__":1169},"posts\u002Ffr\u002Fposts\u002Ffrom-browsing-to-asking-the-web-learns-to-take-action.md","De la navigation à la demande : le Web passe à l'action",{"type":7,"value":8,"toc":1151},"minimark",[9,19,22,25,30,33,36,39,42,63,66,70,73,88,91,95,104,122,125,134,137,140,143,147,150,156,164,167,395,412,445,460,469,563,566,915,929,932,941,1108,1119,1123,1126,1129,1132,1135,1138,1147],[10,11,12,13,18],"p",{},"Il y a quelques mois, j'ai écrit un article intitulé ",[14,15,17],"a",{"href":16},".\u002Fai-agents-will-deeply-transform-our-experience-with-the-web","Les agents IA transformeront profondément notre expérience avec le Web",". J'y partageais ma vision de la manière dont les agents IA allaient radicalement changer notre expérience du Web. Je concluais en disant qu'un nouveau paradigme allait émerger : « Site web en tant que barre de recherche ». Je n'ai jamais vraiment expliqué ce que je voulais dire, car il s'agissait davantage d'une intuition, fondée sur ma lecture de l'écosystème, que de quelque chose de concret.",[10,20,21],{},"Depuis, beaucoup de choses ont changé, et cette idée est désormais une réalité. Je ne m'attendais pas à ce que le futur arrive aussi vite. Ces derniers temps, tout évolue à une vitesse folle.",[10,23,24],{},"Dans ce futur, qui est déjà là, nous demanderons aux agents d'agir, et j'adore déjà ça.",[26,27,29],"h2",{"id":28},"site-web-en-tant-que-barre-de-recherche","Site web en tant que barre de recherche",[10,31,32],{},"Aujourd'hui, nous naviguons sur le Web. Nous cliquons sur des liens, faisons défiler des pages, remplissons des formulaires et lisons du contenu. Il en allait de même pour mon travail d'ingénieur logiciel. Depuis que j'utilise des agents IA, ce n'est plus le cas. Désormais, je leur demande plus souvent d'agir que je n'effectue moi-même ces actions. Ce nouveau comportement arrive sur le Web.",[10,34,35],{},"L'idée derrière « Site web en tant que barre de recherche » est que la page principale d'un site web sera simplement une barre de recherche : un champ dans lequel nous pourrons demander tout ce que nous souhaitons faire sur le site. En coulisses, le site disposera d'un agent qui agira pour nous. Lorsque j'y ai pensé pour la première fois, j'imaginais un serveur MCP et un agent côté serveur. L'agent appellerait le serveur MCP pour effectuer des actions, et l'interface s'adapterait ou se rafraîchirait intelligemment en fonction de la réponse du serveur. Cette expérience ressemble à celle que Notion AI propose aujourd'hui, et elle fonctionne très bien.",[10,37,38],{},"Cependant, une nouvelle approche a récemment commencé à émerger.",[10,40,41],{},"L'équipe de Chrome développe deux nouvelles API qui pourraient complètement transformer la manière dont un site web devient une barre de recherche :",[43,44,45,55],"ol",{},[46,47,48,54],"li",{},[14,49,53],{"href":50,"rel":51},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fai\u002Fwebmcp",[52],"nofollow","WebMCP",", qui permet de créer et d'exposer des outils structurés aux agents IA ;",[46,56,57,62],{},[14,58,61],{"href":59,"rel":60},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fai\u002Fprompt-api",[52],"L'API Prompt",", qui permet d'envoyer des requêtes en langage naturel à un LLM dans Chrome.",[10,64,65],{},"Grâce aux deux, nous pouvons désormais avoir des agents côté client qui effectuent des actions sur le Web à notre place. C'est époustouflant.",[26,67,69],{"id":68},"le-futur-est-déjà-là","Le futur est déjà là",[10,71,72],{},"Oui, cela paraît fou, je sais, mais le futur est déjà là.",[10,74,75,76,81,82,87],{},"WebMCP et l'API Prompt sont déjà disponibles à titre expérimental dans Chrome. Ce n'est plus seulement une discussion, une idée ou une spécification : des implémentations expérimentales sont disponibles et fonctionnent. Vous pouvez maintenant créer un site web qui expose des outils WebMCP et ",[14,77,80],{"href":78,"rel":79},"https:\u002F\u002Fdeveloper.chrome.com\u002Fblog\u002Fprompt-api-with-vercel-ai",[52],"discuter avec une IA intégrée au navigateur",". ",[14,83,86],{"href":84,"rel":85},"https:\u002F\u002Fblog.cloudflare.com\u002Fwebmcp\u002F#:~:text=You%20do%20not,Copy%20link",[52],"Cloudflare expérimente également WebMCP"," au travers de son produit BrowserRun, et ChatGPT Desktop prend en charge WebMCP pour faciliter la navigation des agents sur le Web.",[10,89,90],{},"L'IA intégrée au navigateur désigne des LLM comme Gemini Nano de Chrome ou les modèles Gemma de Google, capables de fonctionner de manière privée et entièrement dans le navigateur, sur votre ordinateur. Je ne parle pas de Codex ou de Claude qui se connectent à votre navigateur et effectuent des actions en lisant le DOM ou en prenant des captures d'écran. Je parle d'un agent dont le modèle peut fonctionner hors ligne et utiliser des API dédiées pour interagir de manière fluide avec les sites web.",[26,92,94],{"id":93},"demander-des-actions","Demander des actions",[10,96,97,98,103],{},"Pour rendre cette idée plus concrète, j'ai créé une petite démo qui montre comment cela fonctionne. Au départ, mon objectif était simplement d'explorer et d'utiliser WebMCP. Cela a pris une ampleur plus importante que prévu car, hormis ",[14,99,102],{"href":100,"rel":101},"https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fwebmcp-model-context-tool\u002Fgbpdfapgefenggkahomfgkhfehlcenpd?pli=1",[52],"une extension de navigateur pour les tests",", je n'ai trouvé aucun autre outil pour le tester.",[105,106,107,108,107,118],"figure",{},"\n  ",[109,110,112,113,107],"video",{"autoPlay":111,"loop":111,"muted":111,"playsInline":111},true,"\n    ",[114,115],"source",{"src":116,"type":117},"https:\u002F\u002Fimages.soubiran.dev\u002Fposts\u002Ffrom-browsing-to-asking-the-web-learns-to-take-action\u002Fdemo.mp4","video\u002Fmp4",[119,120,121],"figcaption",{},"Démo de l'assistant IA intégré au navigateur effectuant des actions sur le site web.",[10,123,124],{},"Que venez-vous de voir ?",[10,126,127,128,133],{},"Nous utilisons ",[14,129,132],{"href":130,"rel":131},"https:\u002F\u002Fcode.soubiran.dev",[52],"code",", mon outil qui transforme du code brut en de belles images faciles à partager. Vous collez un extrait de code, sélectionnez le langage et la couleur d'arrière-plan, puis le capturez sous forme d'image. Vous pouvez ensuite le partager avec n'importe qui sur les réseaux sociaux.",[10,135,136],{},"Habituellement, l'utilisateur effectue manuellement toutes les actions que je viens de décrire.",[10,138,139],{},"L'agent modifie le code à partir du prompt fourni, change les paramètres et prend finalement une capture d'écran du résultat. Au fond, ce n'est rien de plus que ce qu'un humain peut faire, mais un agent local effectue toutes ces actions. C'est cela, le véritable changement, et c'est cela, le futur.",[10,141,142],{},"Je sais que cette démo est inutile. Cependant, elle vous donne une idée concrète de ce nouveau paradigme. Tout reste encore à inventer et à concevoir, de l'interface à l'expérience.",[26,144,146],{"id":145},"deux-api-pour-y-parvenir","Deux API pour y parvenir",[10,148,149],{},"Si c'est le futur, nous devrions examiner de plus près les deux API qui le rendent possible. J'ai une bonne nouvelle pour vous : en apparence, elles sont extrêmement simples. Cependant, les nouvelles possibilités qu'elles ouvrent rendent leur utilisation plus complexe qu'il n'y paraît au premier abord.",[10,151,152,155],{},[14,153,53],{"href":50,"rel":154},[52]," se présente sous deux formes :",[43,157,158,161],{},[46,159,160],{},"Une API impérative pour définir des outils avec JavaScript ;",[46,162,163],{},"Une API déclarative pour définir des outils avec des annotations HTML.",[10,165,166],{},"La première est similaire à la manière dont un serveur MCP définit des outils.",[168,169,174],"pre",{"className":170,"code":171,"language":172,"meta":173,"style":173},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","await document.modelContext.registerTool({\n  name: 'performAction',\n  description: 'Perform an action on the page.',\n  inputSchema: {\n    type: 'object',\n    properties: {\n      input: { type: 'string' },\n    },\n    required: ['input'],\n  },\n  execute: async ({ input }) => {\n    \u002F\u002F Add the logic to perform the action here\n  },\n})\n","typescript","",[132,175,176,208,231,248,259,276,286,312,318,341,347,374,381,386],{"__ignoreMap":173},[177,178,181,185,189,193,196,198,202,205],"span",{"class":179,"line":180},"line",1,[177,182,184],{"class":183},"s7zQu","await",[177,186,188],{"class":187},"sTEyZ"," document",[177,190,192],{"class":191},"sMK4o",".",[177,194,195],{"class":187},"modelContext",[177,197,192],{"class":191},[177,199,201],{"class":200},"s2Zo4","registerTool",[177,203,204],{"class":187},"(",[177,206,207],{"class":191},"{\n",[177,209,211,215,218,221,225,228],{"class":179,"line":210},2,[177,212,214],{"class":213},"swJcz","  name",[177,216,217],{"class":191},":",[177,219,220],{"class":191}," '",[177,222,224],{"class":223},"sfazB","performAction",[177,226,227],{"class":191},"'",[177,229,230],{"class":191},",\n",[177,232,234,237,239,241,244,246],{"class":179,"line":233},3,[177,235,236],{"class":213},"  description",[177,238,217],{"class":191},[177,240,220],{"class":191},[177,242,243],{"class":223},"Perform an action on the page.",[177,245,227],{"class":191},[177,247,230],{"class":191},[177,249,251,254,256],{"class":179,"line":250},4,[177,252,253],{"class":213},"  inputSchema",[177,255,217],{"class":191},[177,257,258],{"class":191}," {\n",[177,260,262,265,267,269,272,274],{"class":179,"line":261},5,[177,263,264],{"class":213},"    type",[177,266,217],{"class":191},[177,268,220],{"class":191},[177,270,271],{"class":223},"object",[177,273,227],{"class":191},[177,275,230],{"class":191},[177,277,279,282,284],{"class":179,"line":278},6,[177,280,281],{"class":213},"    properties",[177,283,217],{"class":191},[177,285,258],{"class":191},[177,287,289,292,294,297,300,302,304,307,309],{"class":179,"line":288},7,[177,290,291],{"class":213},"      input",[177,293,217],{"class":191},[177,295,296],{"class":191}," {",[177,298,299],{"class":213}," type",[177,301,217],{"class":191},[177,303,220],{"class":191},[177,305,306],{"class":223},"string",[177,308,227],{"class":191},[177,310,311],{"class":191}," },\n",[177,313,315],{"class":179,"line":314},8,[177,316,317],{"class":191},"    },\n",[177,319,321,324,326,329,331,334,336,339],{"class":179,"line":320},9,[177,322,323],{"class":213},"    required",[177,325,217],{"class":191},[177,327,328],{"class":187}," [",[177,330,227],{"class":191},[177,332,333],{"class":223},"input",[177,335,227],{"class":191},[177,337,338],{"class":187},"]",[177,340,230],{"class":191},[177,342,344],{"class":179,"line":343},10,[177,345,346],{"class":191},"  },\n",[177,348,350,353,355,359,362,366,369,372],{"class":179,"line":349},11,[177,351,352],{"class":200},"  execute",[177,354,217],{"class":191},[177,356,358],{"class":357},"spNyl"," async",[177,360,361],{"class":191}," ({",[177,363,365],{"class":364},"sHdIc"," input",[177,367,368],{"class":191}," })",[177,370,371],{"class":357}," =>",[177,373,258],{"class":191},[177,375,377],{"class":179,"line":376},12,[177,378,380],{"class":379},"sHwdD","    \u002F\u002F Add the logic to perform the action here\n",[177,382,384],{"class":179,"line":383},13,[177,385,346],{"class":191},[177,387,389,392],{"class":179,"line":388},14,[177,390,391],{"class":191},"}",[177,393,394],{"class":187},")\n",[10,396,397,398,401,402,404,405,407,408,411],{},"L'objet ",[132,399,400],{},"document"," reçoit une nouvelle propriété appelée ",[132,403,195],{},", qui constitue le point d'entrée pour créer et enregistrer des outils sur la page actuelle. Les agents qui utilisent votre site doivent savoir quels outils sont disponibles. ",[132,406,195],{}," expose donc une méthode ",[132,409,410],{},"getTools()"," qui renvoie la liste des outils disponibles sur la page.",[168,413,415],{"className":170,"code":414,"language":172,"meta":173,"style":173},"const tools = await document.modelContext.getTools()\n",[132,416,417],{"__ignoreMap":173},[177,418,419,422,425,428,431,433,435,437,439,442],{"class":179,"line":180},[177,420,421],{"class":357},"const",[177,423,424],{"class":187}," tools ",[177,426,427],{"class":191},"=",[177,429,430],{"class":183}," await",[177,432,188],{"class":187},[177,434,192],{"class":191},[177,436,195],{"class":187},[177,438,192],{"class":191},[177,440,441],{"class":200},"getTools",[177,443,444],{"class":187},"()\n",[10,446,447,448,451,452,459],{},"Cela ressemble à la méthode ",[132,449,450],{},"listTools()"," exposée par ",[14,453,456],{"href":454,"rel":455},"https:\u002F\u002Fai-sdk.dev\u002Fdocs\u002Freference\u002Fai-sdk-core\u002Fcreate-mcp-client",[52],[132,457,458],{},"createMCPClient()"," dans l'AI SDK. Cela peut être un peu déroutant car, dans le navigateur, nous agissons à la fois comme le serveur en enregistrant des outils et comme le client en y accédant. La raison est que votre site web n'est pas nécessairement celui qui consomme ces outils.",[10,461,462,463,466,467,192],{},"Vous pouvez également exécuter un outil à l'aide de la méthode ",[132,464,465],{},"executeTool()"," de l'objet ",[132,468,195],{},[168,470,472],{"className":170,"code":471,"language":172,"meta":173,"style":173},"const [tool] = await document.modelContext.getTools()\n\nawait document.modelContext.executeTool(tool, JSON.stringify({\n  input: '...',\n}))\n",[132,473,474,502,507,540,556],{"__ignoreMap":173},[177,475,476,478,480,483,485,488,490,492,494,496,498,500],{"class":179,"line":180},[177,477,421],{"class":357},[177,479,328],{"class":191},[177,481,482],{"class":187},"tool",[177,484,338],{"class":191},[177,486,487],{"class":191}," =",[177,489,430],{"class":183},[177,491,188],{"class":187},[177,493,192],{"class":191},[177,495,195],{"class":187},[177,497,192],{"class":191},[177,499,441],{"class":200},[177,501,444],{"class":187},[177,503,504],{"class":179,"line":210},[177,505,506],{"emptyLinePlaceholder":111},"\n",[177,508,509,511,513,515,517,519,522,525,528,531,533,536,538],{"class":179,"line":233},[177,510,184],{"class":183},[177,512,188],{"class":187},[177,514,192],{"class":191},[177,516,195],{"class":187},[177,518,192],{"class":191},[177,520,521],{"class":200},"executeTool",[177,523,524],{"class":187},"(tool",[177,526,527],{"class":191},",",[177,529,530],{"class":187}," JSON",[177,532,192],{"class":191},[177,534,535],{"class":200},"stringify",[177,537,204],{"class":187},[177,539,207],{"class":191},[177,541,542,545,547,549,552,554],{"class":179,"line":250},[177,543,544],{"class":213},"  input",[177,546,217],{"class":191},[177,548,220],{"class":191},[177,550,551],{"class":223},"...",[177,553,227],{"class":191},[177,555,230],{"class":191},[177,557,558,560],{"class":179,"line":261},[177,559,391],{"class":191},[177,561,562],{"class":187},"))\n",[10,564,565],{},"La seconde est l'API déclarative, qui permet de définir des outils à l'aide d'annotations HTML. Elle est principalement conçue pour les formulaires :",[168,567,571],{"className":568,"code":569,"language":570,"meta":173,"style":173},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cform toolname=\"supportRequestTool\"\n  tooldescription=\"Submit a request for support.\"\n  action=\"\u002Fsubmit\">\n\n  \u003Clabel for=\"firstName\">First Name\u003C\u002Flabel>\n  \u003Cinput type=text name=firstName>\n\n  \u003Clabel for=\"lastName\">Last Name\u003C\u002Flabel>\n  \u003Cinput type=text name=lastName>\n\n  \u003Cselect name=\"select\" required\n    toolparamdescription=\"Determines what team this request is routed to.\">\n    \u003Coption value=\"Customer happiness team\">Return my purchase.\u003C\u002Foption>\n    \u003Coption value=\"Distribution team\">Check where my package is.\u003C\u002Foption>\n    \u003Coption value=\"Website support team\">Get help on the website.\u003C\u002Foption>\n  \u003C\u002Fselect>\n\n  \u003Cbutton type=submit>Submit\u003C\u002Fbutton>\n\u003C\u002Fform>\n","html",[132,572,573,595,609,626,630,663,685,689,717,737,741,761,777,808,836,865,875,880,906],{"__ignoreMap":173},[177,574,575,578,581,584,586,589,592],{"class":179,"line":180},[177,576,577],{"class":191},"\u003C",[177,579,580],{"class":213},"form",[177,582,583],{"class":357}," toolname",[177,585,427],{"class":191},[177,587,588],{"class":191},"\"",[177,590,591],{"class":223},"supportRequestTool",[177,593,594],{"class":191},"\"\n",[177,596,597,600,602,604,607],{"class":179,"line":210},[177,598,599],{"class":357},"  tooldescription",[177,601,427],{"class":191},[177,603,588],{"class":191},[177,605,606],{"class":223},"Submit a request for support.",[177,608,594],{"class":191},[177,610,611,614,616,618,621,623],{"class":179,"line":233},[177,612,613],{"class":357},"  action",[177,615,427],{"class":191},[177,617,588],{"class":191},[177,619,620],{"class":223},"\u002Fsubmit",[177,622,588],{"class":191},[177,624,625],{"class":191},">\n",[177,627,628],{"class":179,"line":250},[177,629,506],{"emptyLinePlaceholder":111},[177,631,632,635,638,641,643,645,648,650,653,656,659,661],{"class":179,"line":261},[177,633,634],{"class":191},"  \u003C",[177,636,637],{"class":213},"label",[177,639,640],{"class":357}," for",[177,642,427],{"class":191},[177,644,588],{"class":191},[177,646,647],{"class":223},"firstName",[177,649,588],{"class":191},[177,651,652],{"class":191},">",[177,654,655],{"class":187},"First Name",[177,657,658],{"class":191},"\u003C\u002F",[177,660,637],{"class":213},[177,662,625],{"class":191},[177,664,665,667,669,671,673,676,679,681,683],{"class":179,"line":278},[177,666,634],{"class":191},[177,668,333],{"class":213},[177,670,299],{"class":357},[177,672,427],{"class":191},[177,674,675],{"class":223},"text",[177,677,678],{"class":357}," name",[177,680,427],{"class":191},[177,682,647],{"class":223},[177,684,625],{"class":191},[177,686,687],{"class":179,"line":288},[177,688,506],{"emptyLinePlaceholder":111},[177,690,691,693,695,697,699,701,704,706,708,711,713,715],{"class":179,"line":314},[177,692,634],{"class":191},[177,694,637],{"class":213},[177,696,640],{"class":357},[177,698,427],{"class":191},[177,700,588],{"class":191},[177,702,703],{"class":223},"lastName",[177,705,588],{"class":191},[177,707,652],{"class":191},[177,709,710],{"class":187},"Last Name",[177,712,658],{"class":191},[177,714,637],{"class":213},[177,716,625],{"class":191},[177,718,719,721,723,725,727,729,731,733,735],{"class":179,"line":320},[177,720,634],{"class":191},[177,722,333],{"class":213},[177,724,299],{"class":357},[177,726,427],{"class":191},[177,728,675],{"class":223},[177,730,678],{"class":357},[177,732,427],{"class":191},[177,734,703],{"class":223},[177,736,625],{"class":191},[177,738,739],{"class":179,"line":343},[177,740,506],{"emptyLinePlaceholder":111},[177,742,743,745,748,750,752,754,756,758],{"class":179,"line":349},[177,744,634],{"class":191},[177,746,747],{"class":213},"select",[177,749,678],{"class":357},[177,751,427],{"class":191},[177,753,588],{"class":191},[177,755,747],{"class":223},[177,757,588],{"class":191},[177,759,760],{"class":357}," required\n",[177,762,763,766,768,770,773,775],{"class":179,"line":376},[177,764,765],{"class":357},"    toolparamdescription",[177,767,427],{"class":191},[177,769,588],{"class":191},[177,771,772],{"class":223},"Determines what team this request is routed to.",[177,774,588],{"class":191},[177,776,625],{"class":191},[177,778,779,782,785,788,790,792,795,797,799,802,804,806],{"class":179,"line":383},[177,780,781],{"class":191},"    \u003C",[177,783,784],{"class":213},"option",[177,786,787],{"class":357}," value",[177,789,427],{"class":191},[177,791,588],{"class":191},[177,793,794],{"class":223},"Customer happiness team",[177,796,588],{"class":191},[177,798,652],{"class":191},[177,800,801],{"class":187},"Return my purchase.",[177,803,658],{"class":191},[177,805,784],{"class":213},[177,807,625],{"class":191},[177,809,810,812,814,816,818,820,823,825,827,830,832,834],{"class":179,"line":388},[177,811,781],{"class":191},[177,813,784],{"class":213},[177,815,787],{"class":357},[177,817,427],{"class":191},[177,819,588],{"class":191},[177,821,822],{"class":223},"Distribution team",[177,824,588],{"class":191},[177,826,652],{"class":191},[177,828,829],{"class":187},"Check where my package is.",[177,831,658],{"class":191},[177,833,784],{"class":213},[177,835,625],{"class":191},[177,837,839,841,843,845,847,849,852,854,856,859,861,863],{"class":179,"line":838},15,[177,840,781],{"class":191},[177,842,784],{"class":213},[177,844,787],{"class":357},[177,846,427],{"class":191},[177,848,588],{"class":191},[177,850,851],{"class":223},"Website support team",[177,853,588],{"class":191},[177,855,652],{"class":191},[177,857,858],{"class":187},"Get help on the website.",[177,860,658],{"class":191},[177,862,784],{"class":213},[177,864,625],{"class":191},[177,866,868,871,873],{"class":179,"line":867},16,[177,869,870],{"class":191},"  \u003C\u002F",[177,872,747],{"class":213},[177,874,625],{"class":191},[177,876,878],{"class":179,"line":877},17,[177,879,506],{"emptyLinePlaceholder":111},[177,881,883,885,888,890,892,895,897,900,902,904],{"class":179,"line":882},18,[177,884,634],{"class":191},[177,886,887],{"class":213},"button",[177,889,299],{"class":357},[177,891,427],{"class":191},[177,893,894],{"class":223},"submit",[177,896,652],{"class":191},[177,898,899],{"class":187},"Submit",[177,901,658],{"class":191},[177,903,887],{"class":213},[177,905,625],{"class":191},[177,907,909,911,913],{"class":179,"line":908},19,[177,910,658],{"class":191},[177,912,580],{"class":213},[177,914,625],{"class":191},[916,917,918],"blockquote",{},[10,919,920,923,924,192],{},[177,921,922],{},"!NOTE","\nExemple tiré de la ",[14,925,928],{"href":926,"rel":927},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fai\u002Fwebmcp\u002Fdeclarative-api",[52],"documentation de l'API déclarative de WebMCP",[10,930,931],{},"Vient ensuite l'API Prompt. Elle est plus complexe, car elle nécessite davantage de gestion de la disponibilité et du cycle de vie. Par exemple, vous devez détecter si le LLM intégré au navigateur est disponible. S'il ne l'est pas, vous devez en connaître la raison. L'appareil est peut-être incompatible, ou le LLM n'a peut-être pas encore été téléchargé. S'il peut l'être, vous devez demander au navigateur de le télécharger, ce qui peut prendre du temps. Vous devez donc informer l'utilisateur que quelque chose se passe en arrière-plan. De plus, l'API expose des primitives de bas niveau que vous ne voudrez probablement pas manipuler directement.",[10,933,934,935,940],{},"Cela demande plus de travail que d'appeler une API. La bonne nouvelle, c'est qu'un provider communautaire appelé ",[14,936,939],{"href":937,"rel":938},"https:\u002F\u002Fai-sdk.dev\u002Fproviders\u002Fcommunity-providers\u002Fbrowser-ai",[52],"Browser AI"," simplifie l'utilisation de l'API Prompt avec l'AI SDK.",[168,942,944],{"className":170,"code":943,"language":172,"meta":173,"style":173},"import { browserAI } from '@browser-ai\u002Fcore'\nimport { streamText } from 'ai'\n\nconst model = browserAI()\n\nconst { textStream } = streamText({\n  model,\n  prompt: 'Describe the future of the web in five sentences.',\n})\n\nfor await (const textPart of textStream) {\n  console.log(textPart)\n}\n",[132,945,946,970,990,994,1007,1011,1030,1037,1053,1059,1063,1086,1103],{"__ignoreMap":173},[177,947,948,951,953,956,959,962,964,967],{"class":179,"line":180},[177,949,950],{"class":183},"import",[177,952,296],{"class":191},[177,954,955],{"class":187}," browserAI",[177,957,958],{"class":191}," }",[177,960,961],{"class":183}," from",[177,963,220],{"class":191},[177,965,966],{"class":223},"@browser-ai\u002Fcore",[177,968,969],{"class":191},"'\n",[177,971,972,974,976,979,981,983,985,988],{"class":179,"line":210},[177,973,950],{"class":183},[177,975,296],{"class":191},[177,977,978],{"class":187}," streamText",[177,980,958],{"class":191},[177,982,961],{"class":183},[177,984,220],{"class":191},[177,986,987],{"class":223},"ai",[177,989,969],{"class":191},[177,991,992],{"class":179,"line":233},[177,993,506],{"emptyLinePlaceholder":111},[177,995,996,998,1001,1003,1005],{"class":179,"line":250},[177,997,421],{"class":357},[177,999,1000],{"class":187}," model ",[177,1002,427],{"class":191},[177,1004,955],{"class":200},[177,1006,444],{"class":187},[177,1008,1009],{"class":179,"line":261},[177,1010,506],{"emptyLinePlaceholder":111},[177,1012,1013,1015,1017,1020,1022,1024,1026,1028],{"class":179,"line":278},[177,1014,421],{"class":357},[177,1016,296],{"class":191},[177,1018,1019],{"class":187}," textStream ",[177,1021,391],{"class":191},[177,1023,487],{"class":191},[177,1025,978],{"class":200},[177,1027,204],{"class":187},[177,1029,207],{"class":191},[177,1031,1032,1035],{"class":179,"line":288},[177,1033,1034],{"class":187},"  model",[177,1036,230],{"class":191},[177,1038,1039,1042,1044,1046,1049,1051],{"class":179,"line":314},[177,1040,1041],{"class":213},"  prompt",[177,1043,217],{"class":191},[177,1045,220],{"class":191},[177,1047,1048],{"class":223},"Describe the future of the web in five sentences.",[177,1050,227],{"class":191},[177,1052,230],{"class":191},[177,1054,1055,1057],{"class":179,"line":320},[177,1056,391],{"class":191},[177,1058,394],{"class":187},[177,1060,1061],{"class":179,"line":343},[177,1062,506],{"emptyLinePlaceholder":111},[177,1064,1065,1068,1070,1073,1075,1078,1081,1084],{"class":179,"line":349},[177,1066,1067],{"class":183},"for",[177,1069,430],{"class":183},[177,1071,1072],{"class":187}," (",[177,1074,421],{"class":357},[177,1076,1077],{"class":187}," textPart ",[177,1079,1080],{"class":191},"of",[177,1082,1083],{"class":187}," textStream) ",[177,1085,207],{"class":191},[177,1087,1088,1091,1093,1096,1098,1101],{"class":179,"line":376},[177,1089,1090],{"class":187},"  console",[177,1092,192],{"class":191},[177,1094,1095],{"class":200},"log",[177,1097,204],{"class":213},[177,1099,1100],{"class":187},"textPart",[177,1102,394],{"class":213},[177,1104,1105],{"class":179,"line":383},[177,1106,1107],{"class":191},"}\n",[916,1109,1110],{},[10,1111,1112,1114,1115,192],{},[177,1113,922],{},"\nJe vous recommande vivement de lire l'article ",[14,1116,1118],{"href":78,"rel":1117},[52],"Utiliser l'API Prompt intégrée avec le Vercel AI SDK",[26,1120,1122],{"id":1121},"ce-nest-que-le-début","Ce n'est que le début",[10,1124,1125],{},"Pour l'instant, même si vous pouvez déjà tester les deux API, elles restent expérimentales et leur prise en charge par les navigateurs est limitée. Cela signifie que la plupart des gens ne pourront pas les utiliser. Elles doivent encore être standardisées et adoptées par d'autres éditeurs de navigateurs, comme Mozilla et Apple.",[10,1127,1128],{},"De plus, les modèles intégrés au navigateur sont limités, particulièrement en comparaison avec les modèles de pointe. Ils peuvent répondre à des questions et appeler des outils, mais vous devez garder les instructions et les paramètres des outils simples, vraiment simples.",[10,1130,1131],{},"Ils deviendront inévitablement de plus en plus intelligents. Récemment, Qwen a publié Qwen3.8-27B, un modèle capable de fonctionner sur certains appareils grand public. Google fait également des progrès importants avec sa gamme de modèles Gemma, conçus pour fonctionner directement sur les appareils. Les appareils deviennent plus puissants et plus aptes à exécuter ces modèles. Les SoC de la série M d'Apple intègrent un Neural Engine, ou NPU, et Google a fait de même avec ses SoC Tensor. La dernière version de Siri effectue également des traitements d'IA directement sur l'appareil, et elle semble vraiment puissante. Ce n'est désormais plus qu'une question de temps.",[10,1133,1134],{},"Enfin, lorsque tout cela sera standardisé et mature, disposer de tout ce qu'il faut, prêt à l'emploi, vous donnera un avantage concurrentiel.",[1136,1137],"hr",{},[10,1139,1140,1141,1146],{},"Pendant que j'écrivais cet article, OpenAI a annoncé un ",[14,1142,1145],{"href":1143,"rel":1144},"https:\u002F\u002Fopenai.com\u002Fwebmcp-challenge\u002F",[52],"défi WebMCP"," pour explorer ce qui est possible. Il semble que je sois sur la bonne voie.",[1148,1149,1150],"style",{},"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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .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 .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 .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);}",{"title":173,"searchDepth":210,"depth":210,"links":1152},[1153,1154,1155,1156,1157],{"id":28,"depth":210,"text":29},{"id":68,"depth":210,"text":69},{"id":93,"depth":210,"text":94},{"id":145,"depth":210,"text":146},{"id":1121,"depth":210,"text":1122},"442424b1-6547-40a4-93ee-a0bd8b3dfa87","2026-08-28","WebMCP et l'API Prompt de Chrome font entrer les agents IA côté client sur le Web et leur permettent d'agir sur les sites à notre place.","md",{},"\u002Ffr\u002Fposts\u002Ffrom-browsing-to-asking-the-web-learns-to-take-action","---\ncontentId: 442424b1-6547-40a4-93ee-a0bd8b3dfa87\ntitle: \"De la navigation à la demande : le Web passe à l'action\"\ndescription: \"WebMCP et l'API Prompt de Chrome font entrer les agents IA côté client sur le Web et leur permettent d'agir sur les sites à notre place.\"\ndate: 2026-08-28\n---\n\nIl y a quelques mois, j'ai écrit un article intitulé [Les agents IA transformeront profondément notre expérience avec le Web](.\u002Fai-agents-will-deeply-transform-our-experience-with-the-web.md). J'y partageais ma vision de la manière dont les agents IA allaient radicalement changer notre expérience du Web. Je concluais en disant qu'un nouveau paradigme allait émerger : « Site web en tant que barre de recherche ». Je n'ai jamais vraiment expliqué ce que je voulais dire, car il s'agissait davantage d'une intuition, fondée sur ma lecture de l'écosystème, que de quelque chose de concret.\n\nDepuis, beaucoup de choses ont changé, et cette idée est désormais une réalité. Je ne m'attendais pas à ce que le futur arrive aussi vite. Ces derniers temps, tout évolue à une vitesse folle.\n\nDans ce futur, qui est déjà là, nous demanderons aux agents d'agir, et j'adore déjà ça.\n\n## Site web en tant que barre de recherche\n\nAujourd'hui, nous naviguons sur le Web. Nous cliquons sur des liens, faisons défiler des pages, remplissons des formulaires et lisons du contenu. Il en allait de même pour mon travail d'ingénieur logiciel. Depuis que j'utilise des agents IA, ce n'est plus le cas. Désormais, je leur demande plus souvent d'agir que je n'effectue moi-même ces actions. Ce nouveau comportement arrive sur le Web.\n\nL'idée derrière « Site web en tant que barre de recherche » est que la page principale d'un site web sera simplement une barre de recherche : un champ dans lequel nous pourrons demander tout ce que nous souhaitons faire sur le site. En coulisses, le site disposera d'un agent qui agira pour nous. Lorsque j'y ai pensé pour la première fois, j'imaginais un serveur MCP et un agent côté serveur. L'agent appellerait le serveur MCP pour effectuer des actions, et l'interface s'adapterait ou se rafraîchirait intelligemment en fonction de la réponse du serveur. Cette expérience ressemble à celle que Notion AI propose aujourd'hui, et elle fonctionne très bien.\n\nCependant, une nouvelle approche a récemment commencé à émerger.\n\nL'équipe de Chrome développe deux nouvelles API qui pourraient complètement transformer la manière dont un site web devient une barre de recherche :\n\n1. [WebMCP](https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fai\u002Fwebmcp), qui permet de créer et d'exposer des outils structurés aux agents IA ;\n2. [L'API Prompt](https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fai\u002Fprompt-api), qui permet d'envoyer des requêtes en langage naturel à un LLM dans Chrome.\n\nGrâce aux deux, nous pouvons désormais avoir des agents côté client qui effectuent des actions sur le Web à notre place. C'est époustouflant.\n\n## Le futur est déjà là\n\nOui, cela paraît fou, je sais, mais le futur est déjà là.\n\nWebMCP et l'API Prompt sont déjà disponibles à titre expérimental dans Chrome. Ce n'est plus seulement une discussion, une idée ou une spécification : des implémentations expérimentales sont disponibles et fonctionnent. Vous pouvez maintenant créer un site web qui expose des outils WebMCP et [discuter avec une IA intégrée au navigateur](https:\u002F\u002Fdeveloper.chrome.com\u002Fblog\u002Fprompt-api-with-vercel-ai). [Cloudflare expérimente également WebMCP](https:\u002F\u002Fblog.cloudflare.com\u002Fwebmcp\u002F#:~:text=You%20do%20not,Copy%20link) au travers de son produit BrowserRun, et ChatGPT Desktop prend en charge WebMCP pour faciliter la navigation des agents sur le Web.\n\nL'IA intégrée au navigateur désigne des LLM comme Gemini Nano de Chrome ou les modèles Gemma de Google, capables de fonctionner de manière privée et entièrement dans le navigateur, sur votre ordinateur. Je ne parle pas de Codex ou de Claude qui se connectent à votre navigateur et effectuent des actions en lisant le DOM ou en prenant des captures d'écran. Je parle d'un agent dont le modèle peut fonctionner hors ligne et utiliser des API dédiées pour interagir de manière fluide avec les sites web.\n\n## Demander des actions\n\nPour rendre cette idée plus concrète, j'ai créé une petite démo qui montre comment cela fonctionne. Au départ, mon objectif était simplement d'explorer et d'utiliser WebMCP. Cela a pris une ampleur plus importante que prévu car, hormis [une extension de navigateur pour les tests](https:\u002F\u002Fchromewebstore.google.com\u002Fdetail\u002Fwebmcp-model-context-tool\u002Fgbpdfapgefenggkahomfgkhfehlcenpd?pli=1), je n'ai trouvé aucun autre outil pour le tester.\n\n\u003Cfigure>\n  \u003Cvideo autoplay loop muted playsinline>\n    \u003Csource src=\"https:\u002F\u002Fimages.soubiran.dev\u002Fposts\u002Ffrom-browsing-to-asking-the-web-learns-to-take-action\u002Fdemo.mp4\" type=\"video\u002Fmp4\">\n  \u003C\u002Fvideo>\n  \u003Cfigcaption>Démo de l'assistant IA intégré au navigateur effectuant des actions sur le site web.\u003C\u002Ffigcaption>\n\u003C\u002Ffigure>\n\nQue venez-vous de voir ?\n\nNous utilisons [code](https:\u002F\u002Fcode.soubiran.dev), mon outil qui transforme du code brut en de belles images faciles à partager. Vous collez un extrait de code, sélectionnez le langage et la couleur d'arrière-plan, puis le capturez sous forme d'image. Vous pouvez ensuite le partager avec n'importe qui sur les réseaux sociaux.\n\nHabituellement, l'utilisateur effectue manuellement toutes les actions que je viens de décrire.\n\nL'agent modifie le code à partir du prompt fourni, change les paramètres et prend finalement une capture d'écran du résultat. Au fond, ce n'est rien de plus que ce qu'un humain peut faire, mais un agent local effectue toutes ces actions. C'est cela, le véritable changement, et c'est cela, le futur.\n\nJe sais que cette démo est inutile. Cependant, elle vous donne une idée concrète de ce nouveau paradigme. Tout reste encore à inventer et à concevoir, de l'interface à l'expérience.\n\n## Deux API pour y parvenir\n\nSi c'est le futur, nous devrions examiner de plus près les deux API qui le rendent possible. J'ai une bonne nouvelle pour vous : en apparence, elles sont extrêmement simples. Cependant, les nouvelles possibilités qu'elles ouvrent rendent leur utilisation plus complexe qu'il n'y paraît au premier abord.\n\n[WebMCP](https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fai\u002Fwebmcp) se présente sous deux formes :\n\n1. Une API impérative pour définir des outils avec JavaScript ;\n2. Une API déclarative pour définir des outils avec des annotations HTML.\n\nLa première est similaire à la manière dont un serveur MCP définit des outils.\n\n```typescript\nawait document.modelContext.registerTool({\n  name: 'performAction',\n  description: 'Perform an action on the page.',\n  inputSchema: {\n    type: 'object',\n    properties: {\n      input: { type: 'string' },\n    },\n    required: ['input'],\n  },\n  execute: async ({ input }) => {\n    \u002F\u002F Add the logic to perform the action here\n  },\n})\n```\n\nL'objet `document` reçoit une nouvelle propriété appelée `modelContext`, qui constitue le point d'entrée pour créer et enregistrer des outils sur la page actuelle. Les agents qui utilisent votre site doivent savoir quels outils sont disponibles. `modelContext` expose donc une méthode `getTools()` qui renvoie la liste des outils disponibles sur la page.\n\n```typescript\nconst tools = await document.modelContext.getTools()\n```\n\nCela ressemble à la méthode `listTools()` exposée par [`createMCPClient()`](https:\u002F\u002Fai-sdk.dev\u002Fdocs\u002Freference\u002Fai-sdk-core\u002Fcreate-mcp-client) dans l'AI SDK. Cela peut être un peu déroutant car, dans le navigateur, nous agissons à la fois comme le serveur en enregistrant des outils et comme le client en y accédant. La raison est que votre site web n'est pas nécessairement celui qui consomme ces outils.\n\nVous pouvez également exécuter un outil à l'aide de la méthode `executeTool()` de l'objet `modelContext`.\n\n```typescript\nconst [tool] = await document.modelContext.getTools()\n\nawait document.modelContext.executeTool(tool, JSON.stringify({\n  input: '...',\n}))\n```\n\nLa seconde est l'API déclarative, qui permet de définir des outils à l'aide d'annotations HTML. Elle est principalement conçue pour les formulaires :\n\n```html\n\u003Cform toolname=\"supportRequestTool\"\n  tooldescription=\"Submit a request for support.\"\n  action=\"\u002Fsubmit\">\n\n  \u003Clabel for=\"firstName\">First Name\u003C\u002Flabel>\n  \u003Cinput type=text name=firstName>\n\n  \u003Clabel for=\"lastName\">Last Name\u003C\u002Flabel>\n  \u003Cinput type=text name=lastName>\n\n  \u003Cselect name=\"select\" required\n    toolparamdescription=\"Determines what team this request is routed to.\">\n    \u003Coption value=\"Customer happiness team\">Return my purchase.\u003C\u002Foption>\n    \u003Coption value=\"Distribution team\">Check where my package is.\u003C\u002Foption>\n    \u003Coption value=\"Website support team\">Get help on the website.\u003C\u002Foption>\n  \u003C\u002Fselect>\n\n  \u003Cbutton type=submit>Submit\u003C\u002Fbutton>\n\u003C\u002Fform>\n```\n\n> [!NOTE]\n> Exemple tiré de la [documentation de l'API déclarative de WebMCP](https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fai\u002Fwebmcp\u002Fdeclarative-api).\n\nVient ensuite l'API Prompt. Elle est plus complexe, car elle nécessite davantage de gestion de la disponibilité et du cycle de vie. Par exemple, vous devez détecter si le LLM intégré au navigateur est disponible. S'il ne l'est pas, vous devez en connaître la raison. L'appareil est peut-être incompatible, ou le LLM n'a peut-être pas encore été téléchargé. S'il peut l'être, vous devez demander au navigateur de le télécharger, ce qui peut prendre du temps. Vous devez donc informer l'utilisateur que quelque chose se passe en arrière-plan. De plus, l'API expose des primitives de bas niveau que vous ne voudrez probablement pas manipuler directement.\n\nCela demande plus de travail que d'appeler une API. La bonne nouvelle, c'est qu'un provider communautaire appelé [Browser AI](https:\u002F\u002Fai-sdk.dev\u002Fproviders\u002Fcommunity-providers\u002Fbrowser-ai) simplifie l'utilisation de l'API Prompt avec l'AI SDK.\n\n```typescript\nimport { browserAI } from '@browser-ai\u002Fcore'\nimport { streamText } from 'ai'\n\nconst model = browserAI()\n\nconst { textStream } = streamText({\n  model,\n  prompt: 'Describe the future of the web in five sentences.',\n})\n\nfor await (const textPart of textStream) {\n  console.log(textPart)\n}\n```\n\n> [!NOTE]\n> Je vous recommande vivement de lire l'article [Utiliser l'API Prompt intégrée avec le Vercel AI SDK](https:\u002F\u002Fdeveloper.chrome.com\u002Fblog\u002Fprompt-api-with-vercel-ai).\n\n## Ce n'est que le début\n\nPour l'instant, même si vous pouvez déjà tester les deux API, elles restent expérimentales et leur prise en charge par les navigateurs est limitée. Cela signifie que la plupart des gens ne pourront pas les utiliser. Elles doivent encore être standardisées et adoptées par d'autres éditeurs de navigateurs, comme Mozilla et Apple.\n\nDe plus, les modèles intégrés au navigateur sont limités, particulièrement en comparaison avec les modèles de pointe. Ils peuvent répondre à des questions et appeler des outils, mais vous devez garder les instructions et les paramètres des outils simples, vraiment simples.\n\nIls deviendront inévitablement de plus en plus intelligents. Récemment, Qwen a publié Qwen3.8-27B, un modèle capable de fonctionner sur certains appareils grand public. Google fait également des progrès importants avec sa gamme de modèles Gemma, conçus pour fonctionner directement sur les appareils. Les appareils deviennent plus puissants et plus aptes à exécuter ces modèles. Les SoC de la série M d'Apple intègrent un Neural Engine, ou NPU, et Google a fait de même avec ses SoC Tensor. La dernière version de Siri effectue également des traitements d'IA directement sur l'appareil, et elle semble vraiment puissante. Ce n'est désormais plus qu'une question de temps.\n\nEnfin, lorsque tout cela sera standardisé et mature, disposer de tout ce qu'il faut, prêt à l'emploi, vous donnera un avantage concurrentiel.\n\n---\n\nPendant que j'écrivais cet article, OpenAI a annoncé un [défi WebMCP](https:\u002F\u002Fopenai.com\u002Fwebmcp-challenge\u002F) pour explorer ce qui est possible. Il semble que je sois sur la bonne voie.\n",null,{"title":5,"description":1160},{"loc":1163},"fr\u002Fposts\u002Ffrom-browsing-to-asking-the-web-learns-to-take-action","5KJ6HxIhI2sMdTPTD_HRBShbZKxMIMvwZ9YRopfvR3w",1790086902577]