{"id":13494972,"url":"https://github.com/tldraw/make-real-starter","last_synced_at":"2025-05-14T14:08:17.419Z","repository":{"id":207761537,"uuid":"719998558","full_name":"tldraw/make-real-starter","owner":"tldraw","description":"Make it real","archived":false,"fork":false,"pushed_at":"2025-03-31T15:58:21.000Z","size":263,"stargazers_count":1495,"open_issues_count":14,"forks_count":244,"subscribers_count":14,"default_branch":"main","last_synced_at":"2025-04-15T08:45:25.797Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tldraw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-11-17T11:04:18.000Z","updated_at":"2025-04-13T18:53:23.000Z","dependencies_parsed_at":"2025-04-15T03:37:41.590Z","dependency_job_id":"17c6470a-a894-4ce8-ba59-80389d5bd04d","html_url":"https://github.com/tldraw/make-real-starter","commit_stats":null,"previous_names":["tldraw/make-real-starter"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fmake-real-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fmake-real-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fmake-real-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tldraw%2Fmake-real-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tldraw","download_url":"https://codeload.github.com/tldraw/make-real-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254159700,"owners_count":22024564,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T19:01:29.997Z","updated_at":"2025-05-14T14:08:17.401Z","avatar_url":"https://github.com/tldraw.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","others"],"sub_categories":[],"readme":"# Make Real\n\nUse this repo as a template to create Make Real style apps like\n[makereal.tldraw.com](https://makereal.tldraw.com). To get started:\n\n1. Use the template and clone your new repo to your computer\n2. Run `npm install` to install dependencies\n3. Get an OpenAI API key from [platform.openai.com/api-keys](https://platform.openai.com/api-keys).\n4. Create a `.env.local` file that contains `NEXT_PUBLIC_OPENAI_API_KEY=your api key here`\n5. Run `npm run dev`\n6. Open [localhost:3000](http://localhost:3000) and make some stuff real!\n\n## How it works\n\nMake Real is built with the [tldraw\nSDK](https://tldraw.dev/?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=make-real), a very good\nReact library for creating whiteboards and other infinite canvas experiences.\n\nTo use it, first draw a mockup for a piece of UI. When you're ready, select the drawing, and press\nthe Make Real button. We'll capture an image of your selection, and send it to\n[GPT](https://platform.openai.com/docs/guides/vision) along with instructions to turn it into a HTML\nfile.\n\nWe take the HTML response and add it to a tldraw [custom\nshape](https://tldraw.dev/docs/shapes#Custom-shapes). The custom shape shows the response in an\niframe so that you can interact with it on the canvas. If you want to iterate on the response,\nannotate the iframe, select it all, and press 'Make Real' again.\n\n## To make changes\n\nTo change how Make Real works, start from the [`prompt.ts`](./app/prompt.ts) file. From there, you\ncan change the prompt that gets sent to gpt-4.\n\nYou can edit the `makeReal` function in [`makeReal.ts`](./app/lib/makeReal.tsx) to change what\nhappens when you hit the Make Real button.\n\nIf you'd like Make Real to create something other than HTML, you'll need to either update the\n[`PreviewShape`](./app/PreviewShape/PreviewShape.tsx) to display something different, or use one of\ntldraw's built-in shapes like image or text.\n\n## The dangerous API key input method\n\nFor prototyping, we've also included the `RiskyButCoolAPIKeyInput`, similar to the one found on\n[makereal.tldraw.com](https://makereal.tldraw.com). Please use this as carefully and ethically as\nyou can, as users should be reluctant to add API keys to public sites.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftldraw%2Fmake-real-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftldraw%2Fmake-real-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftldraw%2Fmake-real-starter/lists"}