Accueil › Claude › Artifacts

Claude Artifacts : le guide complet pour créer, publier et partager

Les Artifacts sont des contenus autonomes (documents, composants React, visualisations, mini-applications) que Claude génère dans un panneau dédié à côté de la conversation, avec la possibilité de les modifier, les publier via un lien et les enrichir de stockage persistant et d’appels API.

Lancés en juin 2024, les Artifacts ont évolué d’un simple panneau d’aperçu vers un véritable environnement de développement de micro-applications. Avec les mises à jour de 2025-2026 (stockage persistant, appels API intégrés, intégration MCP, catalogue communautaire), ils transforment Claude en plateforme de prototypage. Ce guide couvre tout : fonctionnement, types de contenus, création pas à pas, publication, partage, cas d’usage concrets et limites à connaître.

Qu’est-ce qu’un Artifact exactement ?

Un Artifact est un contenu structuré que Claude génère dans un panneau séparé de la conversation. La distinction clé : le chat est la conversation sur le travail, l’Artifact est le travail lui-même.

Quand vous demandez à Claude de produire quelque chose de substantiel (un document, un composant d’interface, un tableau, un script, un diagramme), il le place automatiquement dans un Artifact plutôt que de l’insérer dans le fil de discussion. Le déclenchement est automatique dès que le contenu dépasse environ 15 lignes ou qu’il s’agit d’un bloc autonome et complexe.

L’interface se divise alors en deux : la conversation à gauche, l’Artifact à droite. Vous pouvez basculer entre deux modes de visualisation en haut du panneau.

Le mode Preview affiche le rendu visuel : la page web, le composant React, le graphique SVG ou le document tel qu’il apparaîtra. C’est le mode par défaut quand vous travaillez sur du contenu visuel.

Le mode Code affiche le code source sous-jacent. Il est utile pour copier le code, le modifier manuellement ou le transférer dans votre environnement de développement. Ce mode est masqué quand l’Artifact ne contient que du texte.

Ce qui rend les Artifacts puissants, c’est le workflow itératif. Vous n’êtes pas dans un cycle « demander → copier → tester → revenir ». Vous décrivez un changement dans le chat (« agrandis le bouton », « ajoute un graphique camembert », « change la couleur en bleu »), Claude met à jour l’Artifact directement, et vous voyez le résultat instantanément. L’ensemble de votre conversation constitue l’historique de versions.

Ce que vous pouvez créer avec les Artifacts

Les Artifacts ne sont pas limités aux documents texte. Voici les principaux types de contenus supportés, classés par complexité croissante.

Documents et textes structurés

Rapports, articles, guides, politiques internes, briefs, plans marketing, fiches produit. Claude génère le contenu en Markdown dans l’Artifact, avec une mise en forme propre. Vous pouvez télécharger le résultat directement au format souhaité.

Code et scripts

Fonctions Python, scripts Bash, modules JavaScript, requêtes SQL, configurations YAML. L’Artifact affiche le code avec coloration syntaxique. Vous pouvez le copier, le télécharger ou demander à Claude de l’exécuter dans certains contextes.

Composants React interactifs

C’est là que les Artifacts se démarquent vraiment. Claude peut générer des composants React fonctionnels avec gestion d’état, gestionnaires d’événements et styling Tailwind CSS. Les composants sont rendus en temps réel dans le panneau Preview : formulaires interactifs, calculateurs, tableaux de bord, jeux, quiz.

Les bibliothèques disponibles incluent React (avec hooks), Recharts pour les graphiques, Lucide React pour les icônes, D3 pour les visualisations avancées, Three.js pour la 3D, Chart.js, lodash, MathJS, Papaparse (CSV), SheetJS (Excel), shadcn/ui pour les composants d’interface, Tone.js pour l’audio et TensorFlow.js.

Pages HTML complètes

Landing pages, formulaires, interfaces de prototypage. HTML, CSS et JavaScript dans un seul fichier, avec rendu instantané. Idéal pour prototyper rapidement un concept avant de le développer dans un vrai projet.

SVG et diagrammes Mermaid

Graphiques vectoriels, logos, illustrations techniques, diagrammes de flux, organigrammes, séquences UML. Les SVG sont éditables et exportables. Les diagrammes Mermaid permettent de décrire des architectures complexes avec une syntaxe simple.

Visualisations de données

