I Built a Chrome Extension to Preview HTML in ChatGPT

I've prototyped a Chrome extension for trial-and-error markup on chat.openai.com.

For example, if it finds an html+preview code block, it inserts it as HTML right next to it. As I'll mention later, it can also preview React Components.

By clicking 📎, you can copy the rendered HTML to your clipboard as an image.

I've put a collection of sample prompts that generate code nicely here:

https://github.com/mizchi/chatgpt-markup-preview/blob/main/Prompts.ja.md

Why I made it

GPT-4 can generate reasonably clever code, but to make fine adjustments, you really need to do it interactively while previewing.

Furthermore, using the generated HTML as image input for a follow-up prompt is more accurate than a human trying to verbalize the desired changes.

https://help.openai.com/en/articles/8400551-image-inputs-for-chatgpt-faq

(Note: This feature has not been released to all ChatGPT Plus users yet)

Generating React Components: tsx+preview

If it finds a React Component, it uses renderToStaticMarkup to SSR the component exported as default.

Here is a prompt that satisfies those conditions nicely:

フォームコンポーネントを生成してください。

## Props Type

type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {
  fields: Array<{label: string, value: string}>
}

## 条件

- react+tsx で記述してください。 jsx: "react-jsx" なので import は不要です。
- 装飾には tailwind を使ってください。css の import は不要です。
- コードブロックの属性は ```tsx+preview としてください
- コード以外は出力しないでください
- props の型を満たす previewProps を export してください

## 出力例

```tsx+preview
type FormProps = { name: string }
export default function Form(props: Props) {
  return <></>
}
export const previewProps = {}
```

Generated code:

type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {
  fields: Array<{ label: string, value: string }>
}

export default function Form({ fields, ...restProps }: FormProps) {
  return (
    <form {...restProps} className="p-4">
      {fields.map((field, index) => (
        <div key={index} className="mb-4">
          <label className="block mb-2 font-bold text-gray-600">{field.label}</label>
          <input 
            type="text"
            className="p-2 w-full border rounded"
            defaultValue={field.value}
          />
        </div>
      ))}
    </form>
  );
}

export const previewProps: FormProps = {
  fields: [
    { label: "First Name", value: "John" },
    { label: "Last Name", value: "Doe" }
  ]
}

Its preview:

You can generate component markups like this and refine them as needed if you're not satisfied.

Install

Since it's not uploaded to the Chrome Web Store, you'll need to install it in developer mode.

Download the latest version from https://github.com/mizchi/chatgpt-markup-preview/releases and load the unpacked extension via chrome://extensions.

Source code: https://github.com/mizchi/chatgpt-markup-preview

(TODO: The version distributed in the Release has issues with some resource resolution, so building it locally is more stable.)

Challenges faced

With Chrome Extension Manifest v3, arbitrary code execution is now mostly restricted. Therefore, to SSR React Components, I had to evaluate them through a WebAssembly JS implementation of QuickJS. Furthermore, since the CSP (Content Security Policy) settings on chat.openai.com are strict, running arbitrary code itself is difficult.

Initially, I considered implementing it as a ChatGPT Plugin, but that required an application process, so I put it off.

In the end, if you want more flexibility, building a custom dashboard that calls the API might be better.

Reflections

The initial prompt is long and complex. I think a separate editor for constructing initial prompts will likely be necessary, where domain knowledge for code generation will be centralized.