This repository provides a starter template for building "Make Real" style applications, enabling users to transform UI mockups into interactive HTML experiences using AI. It's designed for developers looking to leverage AI for rapid UI prototyping and integration with the tldraw SDK.

How It Works

The application utilizes the tldraw SDK to create an interactive canvas. Users draw a UI mockup, select it, and trigger the "Make Real" button. This action captures the drawing, sends it to GPT-4 with instructions to generate HTML, and embeds the resulting HTML within a custom tldraw shape displayed in an iframe on the canvas. This allows for interactive iteration on AI-generated code.

Quick Start & Requirements

• Install dependencies: npm install
• Run development server: npm run dev
• Requires an OpenAI API key, configured via NEXT_PUBLIC_OPENAI_API_KEY in a .env.local file.
• Official documentation: makereal.tldraw.com

Highlighted Details

• Leverages tldraw SDK for infinite canvas and custom shape capabilities.
• Integrates with GPT-4 for AI-powered HTML generation from drawings.
• Supports iterative refinement by annotating and re-processing AI outputs.
• Includes a "RiskyButCoolAPIKeyInput" component for prototyping API key integration.

Maintenance & Community

The project is associated with tldraw. Further community and development information can be found via tldraw's official channels.

Licensing & Compatibility

The repository is provided as a template, implying permissive usage for creating derivative works. Specific licensing details for the template itself are not explicitly stated in the README, but tldraw SDK is typically MIT licensed.

Limitations & Caveats

The "RiskyButCoolAPIKeyInput" component highlights potential security risks when handling API keys, especially in public-facing applications. The core functionality relies on external AI services (OpenAI), and the quality of output is dependent on the AI model and prompt.