Graphiques en barres, lignes, camemberts, scatter plots, heatmaps. Claude utilise Recharts ou Chart.js pour générer des visualisations interactives à partir de vos données. Joignez un fichier CSV ou décrivez vos données, et l’Artifact affiche un dashboard explorable.

Créer votre premier Artifact : pas à pas

Voici la méthode concrète pour créer, itérer et publier un Artifact, de A à Z.

Étape 1 : déclencher la création

Formulez votre demande dans le chat de manière descriptive. Plus vous êtes précis sur le résultat attendu, meilleur sera le premier jet.

Exemples de prompts efficaces :

Crée un calculateur de rentabilité locative en React. L'utilisateur entre le prix d'achat, le loyer mensuel, les charges et les impôts. Affiche le rendement brut, net et le cash-flow mensuel. Design moderne avec Tailwind.

Génère un tableau de bord de suivi de projet avec 3 sections : tâches en cours (kanban), burndown chart, et liste des risques. Utilise des couleurs pour indiquer les priorités.

Crée une page HTML de conditions générales de vente pour un SaaS B2B français. Inclus les clauses RGPD, les limitations de responsabilité et les conditions de résiliation.

Claude détecte automatiquement que le contenu nécessite un Artifact et le génère dans le panneau dédié.

Étape 2 : itérer dans la conversation

C’est ici que la magie opère. Vous n’avez pas besoin de toucher au code. Décrivez vos modifications en langage naturel :

Le bouton "Calculer" est trop petit sur mobile. Agrandis-le et ajoute un padding de 16px.

Ajoute un graphique en barres qui compare le rendement par année sur 10 ans.

La palette de couleurs ne me plaît pas. Passe sur un thème sombre avec des accents violets.

Claude met à jour l’Artifact directement. Chaque modification crée une nouvelle version accessible via la navigation en haut du panneau. Vous pouvez revenir à n’importe quelle version précédente à tout moment.

Étape 3 : sélectionner et modifier des sections

Vous pouvez sélectionner une portion spécifique de texte ou de code dans l’Artifact pour demander des modifications ciblées. Surlignez le passage qui vous intéresse, et Claude vous propose des actions contextuelles : améliorer, réécrire, développer ou supprimer cette section précise.

Étape 4 : exporter ou publier

Plusieurs options s’offrent à vous pour récupérer votre Artifact :

Copier le code : le bouton « Copier » en haut à droite copie l’intégralité du code source dans votre presse-papiers. Utile pour le transférer dans VS Code, votre CMS ou tout autre environnement.

Télécharger le fichier : le bouton de téléchargement (icône ⌄) génère un fichier au format approprié (.html, .jsx, .py, .md, etc.) que vous pouvez enregistrer localement.

Publier : le bouton « Publish » génère une URL publique. N’importe qui peut voir et interagir avec votre Artifact via ce lien, même sans compte Claude. Seul le contenu de l’Artifact est visible, pas votre conversation.

Fonctionnalités avancées

Stockage persistant (jusqu’à 20 Mo)

Depuis les mises à jour récentes, les Artifacts peuvent stocker des données entre les sessions. C’est un changement fondamental : vos micro-applications peuvent maintenant « se souvenir » de leur état.

Le stockage se configure en deux modes :

Stockage personnel (personal) : chaque utilisateur dispose de ses propres données privées. Exemple : un journal personnel, un tracker d’habitudes, un carnet de notes. Vos entrées ne sont visibles que par vous.

Stockage partagé (shared) : tous les utilisateurs voient et interagissent avec les mêmes données. Exemple : un tableau de scores, un kanban d’équipe, un registre collaboratif. Un avertissement s’affiche lors de la première utilisation pour informer que les données seront visibles par tous.

L’API de stockage fonctionne avec un système clé-valeur simple : window.storage.get(key), window.storage.set(key, value), window.storage.delete(key), window.storage.list(prefix). Les clés doivent faire moins de 200 caractères et les valeurs sont limitées à 5 Mo par clé.

Appels API Claude intégrés (« Claude in Claude »)

C’est la fonctionnalité qui transforme les Artifacts en véritables applications intelligentes. Un Artifact peut appeler l’API Claude directement, sans clé API et sans frais supplémentaires pour le créateur.

Concrètement, vous pouvez construire des micro-applications où l’IA fonctionne à l’intérieur de l’Artifact : un coach qui pose des questions personnalisées, un quiz adaptatif, un analyseur de texte en temps réel, un assistant de rédaction spécialisé. L’appel utilise le modèle Claude Sonnet via l’endpoint standard /v1/messages.

