C'est une période passionnante pour créer des applications. Avec l'essor récent du « codage Vibe » alimenté par l'IA, n'importe qui peut créer un site web ou une application en décrivant simplement ce qu'il souhaite en quelques phrases. Nous voyons déjà des organisations mettre cette fonctionnalité à la disposition de leurs utilisateurs et de leurs employés internes, permettant ainsi à chacun de créer ce dont il a besoin.Aujourd'hui, nous sommes ravis de mettre en open source une plateforme d'IA de Vibe Coding, VibeSDK, qui permet à tout un chacun d'exécuter lui-même une plateforme de codage complète, de bout en bout, en un seul clic.
Vous voulez vous en rendre compte par vous-même ? Découvrez notre plateforme de démonstration que vous pouvez utiliser pour créer et déployer des applications. Mieux encore, cliquez sur le bouton ci-dessous pour déployer votre propre plateforme alimentée par l'IA et plongez-vous dans le référentiel pour découvrir comment elle est construite.
Déployer sur CloudflareLe déploiement de VibeSDK configure tout ce dont vous avez besoin pour exécuter votre propre plateforme de développement alimentée par l'IA :
- Intégration avec les modèles LLM pour générer du code, créer des applications, déboguer les erreurs et itérer en temps réel, grâce à Agents SDK.
- Environnements de développement isolés qui permettent aux utilisateurs de créer et de prévisualiser leurs applications en toute sécurité dans des sandbox sécurisées.
- Une évolutivité infinie qui vous permet de déployer des milliers, voire des millions d'applications que les utilisateurs finaux déploient, toutes servies sur le réseau mondial de Cloudflare.
- Observabilité et mise en cache sur plusieurs fournisseurs d'IA, vous donnant un aperçu des coûts et des performances avec une mise en cache intégrée pour les réponses courantes.
- Modèles de projet que le LLM peut utiliser comme point de départ pour créer des applications courantes et accélérer le développement.
- Exportation de projet en un clic vers le compte Cloudflare ou le dépôt GitHub de l'utilisateur, afin que les utilisateurs puissent récupérer leur code et poursuivre le développement par eux-mêmes.
Création d'une plateforme d'IA de Vibe coding de A à Z
- Étape 0 : Commencez immédiatement avec VibeSDK
Nous voyons des entreprises créer leurs propres plateformes de codage IA vibe pour permettre aux utilisateurs internes et externes de les utiliser. Grâce à une plateforme de codage vibe, les équipes internes telles que le marketing, les produits et le support peuvent créer leurs propres pages d'accueil, prototypes ou outils internes sans avoir à dépendre de l'équipe d'ingénieurs. De même, les entreprises SaaS peuvent intégrer cette fonctionnalité à leur produit pour permettre aux utilisateurs de créer leurs propres personnalisations.
Chaque plateforme a des exigences et des spécialisations uniques. En créant la vôtre, vous pouvez écrire une logique personnalisée pour demander aux LLM de répondre à vos besoins spécifiques, offrant ainsi à vos utilisateurs des résultats plus pertinents. Cela vous permet également de contrôler entièrement l'environnement de développement et l'hébergement des applications, vous offrant ainsi une plateforme sécurisée qui préserve la confidentialité de vos données et vous permet de les contrôler.
Nous voulions permettre à tout le monde de créer facilement sa propre plateforme. C'est pourquoi nous avons développé une plateforme complète qui comprend des modèles de projet, des aperçus et le déploiement de projets. Les développeurs peuvent réutiliser l'ensemble de la plateforme ou simplement prendre les composants dont ils ont besoin et les personnaliser en fonction de leurs besoins.
- Étape 1 : trouver un environnement sûr et isolé pour exécuter du code non fiable généré par l'IA
L'IA peut désormais créer des applications entières, mais il y a un hic : vous avez besoin d'un endroit sûr pour exécuter ce code non fiable généré par l'IA. Imaginez qu'un LLM écrive une application qui nécessite d'installer des paquets, d'exécuter des commandes de compilation et de démarrer un serveur de développement. Vous ne pouvez pas simplement l'exécuter directement sur votre infrastructure, où elle pourrait affecter d'autres utilisateurs ou systèmes.
Avec Cloudflare Sandboxes, vous n'avez pas à vous en soucier. Chaque utilisateur dispose de son propre environnement isolé où le code généré par l'IA peut faire tout ce qu'un environnement de développement normal peut faire : installer des paquets npm, exécuter des builds, démarrer des serveurs, mais il est entièrement contenu dans un environnement sécurisé, basé sur des conteneurs, qui ne peut affecter quoi que ce soit en dehors de son bac à sable.
La plateforme attribue à chaque utilisateur son propre bac à sable en fonction de sa session, de sorte que si un utilisateur revient, il peut continuer à accéder au même conteneur avec ses fichiers intacts :
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 | // Creating a sandbox client for a user session
const sandbox = getSandbox(env.Sandbox, sandboxId);
// Now AI can safely write and execute code in this isolated environment
await sandbox.writeFile('app.js', aiGeneratedCode);
await sandbox.exec('npm install express');
await sandbox.exec('node app.js'); |
- Étape 2 : Génération du code
Une fois le bac à sable créé, vous disposez d'un environnement de développement qui peut donner vie au code. VibeSDK orchestre l'ensemble du workflow, de l'écriture du code à l'installation des paquets nécessaires, en passant par le démarrage du serveur de développement. Si vous lui demandez de créer une application de tâches à faire, il générera l'application React, écrira les fichiers de composants, exécutera bun install pour obtenir les dépendances et démarrera le serveur, afin que vous puissiez voir le résultat final.
Une fois que l'utilisateur a soumis sa demande, l'IA génère tous les fichiers nécessaires, qu'il s'agisse d'une application React, d'une API Node.js ou d'une application full-stack, et les écrit directement dans le bac à sable :
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | async function generateAndWriteCode(instanceId: string) {
// AI generates the application structure
const aiGeneratedFiles = await callAIModel("Create a React todo app");
// Write all generated files to the sandbox
for (const file of aiGeneratedFiles) {
await sandbox.writeFile(
`${instanceId}/${file.path}`,
file.content
);
// User sees: "✓ Created src/App.tsx"
notifyUser(`✓ Created ${file.path}`);
}
} |
Pour accélérer encore davantage le processus, nous avons fourni un ensemble de modèles, stockés dans un compartiment R2, que la plateforme peut utiliser et personnaliser rapidement, au lieu de générer chaque fichier à partir de zéro. Il ne s'agit que d'un ensemble initial, mais vous pouvez l'étendre et ajouter d'autres exemples.
- Étape 3 : obtenir un aperçu de votre déploiement
Une fois que tout est prêt, la plateforme démarre le serveur de développement et utilise le SDK Sandbox pour l'exposer sur Internet avec une URL d'aperçu public qui permet aux utilisateurs de voir instantanément leur application générée par l'IA fonctionner en direct :
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 | // Start the development server in the sandbox
const processId = await sandbox.startProcess(
`bun run dev`,
{ cwd: instanceId }
);
// Create a public preview URL
const preview = await sandbox.exposePort(3000, {
hostname: 'preview.example.com'
});
// User instantly gets: "https://my-app-xyz.preview.example.com"
notifyUser(`✓ Preview ready at: ${preview.url}`); |
- Étape 4 : Tester, consigner, corriger, répéter
Mais ce n'est pas tout ! Tout au long de ce processus, la plateforme capture les sorties de la console, les journaux de compilation et les messages d'erreur, puis les renvoie au LLM pour qu'il effectue des corrections automatiques. À mesure que la plateforme effectue des mises à jour ou des corrections, l'utilisateur peut voir tout ce qui se passe en direct : l'édition des fichiers, la progression de l'installation et la résolution des erreurs.
Déploiement d'applications : du bac à sable à la région Terre
Une fois l'application développée, elle doit être déployée. La plateforme regroupe tout dans le bac à sable, puis utilise un « bac à sable de déploiement » spécialisé distinct pour déployer l'application sur Cloudflare Workers. Ce bac à sable de déploiement exécute wrangler deploy dans un environnement sécurisé afin de publier l'application sur le réseau mondial de Cloudflare.
Étant donné que la plateforme peut déployer jusqu'à des milliers, voire des millions d'applications, Workers for Platforms est utilisé pour déployer les Workers à grande échelle. Bien que tous les Workers soient déployés dans le même espace de noms, ils sont tous isolés les uns des autres par défaut, ce qui garantit qu'il n'y a pas d'accès inter-locataires. Une fois déployée, chaque application reçoit sa propre instance Worker isolée avec une URL publique unique telle que my-app.vibe-build.example.com.
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 | async function deployToWorkersForPlatforms(instanceId: string) {
// 1. Package the app from development sandbox
const devSandbox = getSandbox(env.Sandbox, instanceId);
const packagedApp = await devSandbox.exec('zip -r app.zip .');
// 2. Transfer to specialized deployment sandbox
const deploymentSandbox = getSandbox(env.DeployerServiceObject, 'deployer');
await deploymentSandbox.writeFile('app.zip', packagedApp);
await deploymentSandbox.exec('unzip app.zip');
// 3. Deploy using Workers for Platforms dispatch namespace
const deployResult = await... |
La fin de cet article est réservée aux abonnés. Soutenez le Club Developpez.com en prenant un abonnement pour que nous puissions continuer à vous proposer des publications.