Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bufferhead-code/htmx-ai
Add AI support to HTMX
https://github.com/bufferhead-code/htmx-ai
Last synced: about 1 month ago
JSON representation
Add AI support to HTMX
- Host: GitHub
- URL: https://github.com/bufferhead-code/htmx-ai
- Owner: bufferhead-code
- Created: 2024-01-31T11:24:39.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-02-07T14:39:40.000Z (10 months ago)
- Last Synced: 2024-08-03T13:14:21.940Z (4 months ago)
- Language: HTML
- Size: 32.2 KB
- Stars: 67
- Watchers: 4
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-htmx - htmx-ai - Use ChatGPT Code Generation as a Backend for HTMX (Examples by Back-end / Other)
README
# htmx-ai
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](https://htmx-ai.bufferhead.com/)**
[](http://www.youtube.com/watch?v=NP6hpM5YLRo 'Build your Website with HTMX powered by AI')
**You can learn more about how it works and how i made it [here](http://www.youtube.com/watch?v=NP6hpM5YLRo)**
```html
```
You can use hx-target just like you would in any other HTMX application to specify where the response should be inserted.
```html
```
## Configuration
HTMX-AI uses the OpenAI APi in the background. You need to provide an API key in the `.env` file.
```env
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:
```html
```
If you want to use anything other than the default api endpoint at htmx-ai.test, you can set a custom endpoint
```html
```
## Run with reverse proxy
First you need to configure traefik as a reverse proxy. (like described [here](https://github.com/korridor/reverse-proxy-docker-traefik)).
Afterwards you can start the service with the following command:
```bash
docker-compose up -d
```
## Run with bun
To install dependencies:
```bash
bun install
```
To run:
```bash
bun run server.ts
```
## Disclaimer
DO NOT use untested and unreviewed AI generated content in production. This is a proof of concept and should not be used in production.