Make-Real

 

This is a fork of TLDraw|Make-Real.

Added Features

• 🔑 Config default API key and API base
• 📡 Request on the backend
• 🔒 Authentication before using
• 🐳 Deployment by Docker

Try it out at makereal.tldraw.com

timer.mp4

• To learn more about this project read our blog post
• To read our guide to using the app visit our discord

Deployment

Recommend to deploy by Docker:

docker run -p 3000:3000 \
  -e OPENAI_API_KEY=your-api-key \
  -e OPENAI_BASE_URL=https://api.openai.com/v1 \
  -e AUTH_SECRET=your_auth_secret \
  -e USERNAME=username \
  -e PASSWORD=password \
  -d wtzeng/make-real

then visit https://localhost:3000 and input your username and password.

from  https://github.com/jtsang4/make-real

------

Draw a mockup and generate html for it

draw-a-ui.com

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.

The spiritual successor to this project is Terragon Labs.

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.

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.

from  https://github.com/SawyerHood/draw-a-ui