Comment utiliser les Artifacts de Claude pour créer une petite application?

Les Artifacts sont arrivés sur Claude.ai le 20 juin, en même temps que le modèle Claude 3.5 Sonnet. Quand vous demandez à Claude quelque chose de substantiel, comme un document, un schéma, un bout de code ou une page Web, le résultat s’ouvre maintenant dans sa propre fenêtre à côté de la conversation au lieu de défiler dans le fil de discussion. Pour du code Web, cette fenêtre fait plus qu’afficher du texte : elle exécute la page, si bien que le calculateur que vous avez demandé est un calculateur sur lequel vous pouvez cliquer.

Les Artifacts sont donc une façon douce de se lancer dans la création de petits outils sans rien installer. Simon Willison, un développeur qui l’a testé le jour du lancement, a noté que Claude peut maintenant créer des pages Web et des applications d’une seule page et les montrer en fonctionnement directement dans l’interface. Voici une réalisation complète pour débutants, du début à la fin.

Étape 1 : l’activer

Artifacts est un aperçu de fonction, ce qui veut dire qu’Anthropic est encore en train de le tester et que vous l’activez vous-même. Dans Claude.ai, ouvrez le menu du compte dans le panneau de gauche, trouvez les options d’aperçu des fonctions et activez Artifacts. Commencez ensuite une nouvelle conversation pour que le réglage s’applique.

Étape 2 : décrire l’application

Soyez concret sur ce qui entre, ce qui sort et l’apparence souhaitée. Demander un seul fichier HTML autonome rend le résultat facile à sauvegarder par la suite.

Crée un calculateur de pourboire sous forme d’un seul fichier HTML autonome
(HTML, CSS et JavaScript ensemble, sans bibliothèque externe).

Entrées : montant de l’addition, pourcentage de pourboire (boutons pour 10, 15, 18 et 20 %,
plus un champ personnalisé) et nombre de personnes.
Sorties : montant du pourboire, total et montant par personne, mis à jour pendant que je tape.
Arrondis à deux décimales. Affiche un message aimable plutôt qu’une erreur
si l’addition est vide ou si le nombre de personnes est zéro.
Design : épuré, gros caractères, fonctionne sur un écran de téléphone.

En quelques secondes, la fenêtre de l’artifact affiche le calculateur. Entrez une addition de 84,50, choisissez 18 % et divisez en quatre; si l’arithmétique est bien faite, vous devriez voir un pourboire de 15,21, un total de 99,71 et 24,93 par personne. Vérifier un cas à la main comme celui-ci est une bonne habitude à garder : l’application a l’air terminée bien avant que vous sachiez si elle est exacte.

Étape 3 : l’améliorer en conversant

Chaque message de suivi produit un artifact mis à jour. Changez une seule chose par message, pour que, si quelque chose brise, vous sachiez quelle demande l’a causé.

Vous pouvez aussi poser des questions sur le code lui-même, comme « Explique comment fonctionne l’arrondi », et Claude répond dans la conversation pendant que l’application reste ouverte. Anthropic décrit la plus grande fenêtre de code et les aperçus en direct comme particulièrement utiles pour réviser du code d’interface, et c’est tout l’intérêt : vous voyez le résultat et le code côte à côte.

Ce qu’il peut faire et ne pas faire

Un artifact vit dans votre conversation et s’exécute dans la fenêtre de Claude. Ça convient aux calculateurs, aux jeux-questionnaires, aux cartes mémoire, aux jeux simples, aux convertisseurs d’unités et aux petites visualisations de données faites à partir de chiffres que vous collez. Ce n’est pas un service d’hébergement : d’autres personnes ne peuvent pas le visiter comme un site Web, et rien n’est prévu pour conserver ce que les utilisateurs tapent ou pour gérer des comptes. N’y mettez pas de données sensibles. Pour une application qui doit enregistrer de l’information ou servir beaucoup de gens, traitez l’artifact comme un prototype fonctionnel et un cahier des charges clair pour la personne qui construira la vraie version.

Comment partager ou réutiliser ce que vous avez créé?

Le chemin le plus simple est de sauvegarder le code. Passez la fenêtre de l’artifact en mode code, copiez tout, collez-le dans un éditeur de texte simple et enregistrez-le sous le nom tip-calculator.html. Comme vous avez demandé un seul fichier autonome, un double-clic sur ce fichier ouvre l’application fonctionnelle dans n’importe quel navigateur Web, sans installation. Vous pouvez l’envoyer par courriel à un collègue, le mettre sur une clé USB pour la tablette d’un café, ou le téléverser chez n’importe quel hébergeur Web ordinaire pour lui donner une adresse.

Pour le réutiliser dans Claude, gardez le fichier et collez-le de nouveau dans une nouvelle conversation avec votre prochaine demande, par exemple « Voici mon calculateur de pourboire; ajoute une vue de reçu. » Si vous utilisez la fonction Projects de Claude, lancée le 25 juin pour les forfaits Pro et Team, vous pouvez ajouter le fichier aux connaissances d’un projet pour qu’il soit accessible dans toutes les conversations de ce projet. Dans les forfaits Team, vous pouvez aussi partager un instantané de la conversation dans le fil d’activité du projet, où vos collègues peuvent voir comment l’application a été construite et emprunter les prompts.

Quelle que soit la voie choisie, testez la copie sauvegardée hors de Claude avant de la remettre à qui que ce soit, et lisez le code une fois, ou demandez à Claude d’en expliquer chaque section, pour savoir ce que vous partagez.