What is this?
An app that lets you draw a UI wireframe on a canvas and uses GPT-4 Vision to generate a working HTML page (with Tailwind) based on the sketch.
An app that lets you draw a UI wireframe on a canvas and uses GPT-4 Vision to generate a working HTML page (with Tailwind) based on the sketch.How does it actually turn my drawing into HTML?It takes the current canvas as an SVG, converts it to a PNG, and sends that image to GPT-4 Vision with instructions to return a single HTML file styled with Tailwind.
It takes the current canvas as an SVG, converts it to a PNG, and sends that image to GPT-4 Vision with instructions to return a single HTML file styled with Tailwind.How do I run it?It's a Next.js app: install dependencies and run the dev commands from the project root, then open it in your browser.
It's a Next.js app: install dependencies and run the dev commands from the project root, then open it in your browser.What do I need before running this?You need an OpenAI API key with access to the GPT-4 Vision API, and Node.js greater than version 18.17 since it uses Next.js 14.
You need an OpenAI API key with access to the GPT-4 Vision API, and Node.js greater than version 18.17 since it uses Next.js 14.Is this safe to deploy for other people to use?No — it's explicitly a demo with no authentication, so deploying it publicly means anyone can rack up OpenAI API charges on your key.
No — it's explicitly a demo with no authentication, so deploying it publicly means anyone can rack up OpenAI API charges on your key.Where does this run?It runs as a local web app in your browser, built on Next.js.
It runs as a local web app in your browser, built on Next.js.What drawing tool does it use for the canvas?It uses tldraw, an open-source infinite canvas library, as the drawing surface for sketching the wireframe.
It uses tldraw, an open-source infinite canvas library, as the drawing surface for sketching the wireframe.Is there a successor project worth checking out?The README notes that the spiritual successor to this project is Terragon Labs.
The README notes that the spiritual successor to this project is Terragon Labs.What output do I get from a sketch?A single generated HTML file styled with Tailwind CSS that approximates the wireframe you drew.
A single generated HTML file styled with Tailwind CSS that approximates the wireframe you drew.What are similar projects?screenshot-to-code, openui, onlook, open-lovable, boardui, ui, awesome-cursorrules, mitosis
screenshot-to-code, openui, onlook, open-lovable, boardui, ui, awesome-cursorrules, mitosisWhich topics is it in?prototype, sketch, design-to-code, gpt-4, vision-language-model, code-generation, gpt, tailwindcss, nextjs, generative-ai, ui, openai
prototype, sketch, design-to-code, gpt-4, vision-language-model, code-generation, gpt, tailwindcss, nextjs, generative-ai, ui, openai