This is an experimental fork of tldraw's draw a ui, which is an experimental fork of Sawyer Hood's draw a ui.

Uses Peter Salomonson's near-bos-webcomponent to embed a NEAR BOS widget into a tldraw shape. Made possible by Evgeny Kuzyakov's NEARSocial/VM.

Welcome to the Open Web!

Join us at near.social.

Next Steps

• Merge PR to near-bos-webcomponent and replace bundles from CDN
• Ability to publish JSX widget to the social-db
• Load in existing widgets and make modifications to them
• Option to provide your own API key
• Feature to provide custom prompts and option to swap chat gpt model

draw-a-ui

This is an app that uses tldraw and the gpt-4-vision api to generate JSX 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 jsx file with styled components.

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.

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.