Draw A UI
|Updated:
18 May 2024
|13495 Stars
Draw a mockup and generate html for it
Categories
Overview
draw-a-ui is an app that combines tldraw and the gpt-4-vision API to generate HTML based on a wireframe that users draw. The core of the app is open source, and a hosted version is currently in development. Please note that this app is a demo and not intended for production use due to the lack of authentication.
Features
- Uses tldraw and gpt-4-vision API: Combines the capabilities of these two tools to generate HTML based on user-drawn wireframes.
- Open Source Core: The core functionality of the app is open source and accessible to users.
- Demo Version: A demo of the app is available for users to test out the functionality.
- Next.js App: Built using Next.js technology for an efficient and dynamic user experience.
- Requires OpenAI API Key: Users will need an OpenAI API key with access to the GPT-4 Vision API to use the app.
Installation
To get started with draw-a-ui, follow these steps:
- Ensure you have Node.js version 18.17 or higher installed on your system.
- Clone the project repository to your local machine.
- Navigate to the root directory of the project.
- Run the following commands to set up the project:
- Open http://localhost:3000 in your web browser to access the app.
Summary
draw-a-ui is a tool that leverages tldraw and the gpt-4-vision API to generate HTML from user-drawn wireframes. While the app is currently in demo mode and not recommended for production use, it provides a glimpse into the potential of using these technologies together. Users interested in trying out the demo can do so by following the provided installation steps and accessing it locally.
