De la navigation à la demande : le Web passe à l'action

Il y a quelques mois, j'ai écrit un article intitulé 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.

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.

Dans ce futur, qui est déjà là, nous demanderons aux agents d'agir, et j'adore déjà ça.

Site web en tant que barre de recherche

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.

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.

Cependant, une nouvelle approche a récemment commencé à émerger.

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 :

  1. WebMCP, qui permet de créer et d'exposer des outils structurés aux agents IA ;
  2. L'API Prompt, qui permet d'envoyer des requêtes en langage naturel à un LLM dans Chrome.

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.

Le futur est déjà là

Oui, cela paraît fou, je sais, mais le futur est déjà là.

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 discuter avec une IA intégrée au navigateur. 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.

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.

Demander des actions

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 une extension de navigateur pour les tests, je n'ai trouvé aucun autre outil pour le tester.

Démo de l'assistant IA intégré au navigateur effectuant des actions sur le site web.

Que venez-vous de voir ?

Nous utilisons 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.

Habituellement, l'utilisateur effectue manuellement toutes les actions que je viens de décrire.

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.

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.

Deux API pour y parvenir

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.

WebMCP se présente sous deux formes :

  1. Une API impérative pour définir des outils avec JavaScript ;
  2. Une API déclarative pour définir des outils avec des annotations HTML.

La première est similaire à la manière dont un serveur MCP définit des outils.

typescript
await document.modelContext.registerTool({
  name: 'performAction',
  description: 'Perform an action on the page.',
  inputSchema: {
    type: 'object',
    properties: {
      input: { type: 'string' },
    },
    required: ['input'],
  },
  execute: async ({ input }) => {
    // Add the logic to perform the action here
  },
})

L'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.

typescript
const tools = await document.modelContext.getTools()

Cela ressemble à la méthode listTools() exposée par 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.

Vous pouvez également exécuter un outil à l'aide de la méthode executeTool() de l'objet modelContext.

typescript
const [tool] = await document.modelContext.getTools()

await document.modelContext.executeTool(tool, JSON.stringify({
  input: '...',
}))

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 :

html
<form toolname="supportRequestTool"
  tooldescription="Submit a request for support."
  action="/submit">

  <label for="firstName">First Name</label>
  <input type=text name=firstName>

  <label for="lastName">Last Name</label>
  <input type=text name=lastName>

  <select name="select" required
    toolparamdescription="Determines what team this request is routed to.">
    <option value="Customer happiness team">Return my purchase.</option>
    <option value="Distribution team">Check where my package is.</option>
    <option value="Website support team">Get help on the website.</option>
  </select>

  <button type=submit>Submit</button>
</form>

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.

Cela demande plus de travail que d'appeler une API. La bonne nouvelle, c'est qu'un provider communautaire appelé Browser AI simplifie l'utilisation de l'API Prompt avec l'AI SDK.

typescript
import { browserAI } from '@browser-ai/core'
import { streamText } from 'ai'

const model = browserAI()

const { textStream } = streamText({
  model,
  prompt: 'Describe the future of the web in five sentences.',
})

for await (const textPart of textStream) {
  console.log(textPart)
}

Note

Je vous recommande vivement de lire l'article Utiliser l'API Prompt intégrée avec le Vercel AI SDK.

Ce n'est que le début

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.

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.

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.

Enfin, lorsque tout cela sera standardisé et mature, disposer de tout ce qu'il faut, prêt à l'emploi, vous donnera un avantage concurrentiel.


Pendant que j'écrivais cet article, OpenAI a annoncé un défi WebMCP pour explorer ce qui est possible. Il semble que je sois sur la bonne voie.

Pd

Merci de me lire ! Je m'appelle Estéban, et j'adore écrire sur le développement web et le parcours humain qui l'entoure.

Je code depuis plusieurs années maintenant, et j'apprends encore de nouvelles choses chaque jour. J'aime partager mes connaissances avec les autres, car j'aurais aimé avoir accès à des ressources aussi claires et complètes lorsque j'ai commencé à apprendre la programmation.

Si vous avez des questions ou souhaitez discuter, n'hésitez pas à commenter ci-dessous ou à me contacter sur Bluesky, X, et LinkedIn.

J'espère que vous avez apprécié cet article et appris quelque chose de nouveau. N'hésitez pas à le partager avec vos amis ou sur les réseaux sociaux, et laissez un commentaire ou une réaction ci-dessous, cela me ferait très plaisir ! Si vous souhaitez soutenir mon travail, vous pouvez me sponsoriser sur GitHub !

Réactions

Discussions

Ajouter un commentaire

Vous devez être connecté pour accéder à cette fonctionnalité.

Soutenez mon travail
Suivez-moi sur