https://github.com/joshbrew/webdev-autogpt-template-tinybuild
Watch your web app code itself! Hot reloading web server with a drop in GPT server on a local subdomain of your test server. Just provide an API key!
https://github.com/joshbrew/webdev-autogpt-template-tinybuild
automation chatgpt esbuild nodejs openai tinybuild webdev website-template
Last synced: 3 months ago
JSON representation
Watch your web app code itself! Hot reloading web server with a drop in GPT server on a local subdomain of your test server. Just provide an API key!
- Host: GitHub
- URL: https://github.com/joshbrew/webdev-autogpt-template-tinybuild
- Owner: joshbrew
- License: mit
- Created: 2025-04-23T08:24:38.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-18T07:36:39.000Z (about 1 year ago)
- Last Synced: 2025-07-31T04:46:43.000Z (10 months ago)
- Topics: automation, chatgpt, esbuild, nodejs, openai, tinybuild, webdev, website-template
- Language: JavaScript
- Homepage:
- Size: 706 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Automated web dev server with chat prompt and tool calls.
Currently uses 4.1-mini at the base (200K tokens for threads/assistants) and can prompt summary models or smarter models for help with prompts and context sizes. We tried to throttle it as best as possible so the context sizes are respected.
WIP (limit your api budget to <$10 !!!!)
Paraphrasing: “Make a crazy wave pattern with pastel colors, put it in a triangle with a gradient background.”
“Make something with Howler and React… also make snake with growing/shrinking bubbles.”
It installed its own dependencies and fetched sound files off the internet
“Make it funky... Make it funkier... etc etc.”
It installed its own dependencies and arranged a src folder with components, renamed the js to jsx including updating the bundler entryPoint to match.
Some inspiration.
### [Example Video](https://youtu.be/84Pggzt8A0c)
It's rudimentary but it's quite usable. Minimal dependencies (openai, dotenv, concurrently, tinybuild, ws, better-sse, git).
## Build and run
You need [git cli](https://git-scm.com/downloads) for version control to work.
First, in this directory, run:
`npm install`
Also: `npm i -g concurrently` for useful multi-process cli tool we use.
Then with [`tinybuild`](https://github.com/joshbrew/tinybuild) installed globally (`npm i -g tinybuild`) run:
`npm start`
You also need to create a `.env` file and specify your OpenAI secret:
```
OPENAI_API_KEY=sk-...
```
Additionally supported env vars (optional, defaults shown are hard coded if undefined):
```
HOST=localhost #default e.g...
PORT=3000 #default gpt port
SAVED_DIR=gpt_dev/saved #default
GPT_MODEL=gpt-4.1 #default
```
When running, navigate to:
`http://localhost:8080/gptdev` for the prompt window
The main page is found at:
`http://localhost:8080`
This will hot reload the page when scripts are updated, and css specifically is hot swapped without page reloads. This combines with esbuild's instant feedback for rapid development. GPT can use this to debug or install packages on the fly and introduce things like plotting or 3D libraries and bundle them.
And much more can be configured with the `tinybuild.config.js`
Have fun watching your website or webapp code itself! Assistant runs tend to be a bit slow depending on the model, and not all models can use assistants yet. Currently it is set to GPT-4.1 but you can just set the model from this list: https://platform.openai.com/docs/pricing
Note, the servers are pretty slow with the current demand.
## Prompting Tips
Tell it to read and add features to e.g. index.css or index.js and to use script-based web components or a react root rather than editing index.html. This will stop it from screwing up the imports too much since our build environment has preset targets for bundling.
Remind it to check itself when it makes errors, it can often correct the code back.
It can also npm install for you or re-prompt itself if explicitly instructed to just run free on the tasks you give it.
### Contribute!
Please submit your own samples or vibe code some self-improvements to this overall interface yourself.
I keep coming up with more ideas as I run into missing functionality e.g. screencapping or getting the live built code for self-debugging against a lack of visual feedback. Sometimes this requires a fresh pass to reorganize the backend code so the app can upgrade itself. Lots of possibilities, hmm..
Make a pull request, github issue, or email me :-)
### Some joke code written entirely by GPT with CSS, Canvas, and ThreeJS animations (including installing its own dependencies):
## Configuration
See [`./tinybuild.config.js`](./tinybuild.config.js) for settings.
Add build:true for build-only, add serve:true for serve-only, or set bundle or server to false alternatively.
## TODO:
WIP git management:
- Improve chat frontend further. More options and guides etc.
- Test tool calls further. Test limits.
- Keep testing runs and token throttling, other models allow more tokens per minute unless you are a higher paying account.
- Add ability for gpt to restart the concurrent environment if the gpt dev needs modifying? >_> <_< maybe a bad idea idk
- Add screencapping ability (expensive!!) for more automation,
- Help GPT systematize its approach to editing and debugging better to take your hands off the wheel even more.