Awesome

htmx-ai

HTMX-AI allows you to create AI generated webdesign by just providing a prompt via the hx-ai attribute.

You can learn more about how it works and how i made it here

<button hx-ai="Generate a website design for a coffee shop"></button>

You can use hx-target just like you would in any other HTMX application to specify where the response should be inserted.

<button hx-ai="Generate a website design for a coffee shop" hx-target="#design"></button>
<div id="design"></div>

HTMX-AI uses the OpenAI APi in the background. You need to provide an API key in the .env file.

OPENAI_API_KEY=your-api-key

To enable the htmx-ai extension on a page you need to initialize it on one parent element like this:

<body hx-ext="ai">

If you want to use anything other than the default api endpoint at htmx-ai.test, you can set a custom endpoint

<body hx-ext="ai" hx-ai-endpoint="https://super-secure-ai-api.com">

First you need to configure traefik as a reverse proxy. (like described here).

Afterwards you can start the service with the following command:

docker-compose up -d

To install dependencies:

bun install

To run:

bun run server.ts

DO NOT use untested and unreviewed AI generated content in production. This is a proof of concept and should not be used in production.