The single file is interesting, we’ve been observing something similar too. Do you have a specific prompt that you load in by default to make this work? Are these react files, or just pure HTML/JS/CSS? Aka do you compile it via Esbuild or webpack or something, or are you asking the model to generate something that works out of the box?

We’ve been seeing Claude artifacts sometimes come out as JSX or TSX

I have been doing the same thing, creating small one file "apps". The problem that I have currently is that I often want my Agent to be able to present me with something like a report on a code change, have me mark it up (comments, choices), and then present those interactions back to the model.

I'm experimenting with different ways to standardize some aspect of this process in a lightweight way so an Agent and I can "communicate with each other over rendered html".

A simple script or cli the agent can run to to serve an html app, act as a sink for interactions (can just submit a button+form to the runner port), and then close the page when done can work.

A little farther out in this direction would be something like a persistent client+server via web or electron. It's always on and you iterate in a loop, streaming diffs/file edits back and forth to each other.

A little farther out and you can load extensions that contain templates to generate the html, custom server code to serve htmx interactivity, and agent functionality.

Just two days ago I started on this idea https://github.com/hank-bond/uix

I was working on two ideas

1. "highlight a web page a-la obsidian web clipper and then intake that information into a personal wiki of concepts" (my third prototype in a row of this concept)

2. "visualize the code review process and organize discussion in a non-linear branching conversation"

And I realized both of them are basically chat pane on the left, agent with custom tools, and html "app" pane on the right to support interactivity.

The project as of this comment doesn't have any functionality yet its basically just the panes and a simple agent messaging channel, but if you (or anyone) are interested in the idea comment here and I will reach out when its a bit farther along and actually useful for building things.

Likewise please share your experiences with this concept, I would love to learn what others are doing with this type of workflow!

Personally I just ask the AI to put everything into index.html.

Here are the custom instructions I mostly use:

  Never use React in artifacts - always
  plain HTML and vanilla JavaScript and CSS
  with minimal dependencies.

  CSS should be indented with two spaces
  and should start like this:

  ```
  <style>
  * {
    box-sizing: border-box;
  }
  ```
  Inputs and textareas should be font size
  16px. Font should always prefer
  Helvetica.

  JavaScript should be two space indents
  and start like this:
  ```
  <script type="module">
  // code in here should not be indented at
  the first level
  ```
  Prefer Sentence case for headings.

I've been using those for a couple of years, there's a good chance they're not necessary against more recent models. I've found that just saying "use Vanilla JavaScript" is enough to skip React / other build steps.

I avoid any build steps because those make it harder to copy and paste code in and out of LLMs.