Créer et déployer un site avec l'IA

Précédemment, dans Migrer une page statique avec l'IA, nous avons vu comment migrer une page statique déjà existante vers un service piloté par du contenu géré par WEEGLOO. Cette fois, nous couvrons un parcours plus large, qui inclut l'étape de création d'une page entièrement à partir de zéro.

Dans ce guide, vous vous appuyez sur un agent LLM et sur le MCP de WEEGLOO pour mener cinq tâches l'une après l'autre, en partant d'une page blanche. Vous commencez par finaliser le design et l'implémentation de la page avec un outil de design assisté par IA, puis vous analysez la page générée afin de définir automatiquement les Content Type, avant de charger en tant que Content les données inscrites dans la page. Vous modifiez ensuite le code pour que la page récupère ses données via le CDA, et enfin vous publiez la page vers l'extérieur grâce au Web Hosting de WEEGLOO.

Au terme de ce parcours, vous menez à bien l'ensemble du processus, du design à la gestion de contenu jusqu'au déploiement, à l'aide d'un agent LLM et de WEEGLOO uniquement, sans avoir à construire vous-même une infrastructure dédiée.

Préparatifs

Trois éléments doivent être en place avant de commencer.

Premièrement, un nouveau Space vide doit avoir été créé dans WEEGLOO. Les Content Type et les Content que vous allez créer seront tous gérés au sein de ce Space. Les Organization et les Space sont présentés en détail dans Accès et permissions.

Deuxièmement, l'agent LLM doit être connecté au MCP de WEEGLOO. Ce guide se déroule avec l'IDE Cursor comme référence, mais vous pouvez suivre le même parcours dans tout environnement prenant en charge le MCP, comme Claude Desktop. La méthode d'installation est présentée dans MCP.

Troisièmement, vous avez besoin d'un outil d'IA qui génère automatiquement le design et l'implémentation de la page. Par commodité, ce guide utilise Vercel v0, mais n'importe quel outil capable de produire à la fois le design et le code à partir d'une simple demande en langage naturel convient, comme Lovable ou Bolt.new. Si vous êtes plus à l'aise dans un environnement où vous écrivez le code vous-même, vous pouvez aussi demander le design et l'implémentation à votre agent LLM habituel, par exemple l'IDE Cursor.

Design et implémentation de la page

La toute première chose à faire est de finaliser le design et l'implémentation de la page. À cette étape, vous décrivez en langage naturel le type de page que vous souhaitez créer et vous transmettez cette description telle quelle à l'outil d'IA.

Ce guide prend pour exemple une page de documentation d'API destinée à un service d'API d'analyse fictif. De nombreuses équipes de développement adoptent un outil de documentation distinct ou un modèle externe pour gérer leur documentation d'API, mais cette approche lie fortement la forme de la documentation à son contenu, ce qui rend souvent difficiles les changements de structure libres ou une exploitation adaptée au flux de l'équipe. Cette fois, vous composez vous-même tout le processus, du design à la gestion de contenu, afin d'obtenir une forme que vous pouvez exploiter librement selon vos besoins.

La page contient des informations sur l'API elle-même (nom, accroche, courte introduction) ainsi que des informations sur chaque point de terminaison (méthode HTTP, chemin, résumé, description). La forme concrète de la page et le nombre de points de terminaison couverts se définissent librement selon l'API que vous exploitez, et vous pouvez les étendre à volonté au fil de l'exploitation. Ces besoins se formulent en langage naturel et se transmettent à l'outil d'IA de la manière suivante.

Hey, I want to build a docs site for an analytics API called Pulse.
Standard API reference layout — an overview area with the API's name,
tagline, and a short intro, plus an endpoint reference section showing
the HTTP method, path, summary, and description for each. Clean,
dev-friendly, not too colorful — think Stripe-style readable.

À la réception de la demande, l'outil d'IA produit une maquette de design et rédige en même temps le balisage et les styles correspondants. À ce stade, aucun système de gestion de contenu n'est encore connecté, si bien que toutes les données affichées sur la page sont inscrites directement dans le code.

Vous téléchargez ensuite le code de la page ainsi créée et vous l'importez dans un environnement d'agent LLM tel que l'IDE Cursor. Toute la suite des opérations s'appuie sur ce code et suit les mêmes étapes que le parcours présenté dans Migrer une page statique avec l'IA.

Modélisation du contenu

À cette étape, vous définissez la structure de données de la page générée précédemment sous forme de Content Type. Un Content Type est comme le plan de conception des données : il fixe à l'avance quels Field possèdent les données que WEEGLOO va gérer.

En examinant le code de la page, on constate qu'il contient à la fois des informations sur l'API elle-même et des informations sur chaque point de terminaison, ces deux types de données formant une relation un-à-plusieurs. La page se scinde donc naturellement en deux : un Content Type qui contient les informations de l'API et un Content Type qui contient les informations des points de terminaison.

Cette analyse et la création des Content Type se font automatiquement, simplement en formulant à l'agent LLM la demande suivante.

Hey, I just dropped the page from v0 into the project.
The data's all hardcoded for now (the API info up top, the endpoints down
below).
 
I want to migrate it over to Weegloo so the page can pull its content from
a CMS instead of having it all baked in. Let's take it step by step rather
than doing the whole thing in one go.
 
To kick things off, could you take a look and figure out
what content types would make sense for it, then go ahead and create them
in Weegloo? We'll deal with the actual content and the API wiring in the
following steps.

