PromptDOM

React components that turn natural-language prompts into DOM elements. Describe what you want and PromptDOM generates it at runtime via AI providers.

Install

pnpm add promptdom

Quick start

import { Image } from "promptdom";

export default function App() {
  return (
    <Image
      prompt="a red panda sitting in a bamboo forest"
      options={{
        provider: {
          id: "openai",
          model: "gpt-image-1.5",
          apiKey: import.meta.env.VITE_OPENAI_API_KEY,
        },
        generation: {
          quality: "high",
          size: "1024x1024",
        },
      }}
      width={512}
      height={512}
    />
  );
}

Components

<Image>

Generates an image from a text prompt and renders an <img> element.

| Prop | Type | Required | Description | |------|------|----------|-------------| | prompt | string | Yes | Text description of the image to generate | | options | ImageOptions | Yes | Provider and generation configuration | | className | string | No | CSS class applied to the wrapper/img element | | width | number \| string | No | Width of the rendered image | | height | number \| string | No | Height of the rendered image |

ImageOptions

type ImageOptions = {
  provider: {
    id: "openai";
    model: "gpt-image-1.5";
    apiKey: string;
    baseUrl?: string; // defaults to https://api.openai.com/v1
  };
  generation?: {
    size?: "1024x1024" | "1024x1536" | "1536x1024" | "auto";
    quality?: "low" | "medium" | "high";
  };
};

Development

pnpm install
pnpm test        # run tests
pnpm storybook   # launch Storybook
pnpm check       # lint + format

Examples

See examples/hello-world for a minimal Vite + React demo.

License

ISC