ChatGPTでAIが回答したHTML/CSS/JavaScriptのコードを直接チャット内にCodepenで動作確認できるようにするオープンソースのブラウザ拡張・「ChatGPT Web Preview」

Ads

ChatGPT Web Preview

ChatGPTでAIが回答したHTML/CSS/JavaScriptのコードを直接チャット内にCodepenで動作確認できるようにするオープンソースのブラウザ拡張・「ChatGPT Web Preview」
ChatGPT Web PreviewはChatGPTでAIが回答したHTML/CSS/JavaScriptのコードを直接チャット内にCodepenで動作確認できるようにするオープンソースのブラウザ拡張です。上SSのようにコードが返されると同時に結果がプレビューされています。

コードを返す旨のプロンプトを入力して回答されると、HTML、CSS、JavaScriptのコードブロックを自動的に検出し、リアルタイムでレンダリング、チャット内に直接Codepenによる結果が埋め込まれ、その場で動作確認出来る、というものになります。

わざわざCodepenにアクセスしてコピペして確認する、といった手間が不要となりますし、その場でCodepenに飛んで保存や編集も出来ますので、普段からChatGPTでJavaScript等の事で質問している方はかなり捗るかなと思います。OSSなのでGeminiやClaudeなど他のモデルにも対応できるよう自身でカスタマイズするのも良いかもしれないですね。ライセンスはMITとの事です。

ChatGPT Web PreviewGithub