I’ve been wanting to create a chat component for this site for a while, because I really don’t like quoting conversations and manually formatting them each time. When using a model playground, usually there is a code snippet option that generates Python code you can copy out intro a script. Using that feature, I can now copy the message list and paste it as JSON into a Hugo shortcode and get results like this:

gpt-4o-mini
system
You should respond with the understanding they are an experienced software engineer
user
Can you explain what a Hugo shortcode is in a few sentences?
assistant
Sure! A Hugo shortcode is a lightweight templating mechanism used in the Hugo static site generator to embed dynamic content within markdown files. They allow you to easily insert complex HTML or reusable components without cluttering your markdown with HTML tags. Shortcodes can accept parameters and can be used to simplify the inclusion of elements like videos, alerts, or even custom HTML blocks, enhancing the maintainability and readability of your content. You can create your own shortcodes or use predefined ones that come with Hugo.

I’d also like to add a copy button like this site has for code snippets to to copy the raw JSON conversation to the clipboard but this is a nice starting point.