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>

Configuration

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.

Name		Name	Last commit message	Last commit date
Latest commit History 5 Commits
.gitignore		.gitignore
Dockerfile		Dockerfile
README.md		README.md
bun.lockb		bun.lockb
docker-compose.yml		docker-compose.yml
htmx-ai.js		htmx-ai.js
htmx.min.js		htmx.min.js
index.html		index.html
package.json		package.json
red-button.html		red-button.html
server.ts		server.ts
tsconfig.json		tsconfig.json