nexu-io/html-anything — 優良食堂詳しい解説

01 / 概要

何をするものか一文で言うと

ひとことでローカルAIエージェントがマークダウンをプロダクション対応のHTMLに変換するエディタです。

html-anything は、ローカルで動くAIコーディングエージェントにHTMLを書かせ、そのまま配信できる形に仕上げるエディタです。Next.js製のフロントエンドとCLIの2つで構成され、Claude CodeやCursor Agentなど9種類のエージェントCLIをPATH上から検出して呼び出します。75種類のスキルテンプレートを使い、雑誌記事・スライド・データレポートなど9つの出力形式を生成し、WeChat・X・Zhihuなどへ書き出せます。

02 / 構造

どう動くのか中核のしくみ

読み方動きの流れを図と一緒にほどきました。

CLIの agents-detect.ts に9エージェント分の定義があり、bin名・環境変数オーバーライド・プロトコルを保持します。agents-invoke.ts は環境変数やPATHから実行ファイルを解決し、buildArgv でエージェントごとに異なるCLIフラグ(claudeなら -p --output-format stream-json --permission-mode bypassPermissions など)を組み立てて spawn します。選んだスキルの SKILL.md や example.html からプロンプトを組み立て(prompt-assemble.ts)、実行結果はstart・delta・html・doneといったイベントとしてストリーミングされ、extract-html.ts がHTML本体だけを取り出します。next側では取り出したHTMLをサンドボックス化したiframeでプレビューし、履歴はIndexedDB(history/db.ts)に保存されます。エクスポートは wechat.ts・zhihu.ts・bluesky.ts・image.ts(modern-screenshot)・deck.ts(pptxgenjs)・remotion.ts(Hyperframes)など出力先ごとに個別実装されています。

03 / 体験

入れるとこんな体験になりますギット飯が実際にたどった順序

所要ギット飯が実際に導入・実行しながらたどった順序です。

STEP 01
git clone後にpnpmでworkspaceをインストールし next dev を起動すると、ブラウザでテンプレートピッカー画面が開きます(スキル一覧のサムネイルが並ぶ画面です)。
STEP 02
雑誌記事やデックなどスキルを1つ選んでプロンプトを送ると、ローカルにインストール済みのClaude CodeなどのエージェントCLIが自動検出され、見つからない場合はエージェント未検出のエラーが表示されます。
STEP 03
エージェントが動き出すと stream-json形式の出力がリアルタイムでストリーミングされ、テキストが流れながらHTMLが組み立てられていく様子が画面に表示されます。
STEP 04
生成が終わるとサンドボックス化されたiframeにHTMLプレビューが表示され、編集履歴がIndexedDBに自動保存されます。
STEP 05
エクスポートメニューからWeChat・X・Zhihu・HTML・PNGなど出力先を選ぶと、それぞれの形式に合わせて変換されたファイルやクリップボード用テキストが得られます。
STEP 06
deckモードやHyperframesモードに切り替えると、単一ページではなく複数ページのスライドや動画フレーム用の出力に切り替わります。

04 / 成果物

何が手に入るのか導入後に手元に残るもの

1枚のHTMLファイル、またはデック用のPPTX・PNG・WeChat/Zhihu向けテキストなど、選んだ出力先に応じた配布可能な成果物が手元に残ります。加えて編集の履歴がIndexedDBに蓄積され、あとから過去バージョンに戻せます。

05 / 注意

ここは先に知っておいてください先に知っておくとよいこと

正直なところ誰にでも合うとは言いにくいところです。

実行には別途Claude CodeなどのエージェントCLIを少なくとも1つインストールし、ログイン済みである必要があります。APIキー不要という表現は、このツール自体が鍵を要求しないという意味で、エージェントCLI側の認証・利用料は別途発生します。

サンドボックスプレビューやマーケットプレイスのhost-guardなどセキュリティ機構は用意されていますが、実運用でのXSS対策の網羅性まではソースだけでは確認できません。

e2eテストはPlaywrightで用意されているものの、確認できたのはdeploy-control・export-menu・host-validationの3本のみで、広範な画面カバレッジがあるとは言い切れません。

pptxgenjs・unpdf・xlsxなど依存が多く、Node 24とpnpm前提のセットアップになるため、初回導入の手間は軽くありません。

06 / 結論

ギット飯の結論食べてみる価値のある一膳か

ギット飯の最終判断優良食堂

Claude CodeやCursor Agentなどのローカルエージェントを既に使っていて、Markdown原稿から雑誌記事・デック・SNSカードなど配布可能なHTMLをすぐ作りたい人に向いています。CIでtypecheck・ビルド・e2eまで通っており、エージェント検出からHTML抽出、プレビュー、エクスポートまでの一連の流れはソースコードの構造から一貫していると判断できます。ただし「APIキー不要」は既にエージェントCLIを導入済みであることが前提なので、ゼロから試す場合はまずエージェント側の準備が必要です。