- Claude Artifacts est une fonctionnalité qui permet de créer des applications monopage interactives en HTML, CSS et JavaScript, d’en voir le résultat dans l’interface de Claude, puis de les améliorer ensuite
- Après avoir récemment converti l’historique de mes activités Claude en SQLite pour l’analyser, j’ai découvert que j’avais utilisé Claude Artifacts bien plus que prévu la semaine dernière.
- J’utilise cette fonctionnalité comme un outil pratique pour résoudre directement des problèmes ou créer des prototypes.
[Projets réalisés avec Claude Artifacts]
Utilisation de URL to Markdown avec Jina Reader
- Développement d’une interface web qui appelle l’API Jina Reader pour convertir le texte complet d’une page web en Markdown
- Saisie d’une URL → génération du Markdown via l’API Jina Reader → affichage du Markdown et ajout d’un bouton "Copy"
- Résolution d’un problème sur Safari mobile, où il était difficile de copier-coller le texte complet d’une page dans un LLM
Démo SQLite in WASM
- Une discussion sur Hacker News à propos du build WASM de SQLite a conduit à la découverte du package NPM
@sqlite.org/sqlite-wasm
- Développement d’une démo interactive simple pour vérifier que cela fonctionnait
Outil d’extraction d’URL
- Besoin d’extraire les URL liées depuis le texte d’une page web
- Création d’un artifact acceptant le collage de HTML rich text et utilisant un parseur HTML pour extraire les liens
Visualiseur de presse-papiers
- Développement d’un outil de débogage utilisant l’API Clipboard du navigateur pour coller différents types de contenus et inspecter les informations associées
- Possibilité de copier-coller du texte brut, du rich text, des fichiers, des images, etc., et de voir les informations disponibles dans le navigateur
REPL Pyodide
- Découverte de
https://cdn.jsdelivr.net/pyodide/ dans l’en-tête CSP
- Cela laisse entendre que l’équipe de développement d’Anthropic l’a volontairement configuré pour permettre le chargement de Pyodide (Python compilé en WebAssembly) dans les artifacts
- Développement d’une démo simple pour prouver que cela fonctionne
Simulateur de réglages photo pour appareil photo
- Je me demandais s’il était possible de simuler des réglages d’appareil photo en JavaScript, mais il y avait des bugs et le résultat n’était pas très convaincant
- Découverte de la bibliothèque Fabric.js
Calculateur de tarification LLM
- Développement d’un calculateur de prix dans le cadre d’expérimentations de scraping vidéo avec Google Gemini
- Créé parce que je ne faisais pas confiance à mes propres calculs sur le faible coût de Gemini
Convertisseur YAML vers JSON
- Développement d’un outil qui convertit du YAML en JSON en temps réel lorsqu’on en saisit, afin de se remémorer certains aspects de la syntaxe YAML
OpenAI Audio
- Exploration de la nouvelle API Audio d’OpenAI
- Développement d’une page web qui demande l’autorisation d’accéder au micro, enregistre l’audio, l’encode en base64 puis l’envoie à l’API OpenAI
- Claude Artifacts ne peut pas faire directement des requêtes API vers des hôtes externes, mais il est possible de développer une version fonctionnelle puis de la migrer vers un autre hébergement pour la finaliser
Décodeur de QR code
- Lors d’une réunion où j’ai vu des diapositives contenant des QR codes, j’avais besoin d’un moyen de les convertir en URL ordinaires
- Développement rapide d’un décodeur de QR code avec Claude Artifacts
Convertisseur d’images et téléchargeur de pages
- Sur Hacker News, quelqu’un a proposé l’idée d’un outil permettant de déposer des photos sur une page, de les intégrer sous forme d’URL base64, puis d’obtenir une page autonome contenant une galerie via "Save as HTML"
- Proposition d’ajouter une fonctionnalité utile de "download link" pour les cas où l’on ne peut pas utiliser "Save as HTML" sur un téléphone mobile, puis développement d’un prototype
Échappement d’entités HTML
- J’avais besoin d’échapper les entités HTML d’un bloc de texte sur mon téléphone, j’ai donc demandé à Claude de créer l’outil
text-wrap-balance-nav
- Expérimentation de la propriété CSS
text-wrap: balance, inspirée par Terence Eden
- Demande à Claude de créer un exemple de barre de navigation avec curseur et cases à cocher
Convertisseur en alphabet phonétique ARES
- En faisant du bénévolat pour l’exploitation de communications radio HAM, je craignais de me tromper dans l’utilisation de l’alphabet phonétique, j’ai donc demandé à Claude de créer un outil
[Avantages et limites de Claude Artifacts]
- L’auteur utilise les artifacts de façon intensive, au point d’avoir créé 14 projets en une semaine
- Il les utilise en continu depuis leur lancement le 20 juin, et crée désormais plusieurs nouveaux artifacts interactifs par jour
- Claude Artifacts est utile pour satisfaire sa curiosité, faire du prototypage rapide et résoudre des problèmes
- La plupart des outils peuvent être créés en moins de 5 minutes
- Même l’outil OpenAI Audio, plus complexe, n’a pris que 12 minutes pour la première version et 9 minutes pour la seconde itération, soit 21 minutes au total
- Mais l’auteur est déçu par les limites liées aux appels d’API, à la soumission de formulaires et aux liens vers des pages externes
- Sur la base de ce qu’il a appris, il prévoit de créer sa propre alternative aux artifacts
- En conclusion, il recommande d’utiliser les artifacts
- Si vous ne les utilisez pas, il espère que cet article vous aidera à comprendre pourquoi
- Pour lui, les artifacts sont aujourd’hui l’un de ses outils préférés basés sur les LLM
1 commentaires
Commentaires sur Hacker News
Certains estiment qu’il est difficile d’intégrer ces outils dans une base de code existante. Il est possible d’en faire une page autonome, mais revoir et modifier le code pour le rendre compatible avec l’existant demande beaucoup de temps. Mieux vaut écrire le code soi-même.
Après avoir arrêté le développement web au début des années 2000 pour se concentrer sur le business web, certains sont heureux de pouvoir à nouveau faire des choses créatives avec LAMP. Par exemple, ils peuvent déployer en moins de 20 minutes le site marketing qu’ils veulent.
Certains cherchent des billets de blog ou des « bonnes pratiques » sur la meilleure façon d’utiliser les LLM avec une base de code locale. Ils espèrent que la communauté pourra recommander des ressources utiles.
Certains trouvent l’époque actuelle incroyable. Ils ont commencé à apprendre Rust ce week-end, et ChatGPT 4 joue le rôle d’un excellent professeur en les aidant en temps réel.
Anthropic se rapproche d’un statut de super app à la WeChat. Il faudrait un moyen d’afficher facilement les artifacts publiés dans une barre latérale. Comme Elon s’intéresse beaucoup à ce modèle, si xAI obtenait les capacités de Claude, ils iraient probablement dans cette direction.
Le nouveau paradigme présenté par Anthropic, c’est que le contenu est hébergé. La sortie du LLM devient une application auto-hébergée que les utilisateurs peuvent utiliser. Ce n’est pas si différent de la création d’un site personnel.