Type something to search...
Draw a UI

Draw a UI

Draw a UI

12.8k 1.5k
04 May, 2024
  TypeScript

What is 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.

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.

A demo of the app


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.

Terminal window
echo "OPENAI_API_KEY=sk-your-key" > .env.local
npm install
npm run dev

Open http://localhost:3000 with your browser to see the result.