À la réception de la demande, l'agent LLM examine la structure du code pour en déduire les types de données et leurs relations, choisit le type adapté à chaque Field, puis crée les Content Type via le MCP de WEEGLOO.

Une fois l'opération terminée, en consultant la page Content Type du studio de contenu WEEGLOO, vous voyez deux nouveaux Content Type créés : l'un représentant l'API et l'autre les points de terminaison. Le Content Type de l'API comporte des Field tels que le nom, l'accroche et l'introduction, tandis que le Content Type des points de terminaison comporte la méthode HTTP, le chemin, le résumé et la description, ainsi qu'un Field de référence (Reference) indiquant à quelle API le point de terminaison appartient.

Une fois les Content Type ainsi définis, tout est prêt pour charger les données réelles à partir de cette structure. Les Content Type sont présentés en détail dans Modélisation du Content.

Création du contenu

Un Content Type ne fait que définir le format des données : il ne contient en lui-même aucune donnée. À cette étape, en vous appuyant sur les Content Type définis précédemment, vous transférez en tant que Content les données réelles qui figuraient dans le code de la page.

En formulant à l'agent LLM la demande suivante, il analyse les données du code, crée des Content conformes aux Content Type et se charge aussi de la publication.

Alright, the content types look good. Now let's move on to actually loading
the data.
 
Could you go through project again, pull out the actual content
that's hardcoded in there, and create entries in Weegloo using the content
types we just made? Once everything's in, go ahead and publish them too
so they're ready to be served.

À la réception de la demande, l'agent LLM réanalyse le code, répartit les données par éléments, puis enregistre l'une après l'autre les informations de l'API et celles de chaque point de terminaison via le MCP de WEEGLOO. Les Content enregistrés sont publiés dans la foulée afin de pouvoir être consultés depuis l'extérieur.

Une fois l'opération terminée, en consultant la liste des Content dans le studio de contenu WEEGLOO, vous voyez que les informations de l'API et des points de terminaison sont toutes enregistrées à l'état publié. À partir de ce moment, vous pouvez modifier librement les données depuis le studio de contenu ou avec l'agent LLM, sans avoir à retoucher directement le code de la page.

La rédaction et la publication des Content sont présentées en détail dans Rédaction et publication du Content.

Intégration du CDA

Une fois les données prêtes, vous modifiez le code pour que la page récupère ses données via le CDA de WEEGLOO plutôt qu'à partir de données inscrites directement dans le code. Le CDA est une API en lecture seule proposée pour consulter depuis un service externe les Content publiés ; il permet à une page web ou à une application mobile de récupérer et d'utiliser directement les données de WEEGLOO.

Cette opération aussi se fait automatiquement en formulant à l'agent LLM la demande suivante.

Okay, almost there. The content's all in Weegloo and published, so now
let's hook the page up to actually use it.
 
Could you update project so that instead of having all that data
hardcoded in the markup, it fetches from Weegloo's CDA on load and
renders the page from the response? Basically the same page as before,
just pulling from the API now.

À la réception de la demande, l'agent LLM retire les données statiques inscrites dans le code et les remplace par un appel au CDA et par du code qui reporte à l'écran les données de la réponse. À l'emplacement des informations des points de terminaison figure désormais un appel CDA qui consulte la liste des Content de points de terminaison, et à l'emplacement des informations de l'API, un appel qui consulte le Content de l'API à l'unité.

En exécutant la page modifiée en local, puis en ouvrant l'onglet Network des outils de développement du navigateur, vous pouvez constater qu'au chargement de la page, une requête réelle est bien envoyée au CDA de WEEGLOO et qu'une réponse arrive. Le CDA est présenté en détail dans Content Delivery API.

Hébergement web

La dernière étape consiste à publier vers l'extérieur la page que vous avez construite jusqu'ici. WEEGLOO propose la fonctionnalité Web Hosting pour héberger la page directement. Elle vous permet de rendre la page finalisée accessible à tous, sans avoir à constituer vous-même une infrastructure d'hébergement dédiée.

Vous formulez à l'agent LLM la demande suivante.

Last thing — let's get this live.
 
Could you set up a WebHosting in Weegloo for this project and deploy the
page to it?

À la réception de la demande, l'agent LLM dépose le résultat de build de la page sur le Web Hosting et déploie la page de manière à la rendre accessible depuis l'extérieur via un sous-domaine attribué automatiquement.

Une fois le déploiement terminé, vous pouvez accéder à la page de n'importe où via l'adresse du sous-domaine attribué. À partir de ce moment, il vous suffit de modifier les Content dans le studio de contenu WEEGLOO pour que les changements soient répercutés immédiatement sur le site en ligne, sans avoir à reconstruire ni à redéployer. Les tâches fréquentes dans l'exploitation d'une documentation d'API, comme l'ajout d'un nouveau point de terminaison ou la modification de la description d'un point de terminaison existant, se traitent elles aussi sans toucher au code.

Si, plus tard en phase d'exploitation, vous souhaitez utiliser votre propre domaine, vous pouvez relier un Custom Domain depuis le studio de contenu WEEGLOO. Le Web Hosting et le Custom Domain sont présentés en détail dans Déploiement d'un site web.

Vous venez de mener à bien, en partant d'une page blanche, l'ensemble du processus, du design et de l'implémentation à la gestion de contenu jusqu'au déploiement, à l'aide d'un agent LLM et de WEEGLOO uniquement. Le même parcours s'applique tel quel à des sites plus complexes, et les tâches consistant à ajouter de nouveaux Content Type ou à augmenter le volume de Content en cours d'exploitation se prolongent elles aussi naturellement de la même manière.