Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SawyerHood/draw-a-ui
Draw a mockup and generate html for it
https://github.com/SawyerHood/draw-a-ui
ai gpt openai react typescript
Last synced: about 1 month ago
JSON representation
Draw a mockup and generate html for it
- Host: GitHub
- URL: https://github.com/SawyerHood/draw-a-ui
- Owner: SawyerHood
- License: mit
- Created: 2023-11-07T05:47:49.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-01-20T09:12:11.000Z (8 months ago)
- Last Synced: 2024-02-09T03:04:03.716Z (7 months ago)
- Topics: ai, gpt, openai, react, typescript
- Language: TypeScript
- Homepage: https://draw-a-ui.com
- Size: 996 KB
- Stars: 12,514
- Watchers: 96
- Forks: 1,445
- Open Issues: 46
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - SawyerHood/draw-a-ui - Draw a mockup and generate html for it (TypeScript)
- awesome-projects - draw a ui
- awesome-ccamel - SawyerHood/draw-a-ui - Draw a mockup and generate html for it (TypeScript)
- awesome - draw-a-ui - Draw a mockup and generate html for it (AI / React Components)
- StarryDivineSky - SawyerHood/draw-a-ui - 4-vision api 根据您绘制的线框生成 html 的应用程序。 (其他_机器视觉 / 网络服务_其他)
README
# draw-a-ui
This is an app that uses tldraw and the gpt-4-vision api to generate html based on a wireframe you draw.
> I'm currently working on a hosted version of draw-a-ui. You can join the waitlist at [draw-a-ui.com](https://draw-a-ui.com). The core of it will always be open source and available here.
![A demo of the app](./demo.gif)
This works by just taking the current canvas SVG, converting it to a PNG, and sending that png to gpt-4-vision with instructions to return a single html file with tailwind.
> Disclaimer: This is a demo and is not intended for production use. It doesn't have any auth so you will go broke if you deploy it.
## Getting Started
This is a Next.js app. To get started run the following commands in the root directory of the project. You will need an OpenAI API key with access to the GPT-4 Vision API.
> Note this uses Next.js 14 and requires a version of `node` greater than 18.17. [Read more here](https://nextjs.org/docs/pages/building-your-application/upgrading/version-14).
```bash
echo "OPENAI_API_KEY=sk-your-key" > .env.local
npm install
npm run dev
```Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.