Le modèle économique est élégant : quand quelqu’un utilise votre Artifact publié, la consommation est comptabilisée sur le quota de cet utilisateur, pas sur le vôtre. Vous pouvez partager un Artifact avec 10 ou 10 000 personnes sans que cela vous coûte quoi que ce soit.

Intégration MCP

Les Artifacts supportent le Model Context Protocol, ce qui leur permet de se connecter directement à des services externes : Google Calendar, Gmail, Slack, et tout autre serveur MCP configuré. Cela ouvre la porte à des Artifacts qui interagissent avec vos outils de travail en temps réel.

L’intégration MCP dans les Artifacts est disponible sur les plans Pro, Max, Team et Enterprise, sur Claude web et desktop. Chaque utilisateur doit authentifier indépendamment ses serveurs MCP, même quand il utilise un Artifact partagé. Les administrateurs d’organisation peuvent activer ou désactiver l’accès MCP des Artifacts au niveau global.

Publication, partage et remixage

Le système de partage des Artifacts fonctionne sur trois niveaux.

Publication publique (Free, Pro, Max) : vous publiez votre Artifact et obtenez une URL accessible à tous. N’importe qui peut voir le rendu et interagir avec l’application, même sans compte Claude. Seule la version sélectionnée au moment de la publication est visible. Votre conversation reste privée.

Partage interne (Team et Enterprise) : les Artifacts créés sur un compte Team ou Enterprise ne peuvent être partagés qu’au sein de votre organisation. Ils ne peuvent pas être publiés publiquement. Les membres doivent s’authentifier avec leur compte pour y accéder.

Remixage : quand un utilisateur accède à un Artifact publié, il peut le « remixer », c’est-à-dire en créer une copie dans son propre compte Claude pour le modifier librement. C’est le mécanisme qui alimente le catalogue communautaire.

Catalogue communautaire

Anthropic a lancé un catalogue accessible sur claude.ai/catalog/artifacts où vous pouvez parcourir des milliers d’Artifacts publiés par d’autres utilisateurs. C’est une bibliothèque croissante d’outils prêts à l’emploi : calculateurs, jeux, outils de productivité, visualisations, templates.

Vous pouvez utiliser n’importe quel Artifact du catalogue tel quel, ou le remixer pour l’adapter à vos besoins. C’est un excellent point de départ quand vous manquez d’inspiration ou que vous voulez gagner du temps sur un prototype.

10 cas d’usage concrets

Voici dix exemples pratiques pour illustrer ce que les Artifacts permettent réellement de construire.

1. Calculateurs métier

Simulateur de prêt immobilier, calculateur de TVA, outil de pricing SaaS, estimateur de coûts cloud. Demandez à Claude de construire un calculateur interactif avec les formules de votre secteur. Le stockage persistant permet de sauvegarder les simulations précédentes.

2. Prototypes d’interface

Landing pages, formulaires d’inscription, dashboards, pages produit. Partez d’un wireframe ou d’une description textuelle, et Claude génère un prototype fonctionnel en quelques minutes. Partagez le lien avec votre équipe ou vos clients pour validation.

3. Outils de formation

Quiz adaptatifs, flashcards interactives, exercices de code avec correction automatique. L’intégration de l’API Claude permet de créer des outils qui s’adaptent au niveau de l’apprenant et fournissent des explications personnalisées.

4. Tableaux de bord de données

Uploadez un CSV de ventes, de métriques produit ou de données marketing. Claude génère un dashboard interactif avec graphiques, filtres et KPIs. Le résultat est exportable ou partageable via un lien.

5. Générateurs de documents

Templates de contrats, politiques internes, CGV, briefs créatifs. L’Artifact devient un template réutilisable que vous pouvez adapter pour chaque nouveau besoin sans repartir de zéro.

6. Mini-applications IA

Assistant de rédaction spécialisé, coach de négociation, analyseur de feedback client, correcteur de CV. Grâce aux appels API intégrés, l’Artifact embarque l’intelligence de Claude et peut traiter des requêtes contextuelles.

7. Visualisations techniques

Diagrammes d’architecture système, flux de données, schémas de base de données, topologies réseau. Les diagrammes Mermaid et SVG permettent de documenter visuellement des systèmes complexes.

