I Want to Use Artifacts in ChatGPT Too!

Claude Artifacts is so amazing, I want to achieve it with ChatGPT too

Claude Artifacts apparently makes it easy to create mocks like this.

However, I'm a bit hesitant about the subscription, and I have a desire to manage somehow with ChatGPT, which I'm familiar with.

In the midst of that, I found the following unofficial library.
Strictly speaking, it doesn't use ChatGPT itself but the OpenAI API.
(It's the same company, so it counts.)

If it's just for experimentation, it seems like it could be cheaper than a Claude subscription.

Installation Method

As described in Readme.md, you just need to clone it, run npm install, add your OpenAI API key to the .env file, build, and run.

Recommended Customizations

Keeping it cheap

If you just clone it, the model being used is hardcoded to gpt-4o, so by using gpt-4o-mini, you can keep costs quite low, although the accuracy will drop slightly.

pages/api/chat.js

    const stream = await openai.chat.completions.create({
      stream: true,
-      model: 'gpt-4o'
+      model: 'gpt-4o-mini',
      messages: conversations[conversationId]
    })

If you want to make it even cheaper, you can apparently use local LLMs as well. This is also mentioned in Readme.md#ollama-support.

Using Japanese for instructions

Since pressing Enter to confirm Japanese conversion sends the message immediately, which can be stressful, it's convenient to modify it to send with Shift+Enter or Command+Enter.

components/AutoGrowingInput.jsx

  const handleKeyDown = (e) => {
-   if (e.key === 'Enter' && !e.shiftKey) {
+   if (e.key === 'Enter' && (e.shiftKey || e.metaKey)) {
      onSubmit(e)
    }
  }

Trying it out

I'll try to recreate the weather forecast app mentioned at the beginning.
I'll use the following prompt.
(For some reason, the PREVIEW didn't work with React on the first try, so I specified HTML/CSS.)

prompt_1

I want to make a weather forecast app. Use HTML/CSS only, no React.
- Select box to choose prefectures
- 5-day weather for Tokyo
  - Display date and weather icon horizontally for each date
  - Display high and low temperatures for each
- 2-week weather for Tokyo
  - Same information as the 1-week weather, but listed vertically by date

It generates the HTML/CSS as follows:

The preview also looks quite good.

After refining it through a few more interactions, it looks like this.
Quite nice.

Cons

Here are some points that aren't so great:

• It rewrites all files every single time, so there's unnecessary waiting time, which is a bit tedious.
• Sometimes the preview doesn't display due to an error.
• Apparently, Tailwind is available by default in Claude, but to use it with this library, additional customization seems necessary.

Conclusion

I think it's definitely convenient to be able to create a prototype like this in just a few minutes.
I'd also like to try Claude Artifacts. Also, I'm looking forward to the official ChatGPT supporting this feature as well.