Draw A UI

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:

1. Ensure you have Node.js version 18.17 or higher installed on your system.
2. Clone the project repository to your local machine.
3. Navigate to the root directory of the project.
4. Run the following commands to set up the project:

   npm install
   npm run dev
   

5. 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.