8. Outils de suivi personnel

Journal quotidien, tracker d’habitudes, suivi de budget, log d’entraînement. Le stockage persistant permet de conserver les données entre les sessions pour un vrai suivi dans la durée.

9. Jeux et expériences interactives

Jeux de logique, simulations, expériences éducatives, escape games textuels. Claude peut générer des jeux fonctionnels avec gestion d’état, scores et niveaux de difficulté.

10. Outils d’équipe

Tableaux kanban partagés, registres de décisions, planificateurs de sprint, matrices de priorisation. Avec le stockage partagé, toute l’équipe interagit avec les mêmes données en temps réel.

Artifacts vs visualisations inline

Depuis mars 2026, Claude peut aussi générer des visualisations directement dans le fil de la conversation, sans créer d’Artifact. Il est important de comprendre la différence entre les deux.

Les visualisations inline sont contextuelles et éphémères. Elles apparaissent au milieu de la réponse de Claude pour illustrer un point précis : un graphique pour expliquer les intérêts composés, un diagramme pour montrer un flux de données. Elles évoluent avec la conversation et ne sont pas sauvegardées comme des objets autonomes.

Les Artifacts sont persistants et autonomes. Ils vivent dans un panneau séparé, peuvent être modifiés indépendamment, publiés, partagés, et embarquent du stockage et des appels API. Ce sont des livrables, pas des illustrations.

En pratique, Claude choisit automatiquement le bon format. Si vous demandez « explique-moi les intérêts composés », il utilisera probablement une visualisation inline. Si vous demandez « crée un calculateur d’intérêts composés », il créera un Artifact.

Limites à connaître

Les Artifacts sont puissants, mais il faut connaître leurs contraintes pour ne pas être déçu.

Pas de backend. Tout s’exécute dans un environnement sandboxé côté navigateur. Pas de Node.js, pas de connexion à des bases de données externes (sauf via MCP), pas de code serveur. Si votre application nécessite un vrai backend, l’Artifact sert de prototype que vous transférerez ensuite dans un environnement de développement complet.

Fichier unique. Un Artifact est un seul fichier. Pas de structure multi-fichiers, pas d’imports depuis d’autres fichiers du projet. Pour les composants React, tout (HTML, CSS, JS) doit tenir dans un seul fichier.

Pas de localStorage/sessionStorage. Les API de stockage navigateur classiques ne fonctionnent pas dans l’environnement sandbox de Claude. Utilisez le stockage persistant d’Anthropic (window.storage) à la place, ou l’état React (useState, useReducer) pour les données de session.

Pas d’hébergement natif. Un Artifact publié est visible via une URL Claude, mais ce n’est pas un hébergement web classique. Pour déployer en production, copiez le code et utilisez un service d’hébergement (Vercel, Netlify, etc.).

Limites du stockage. 20 Mo maximum par Artifact, données texte/JSON uniquement, pas d’upload de fichiers, opérations limitées en débit. Le stockage fonctionne en « last-write-wins » pour les écritures concurrentes.

Bonnes pratiques pour des Artifacts efficaces

Soyez descriptif dans votre premier prompt. Précisez la technologie (React, HTML, SVG), le style (Tailwind, couleurs spécifiques), les fonctionnalités et les données d’exemple. Un bon premier prompt évite 3-4 itérations de correction.

Utilisez Projects pour les Artifacts récurrents. Si vous créez régulièrement le même type d’Artifact (dashboards, templates, prototypes), placez vos instructions et exemples dans un Project. Claude produira des résultats cohérents dès la première tentative.

Itérez par petites étapes. Plutôt que de demander « change tout le design et ajoute 5 fonctionnalités », procédez par modifications ciblées. Chaque itération est une version distincte à laquelle vous pouvez revenir.

Explorez le catalogue avant de créer. Avant de construire un Artifact from scratch, parcourez le catalogue communautaire. Il y a probablement déjà un outil similaire que vous pouvez remixer et adapter en quelques minutes.

Publiez tôt pour tester le stockage. Si votre Artifact utilise du stockage persistant, publiez-le dès que la structure de base est en place. Les opérations de stockage ne fonctionnent pas en mode développement.

Combinez avec Cowork pour les fichiers lourds. Si vous avez besoin de traiter des fichiers volumineux ou d’interagir avec votre système de fichiers local, utilisez Cowork plutôt qu’un Artifact. Les deux outils sont complémentaires.