Créez un tableau de bord interactif, un quiz, un générateur de factures… Tout ce que Artifacts in Claude peut faire pour vous

Dévoilé par Anthropic le 21 juin, Artifacts offre de nouvelles possibilités grâce à Claude.

Après l’ère de la génération, voici venue l’ère 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 d’accueil. Baptisée Artifacts, elle permet d’interpréter directement du code depuis la fenêtre de discussion de Claude. Artifacts est désormais disponible en France pour les utilisateurs gratuits de Claude et est inclus dans les plans Pro et Team. Il propose une nouvelle façon d’utiliser l’IA.

Quels sont les cas d’utilisation possibles ?

Avec son fonctionnement très simple, Artifacts offre une multitude d’utilisations possibles. Un Artifacts peut inclure un ou plusieurs documents markdown, du texte brut, un site web (en HTML/JS), du SVG (Scalable Vector Graphics), des diagrammes ou organigrammes ou encore des composants React (bibliothèque JavaScript). Voici 5 cas d’usage à tester.

Créer un tableau de bord interactif à partir d’un document complexe

Grâce à la prise en charge de React, Claude peut utiliser Artifacts pour créer un tableau de bord complet afin d’explorer plus facilement des documents complexes. Idéal pour les articles de recherche technique, par exemple.

Invite : Créez un tableau de bord interactif dans React pour visualiser le document joint, en utilisant l’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 les informations de manière hiérarchique, avec des résumés concis et la possibilité d’afficher plus de détails. Utilisez un code couleur pour catégoriser les informations et assurez-vous d’inclure tous les concepts, même les plus 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 processus ou un code complexe. Exemple ici avec l’analyse de morceaux de code.

Invite : 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, mettant en évidence les principales fonctions, les structures de contrôle et les relations entre les différents éléments pour fournir un aperçu clair et concis du fonctionnement du code.

Créer un quiz Web interactif

Pour tester vos connaissances sur un sujet, développer un module pour un cours ou simplement créer une évaluation semi-automatisée, Artifacts peut vous aider à créer un quiz personnalisé en JS, HTML et CSS.

Exemple ici avec la création d’un quiz à partir d’un cours complet.

Invite : Analysez le cours ci-joint et créez un questionnaire interactif en HTML, CSS et JavaScript qui couvre les concepts clés. Le questionnaire doit être composé d’environ 20 questions à choix multiples, avec une notation en temps réel. Implémentez un compteur pour les réponses correctes et incorrectes, et affichez le score final à la fin du questionnaire. Codez les bonnes réponses en vert et les mauvaises réponses en rouge. Assurez-vous que l’interface utilisateur est intuitive et réactive. 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 permet de 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.

Invite : Créer un outil web permettant de générer des factures personnalisées à partir d’un formulaire comprenant : nom et adresse des parties, date de vente/prestation, quantité et description précise des produits/services, prix unitaire hors TVA, remises éventuelles, date d’échéance et pénalités de retard, adresse de facturation (si différente), numéro de bon de commande (si applicable) ; 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 assez simplement. Idéal pour créer des serious games à but pédagogique ou professionnel. Exemple ici avec la reproduction du célèbre Snake.

Invite : génère un code React de jeu de type Snake minimal mais fonctionnel et jouable, comprenant des éléments essentiels tels que le serpent, la nourriture, les collisions avec les bords et le corps du serpent, et un système de notation de base, tout en utilisant des composants et des hooks React modernes pour gérer l’état du jeu et les interactions des utilisateurs, le tout dans un style minimaliste et épuré pour un apprentissage rapide et intuitif.

Comment activer les artefacts dans Claude ?

Artifacts est uniquement disponible depuis l’interface home d’Anthropic, depuis l’adresse Claude.ai. Il est donc impossible de l’utiliser via l’API. Pour l’activer, rien de plus simple. Il suffit d’aller dans « Feature Preview » et de cocher la case 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 des 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 puis l’interprète. La fenêtre est continuellement mise à jour au fur et à mesure des requêtes de l’utilisateur. 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 Artefact lorsque le contenu produit présente certaines caractéristiques spécifiques. En particulier lorsque le rendu est conséquent (dépassant souvent 15 lignes), lorsqu’il offre un potentiel d’adaptation ou de réutilisation par l’utilisateur, et lorsqu’il présente une cohérence permettant sa compréhension en dehors du cadre de la conversation initiale.

L’aspect collaboratif de l’outil est son véritable point fort. Alors qu’Anthropic souhaite de plus en plus orienter ses produits vers le partage, Artefacts en devient l’illustration même. Une fois les Artefacts générés et interprétés, il est possible de les publier pour les partager avec d’autres utilisateurs de Claude grâce à un lien. Un lien qui permet d’ouvrir les Artefacts ou de les réutiliser dans un chat pour les modifier à sa guise. Une fonctionnalité très pratique en entreprise.

Une fonctionnalité déjà copiée

Artifacts ouvre une nouvelle ère dans l’utilisation 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 formations, les possibilités offertes par Artifacts semblent infinies. L’outil permettra aux professionnels de gagner en autonomie et en agilité dans leur utilisation de l’IA.

L’outil n’est pas non plus à l’abri de la concurrence. L’agrégateur d’IA Poe a récemment lancé « Previews », une fonctionnalité similaire qui vous permet de générer et d’interagir avec des applications Web directement dans les conversations. Comme Artifacts, Previews prend en charge HTML, CSS et JavaScript et vous permet de créer une grande variété d’expériences interactives, des jeux vidéo à la visualisation de données.