概要
ClaudeにはClaude Artifactsという、生成物を可視化して、編集できる機能があります。
ClaudeのLLMのレベルが向上していることもあり、トークン数を多めに消費してしまうHTMLであっても、精度高く生成することができます。
また、これまでLLMでツールを作ろうとすると、pythonやJavaScriptなど、コマンドから実行するツールが多く、引数やインプットの形式を記憶しておく必要がありました。これが非常にめんどくさい。
そこで、ツール自体をHTMLにしてしまい、そのめんどくささを緩和しようという目論見です。
サンプル
今回は以下のようなプロンプトで、マーメイド記法の図を可視化するようなツールを作成しようと思います。
マーメイド記法が記載されたマークダウンをドラッグアンドドロップしたら、マーメイドが可視化された状態で表示されるHTMLを作成して。
サンプルのマーメイド記法の図は、別のスレッドで作成してもらいます。
ドラッグアンドドロップしてみるとこんな感じ。
エラーは出てますが、マーメイドが可視化されてますね。
ツールとして使えそうであればHTMLとしてダウンロードしましょう。
今回の場合、そのままローカルにダウンロードして、Chromeで表示しても使えました。
ツール自体も、このHTMLファイルで完結しているので、管理が楽ですね。
たぶん、マーメイド記法をpngとして出力するツールとかも作れると思うので、お試しください。
注意点
あまり複雑なツールだと、不具合だらけになります。単純な機能にしましょう。
沢山のHTMLを作成すると、それはそれで探すのが大変なので、整理しましょう。
AI agent時代には逆行した考え方なので、用途は選びましょう。