agentpng

agentpngとは？

agentpngは、AIエージェントのコーディングセッションを共有可能な画像に変換するツールです。セッションのトランスクリプト（例: Claude Code、Kiro、Cursor、Codexから）を貼り付けまたはエクスポートすると、サイトがスタイル付きのスクリーンショットを生成して共有できます。

主な目的は、エージェント実行中の出来事—プロンプト、応答、その他のトランスクリプト内容—を生テキストではなく視覚形式でキャプチャすることです。

主な機能

• トランスクリプトから画像エクスポート: セッションのトランスクリプトを共有可能なスタイル付きスクリーンショットとしてエクスポート。
• 複数フォーマットのトランスクリプト対応: Claude Code (.jsonl)、Kiro (.md)、Codex (.jsonl)、Cursor (.md)、および関連するKiro/terminal/汎用トランスクリプト形式をサポート。
• フォーマット検出と解析: 貼り付けられたトランスクリプト内容に対して自動検出ステップを含む。
• 直接トランスクリプト入力とファイル入力: 「Generic (User:/Assistant:)」形式を含むテキスト貼り付け、または**.jsonl**、.json、.md、.log、.txtなどのセッションファイルをドロップ。
• エージェントセッション指向の出力: ページの例は、汎用チャットスニペットではなく実際のコーディングエージェントセッション（例: エージェントが生成したソート/ページネーションコード）のエクスポートに焦点。

agentpngの使い方

1. エージェントワークフロー（例: Claude Code、Kiro、Cursor、Codex）でトランスクリプトを開始。セッションのトランスクリプトテキストをコピーするか、セッションファイルを準備。
2. agentpng.devを開く。入力エリアにトランスクリプトを貼り付け、またはセッションファイルをドロップ（.jsonl、.md、.log、.txtなどの一般的な拡張子をリスト）。
3. 提供内容に基づく自動検出でトランスクリプトフォーマットを選択または確認。
4. トランスクリプトから生成されたスタイル付きスクリーンショットをエクスポートしてセッション出力を視覚的に共有。

ユースケース

• チームメンバーにコーディングエージェントの実行を共有: プレーンテキストログよりドキュメントやチケットで明確なコミュニケーションのためのスクリーンショットとしてエクスポート。
• エンジニアリングコミュニティに例を投稿: ソーシャルプラットフォームやイシュートラッカーで読みやすい形式でプロンプトと生成されたコード変更をキャプチャ。
• ワークフローの軽量ドキュメント作成: 繰り返しのエージェントステップ（プロンプト → 推論/ツール/出力）を再利用可能な視覚リファレンスに変換。
• ツール間のエージェント動作比較: 複数エージェントプロバイダー（例: Claude Code vs. Cursor）のセッションをエクスポートしてフォーマットや出力の違いを表示。
• ターミナルベースのトランスクリプトを視覚化: ネイティブUIエクスポートがない場合にページで言及されるターミナル指向のトランスクリプトエントリを使用。

FAQ

agentpngが受け付ける入力フォーマットは？

Claude Code (.jsonl)、Kiro (.md)、Codex (.jsonl)、Cursor (.md)、その他のバリエーションとしてKiro Spec (.md)、Kiro CLI (terminal)、Generic (User:/Assistant:)をサポート。.jsonl、.json、.md、.log、.txtなどの拡張子のファイルドロップも対応。

トランスクリプトの正確なフォーマットを事前に知る必要は？

貼り付け内容に対して自動検出ステップを表示し、入力が認識可能なら手動選択が不要な場合がある。

出力として何が得られる？

ツールはエージェントセッションのトランスクリプトを共有を目的としたスタイル付きスクリーンショットとしてエクスポート。

エージェントUIからコピーしたトランスクリプトでもagentpngは使える？ ファイルのみ？

両方対応: トランスクリプトを貼り付け、または複数一般的な拡張子のセッションファイルをドロップ。

リストされたエージェント以外のツールもagentpngはサポート？

Claude Code, Kiro, Cursor, Codex & moreをサポートし、「formatsを確認」と記載。具体的なソース確認にはサイトの「formats」リストが確実。

代替手段

• チャット/ログを手動でスクリーンショット: たまに共有するだけならシンプルだが、異なるエージェントツール間で一貫したスタイリングが難しい。
• トランスクリプトをレンダリングするドキュメンテーションツール: 画像エクスポートの代わりにマークダウン/ドキュメントレンダラーに貼り付けてフォーマット付きテキストを共有。コンテンツを編集可能に保つ点がスクリーンショットベースと異なる。
• コード指向のデモ/ダイアグラムツール: UI状態キャプチャやステップバイステップ視覚を作成するツールは構造化出力を提供するが、トランスクリプトから画像エクスポートより手動セットアップが必要。
• ログのMarkdown/HTML変換: エージェントトランスクリプトをフォーマットテキストやHTMLに変換して可読性と検索性を向上させるが、agentpngの「共有可能スクリーンショット」ワークフローとは一致しない。