- Claude Artifacts ist eine Funktion, mit der sich interaktive Single-Page-Apps mit HTML, CSS und JavaScript erstellen lassen; das Ergebnis kann innerhalb der Claude-Oberfläche angesehen und weiter verbessert werden.
- Eine Analyse der jüngsten Claude-Aktivitäten nach Umwandlung in SQLite zeigte, dass Claude Artifacts in der vergangenen Woche deutlich häufiger als erwartet genutzt wurde.
- Die Funktion erweist sich als nützliches Werkzeug, um Probleme direkt zu lösen oder Prototypen zu bauen.
[Projekte, die mit Claude Artifacts erstellt wurden]
URL to Markdown mit Jina Reader
- Entwicklung einer Web-UI, die die Jina Reader API aufruft, um den vollständigen Text einer Webseite in Markdown umzuwandeln.
- URL eingeben → Markdown über die Jina Reader API erzeugen → Markdown ausgeben und einen „Copy“-Button bereitstellen.
- Löst das Problem, dass sich auf mobilem Safari der vollständige Seitentext nur schwer in ein LLM kopieren und einfügen ließ.
SQLite in WASM Demo
- Durch eine Hacker-News-Diskussion über den WASM-Build von SQLite wurde das NPM-Paket
@sqlite.org/sqlite-wasm entdeckt.
- Eine einfache interaktive Demo wurde entwickelt, um zu prüfen, ob es funktioniert.
URL-Extraktionstool
- Es bestand der Wunsch, verlinkte URLs aus dem Text einer Webseite zu extrahieren.
- Dafür wurde ein Artifact erstellt, das Rich-Text-HTML per Einfügen entgegennimmt und mithilfe eines HTML-Parsers Links extrahiert.
Clipboard-Viewer
- Entwicklung eines Debugging-Tools, das mit der Browser-Clipboard-API verschiedene Arten von Inhalten einfügt und deren Informationen anzeigt.
- Man kann Klartext, Rich Text, Dateien, Bilder usw. kopieren/einfügen und sehen, welche Informationen im Browser verfügbar sind.
Pyodide REPL
- Im CSP-Header wurde
https://cdn.jsdelivr.net/pyodide/ entdeckt.
- Das deutet darauf hin, dass das Anthropic-Entwicklungsteam absichtlich eingestellt hat, dass Pyodide (Python, kompiliert nach WebAssembly) in Artifacts geladen werden kann.
- Es wurde eine einfache Demo entwickelt, um die Funktionsfähigkeit zu belegen.
Simulator für Kameraeinstellungen bei Fotos
- Es bestand Neugier, ob sich Kameraeinstellungen in JavaScript simulieren lassen, doch es gab Bugs und die Ergebnisse waren nicht besonders beeindruckend.
- Dabei wurde die Bibliothek Fabric.js entdeckt.
LLM-Preiskalkulator
- Im Rahmen eines Video-Scraping-Experiments mit Google Gemini wurde ein Preisrechner entwickelt.
- Er entstand, weil den eigenen Berechnungen zu den günstigen Gemini-Preisen nicht ganz vertraut wurde.
YAML-zu-JSON-Konverter
- Entwicklung eines Tools, das beim Eingeben von YAML in Echtzeit in JSON umwandelt, um sich bestimmte Aspekte der YAML-Syntax wieder ins Gedächtnis zu rufen.
OpenAI Audio
- Erkundung der neuen Audio API von OpenAI.
- Entwicklung einer Webseite, die Mikrofonzugriff anfordert, Audio aufnimmt, in base64 kodiert und anschließend an die OpenAI API sendet.
- Claude Artifacts kann zwar keine direkten API-Anfragen an externe Hosts stellen, aber nach Entwicklung einer funktionierenden Version lässt sich diese auf anderes Hosting übertragen und dort fertigstellen.
QR-Code-Decoder
- In einem Meeting mit Folien, die QR-Codes enthielten, wurde eine Möglichkeit benötigt, QR-Codes in normale URLs umzuwandeln.
- Mit Claude Artifacts wurde schnell ein QR-Code-Decoder entwickelt.
Bildkonverter und Seitendownloader
- Auf Hacker News schlug jemand die Idee für ein Tool vor, bei dem Fotos auf eine Seite gezogen werden, als base64-URL eingebettet werden und man über „Als HTML speichern“ eine eigenständige Seite mit Galerie erhält.
- Es wurde außerdem eine nützliche Funktion für einen „Download-Link“ vorgeschlagen und prototypisch umgesetzt, falls auf Mobiltelefonen kein „Als HTML speichern“ möglich ist.
HTML-Entity-Escaper
- Da auf dem Smartphone HTML-Entities für einen Textabschnitt escaped werden mussten, wurde Claude gebeten, ein entsprechendes Tool zu bauen.
text-wrap-balance-nav
- Inspiriert von Terence Eden wurde mit der CSS-Eigenschaft
text-wrap: balance experimentiert.
- Claude wurde gebeten, ein Beispiel für eine Navigationsleiste mit Slider und Checkboxen zu erstellen.
ARES-Konverter für das phonetische Alphabet
- Bei ehrenamtlicher Unterstützung im HAM-Funkbetrieb bestand die Sorge, das phonetische Alphabet falsch zu verwenden, daher wurde Claude um ein entsprechendes Tool gebeten.
[Vorteile und Grenzen von Claude Artifacts]
- Der Autor nutzt Artifacts inzwischen in großem Umfang und hat in nur einer Woche 14 Projekte erstellt.
- Seit der Veröffentlichung am 20. Juni wird die Funktion fortlaufend verwendet; inzwischen entstehen mehrmals täglich neue interaktive Artifacts.
- Claude Artifacts ist nützlich, um Neugier zu stillen und als Werkzeug für schnelles Prototyping sowie Problemlösung zu dienen.
- Die meisten Tools lassen sich in weniger als 5 Minuten erstellen.
- Selbst das komplexere Tool OpenAI Audio brauchte für die erste Version nur 12 Minuten und für die zweite Iteration 9 Minuten, also insgesamt lediglich 21 Minuten.
- Enttäuschend sind jedoch die Grenzen bei Funktionen wie API-Aufrufen, Formularübermittlungen und Links auf externe Seiten.
- Auf Basis der gewonnenen Erkenntnisse ist geplant, eine eigene Alternative zu Artifacts zu bauen.
- Insgesamt wird die Nutzung von Artifacts empfohlen.
- Wer Artifacts noch nicht verwendet, soll durch diesen Beitrag vielleicht den Grund dafür erkennen.
- Für mich sind Artifacts aktuell eines meiner liebsten LLM-basierten Werkzeuge.
1 Kommentare
Hacker-News-Kommentare
Es gibt die Meinung, dass es schwierig ist, Tools in eine bestehende Codebasis zu integrieren. Man kann sie zwar als eigenständige Seite erstellen, aber es kostet viel Zeit, den Code zu prüfen und anzupassen, damit er mit der bestehenden Codebasis kompatibel ist. Den Code direkt selbst zu schreiben, ist die bessere Wahl.
Anfang der 2000er habe ich mit der Webentwicklung aufgehört und mich auf das Webgeschäft konzentriert, aber jetzt freue ich mich, mit LAMP wieder kreativ arbeiten zu können. Zum Beispiel kann ich eine gewünschte Marketing-Site in weniger als 20 Minuten deployen.
Ich suche nach Blogbeiträgen oder „Best Practices“ zur besten Nutzung von LLMs mit einer lokalen Codebasis. Ich hoffe, dass die Community dazu empfehlenswerte Materialien hat.
Es gibt die Meinung, dass die heutige Zeit erstaunlich ist. Ich habe am Wochenende angefangen, Rust zu lernen, und ChatGPT 4 dient dabei als großartiger Lehrer mit Unterstützung in Echtzeit.
Anthropic nähert sich dem Status einer Super-App wie WeChat. Es braucht eine Möglichkeit, veröffentlichte Artifacts einfach in der Seitenleiste anzuzeigen. Da Elon sehr an diesem Modell interessiert ist, würde xAI in diese Richtung gehen, wenn es über die Funktionen von Claude verfügte.
Das neue Paradigma, das Anthropic vorgestellt hat, besteht darin, dass Inhalte gehostet werden. Die Ausgabe des LLM wird zu einer selbst gehosteten App, die Verbraucher nutzen können. Das unterscheidet sich nicht wesentlich vom Aufbau einer persönlichen Website.