Créer un dashboard interactif, un quiz, un générateur de factures... Tout ce qu'Artifacts dans Claude peut faire pour vous
Après l'ère de la génération voici venue celle de l'action. A l'occasion de la sortie officielle de Claude 3.5 Sonnet en juin, Anthropic a présenté une nouvelle fonctionnalité intégrée directement à son interface maison. Nommée Artifacts cette dernière permet d'interpréter directement du code depuis la fenêtre de chat de Claude. Artifacts est aujourd'hui disponible en France pour les utilisateurs gratuits de Claude et est inclus dans les plans Pro et Team. Il offre une nouvelle manière d'utiliser l'IA.
Quels sont les cas d'usage possible ?
Par son fonctionnement très simple, Artifacts offre une multitude d'utilisations possibles. Un Artifacts peut inclure un ou des documents en markdown, un texte brut, un site web (en HTML / JS), du SVG (Scalable Vector Graphics), des diagrammes ou des organigrammes ou encore des composants en React (bibliothèque JavaScript). Voici 5 cas d'usage à essayer.
Créer un dashboard interactif à partir d'un document complexe
Grace à la prise en charge de React, Claude peut, avec Artifacts, créer un dashboard complet pour explorer plus facilement les documents complexes. Idéal pour les papiers de recherche technique, par exemple.
Prompt : Créez un tableau de bord interactif en React pour visualiser le document joint, en utilisant une analyse sémantique pour mettre en évidence les points clés. Intégrez des graphiques, un système de navigation intuitif, des filtres, et une fonction de recherche. Organisez l'information hiérarchiquement, avec des résumés concis et la possibilité d'afficher plus de détails. Utilisez un code couleur pour catégoriser l'information et assurez-vous d'inclure tous les concepts, même mineurs, pour une compréhension rapide et complète du contenu.
Créer un organigramme
Grâce à Artifacts, Claude peut générer des graphiques et des organigrammes. Un format parfois plus simple pour comprendre rapidement un raisonnement, un process ou un code complexe. Exemple ici avec l'analyse de morceaux de code.
Prompt : Examine attentivement le code fourni, analyse ses composants et leurs interactions, puis crée un organigramme simplifié illustrant le flux d'exécution et la structure globale du programme, en mettant en évidence les principales fonctions, les structures de contrôle et les relations entre les différents éléments pour offrir une vue d'ensemble claire et concise du fonctionnement du code.
Créer un quiz web interactif
Pour vérifier ses connaissances sur un sujet, développer un module pour un cours, ou tout simplement créer une évaluation semi-automatisée, Artifacts peut vous aider à créer un quizz personnalisé en JS, HTML et CSS.
Exemple ici avec la création d'un quizz à partir d'un cours complet.
Prompt : Analysez le cours fourni en pièce jointe et créez un quiz interactif en HTML, CSS et JavaScript qui couvre les concepts clés. Le quiz doit comporter environ 20 questions à choix multiples, avec un système de notation en temps réel. Implémentez un compteur de réponses correctes et incorrectes, et affichez le score final à la fin du quiz. Utilisez un code couleur vert pour les bonnes réponses et rouge pour les mauvaises. Assurez-vous que l'interface utilisateur soit intuitive et responsive. Incluez des fonctionnalités telles que la possibilité de revenir en arrière, de sauter des questions et de revoir les réponses à la fin.
Créer des outils web fonctionnels
De manière plus classique, Artifacts peut être utilisé pour créer une grande variété d'applications web, toujours avec du CSS, du JS et du HTML. Exemple ici avec un générateur de facture interactif basé sur un formulaire.
Prompt : Créez un outil web de génération de factures personnalisées à partir d'un formulaire incluant : nom et adresse des parties, date de vente/prestation, quantité et description précise des produits/services, prix unitaire HT, réductions éventuelles, date d'échéance et pénalités de retard, adresse de facturation (si différente), numéro de bon de commande (le cas échéant) ; l'outil doit ensuite produire une facture PDF correctement formatée et conforme aux exigences légales.
Créer un jeu vidéo
Plus original, Artifacts permet de créer des jeux vidéo rapidement et de façon assez simple. Idéal pour créer des serious game à visée pédagogique ou professionnelle. Exemple ici avec la reproduction du célèbre Snake.
Prompt : Génère le code React d'un jeu de type Snake simplifié au maximum mais fonctionnel et jouable, en incluant les éléments essentiels tels que le serpent, la nourriture, les collisions avec les bords et le corps du serpent, ainsi qu'un système de score basique, tout en utilisant des composants React modernes et des hooks pour gérer l'état du jeu et les interactions utilisateur, le tout dans un style minimaliste et épuré pour une prise en main rapide et intuitive.
Comment activer Artifacts dans Claude ?
Artifacts est disponible uniquement depuis l'interface maison d'Anthropic, depuis l'adresse Claude.ai. Dès lors impossible de l'utiliser via l'API. Pour l'activer, rien n'est plus simple. Il suffit de se rendre dans "Feature Preview" et de cocher la checkbox Artifacts. L'outil sera alors actif sur vos prochaines conversations avec Claude 3.5 Sonnet, Claude 3 Opus et Claude 3 Haiku.
Le principe est simple : lorsque l'IA identifie qu'elle peut utiliser Artifacts pour afficher des éléments visuels ou interpréter du code, elle ouvre une nouvelle fenêtre. Artifacts, génère le code à l'intérieur et l'interprète ensuite. La fenêtre s'actualise en continu au fil des requêtes utilisateurs. L'utilisateur peut interagir avec le contenu présenté, le copier ou l'enregistrer dans le cas d'une image (en SVG par exemple).
Claude génère généralement un Artifact lorsque le contenu produit présente certaines caractéristiques spécifiques. Notamment quand l'output est conséquent (dépassant souvent les 15 lignes), qu'il offre un potentiel d'adaptation ou de réutilisation par l'utilisateur, et qu'il possède une cohérence permettant sa compréhension hors du cadre de la conversation initiale.
L'aspect collaboratif de l'outil est son vrai point fort. Anthropic souhaitant orienter de plus en plus ses produits vers le partage, Artefacts en devient l'illustration même. Une fois l'Artefacts généré et interprété, il est possible de le publier pour le partager à d'autres utilisateurs de Claude grâce à un lien. Lien qui permet d'ouvrir l'Artifacts ou de le réutiliser dans un chat pour le modifier à sa guise. Une fonctionnalité très pratique en entreprise.
Une fonctionnalité déjà copiée
Artifacts ouvre une nouvelle ère dans l'usage des agents conversationnels en entreprise, celle de la création et de l'action concrète. De la conception d'outils métiers sur-mesure au prototypage accéléré d'applications, en passant par la gamification de la formation, les possibilités offertes par Artifacts semblent infinies. L'outil va permettre aux professionnels de gagner en autonomie et en agilité dans leur usage de l'IA.
Par ailleurs l'outil n'échappe pas à la concurrence. L'agrégateur d'IA Poe a récemment lancé "Previews", une fonctionnalité similaire permettant de générer et d'interagir avec des applications web directement dans les conversations. Comme Artifacts, Previews supporte le HTML, le CSS et le JavaScript, et permet de créer une grande variété d'expériences interactives, du jeu vidéo à la visualisation de données.