HTMX-AI allows you to create AI generated webdesign by just providing a prompt via the hx-ai attribute.
You can see a live demo here
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-keyTo 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 -dTo install dependencies:
bun installTo run:
bun run server.tsDO NOT use untested and unreviewed AI generated content in production. This is a proof of concept and should not be used in production.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent