diff --git a/.gitignore b/.gitignore
index fd3dbb57..0af5bf6d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,3 +34,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+.idea
diff --git a/app/PreviewShape/PreviewShape.tsx b/app/PreviewShape/PreviewShape.tsx
index 453c5c43..abda128b 100644
--- a/app/PreviewShape/PreviewShape.tsx
+++ b/app/PreviewShape/PreviewShape.tsx
@@ -10,12 +10,14 @@ import {
 	stopEventPropagation,
 	DefaultSpinner,
 } from '@tldraw/tldraw'
+import { CompletionMessageItem } from '../lib/getHtmlFromOpenAI'
+import React from 'react'
 
 export type PreviewShape = TLBaseShape<
 	'preview',
 	{
 		html: string
-		source: string
+		history: CompletionMessageItem[],
 		w: number
 		h: number
 	}
@@ -26,7 +28,7 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 	getDefaultProps(): PreviewShape['props'] {
 		return {
 			html: '',
-			source: '',
+			history: [],
 			w: (960 * 2) / 3,
 			h: (540 * 2) / 3,
 		}
@@ -40,9 +42,10 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 
 	override component(shape: PreviewShape) {
 		const isEditing = useIsEditing(shape.id)
+		const [reloadKey, setReloadKey] = React.useState(0)
 		const toast = useToasts()
 		return (
-			<HTMLContainer className="tl-embed-container" id={shape.id}>
+			<HTMLContainer className="tl-embed-container" id={shape.id} key={reloadKey}>
 				{shape.props.html ? (
 					<iframe
 						className="tl-embed"
@@ -96,6 +99,26 @@ export class PreviewShapeUtil extends BaseBoxShapeUtil<PreviewShape> {
 				>
 					<Icon icon="duplicate" />
 				</div>
+				<div
+					style={{
+						position: 'absolute',
+						top: 0,
+						right: -80,
+						height: 40,
+						width: 40,
+						display: 'flex',
+						alignItems: 'center',
+						justifyContent: 'center',
+						cursor: 'pointer',
+						pointerEvents: 'all',
+					}}
+					onClick={() => {
+						setReloadKey(reloadKey + 1)
+					}}
+					onPointerDown={stopEventPropagation}
+				>
+					<Icon icon="undo" />
+				</div>
 			</HTMLContainer>
 		)
 	}
diff --git a/app/components/ExportButton.tsx b/app/components/ExportButton.tsx
index fde9abbd..79123314 100644
--- a/app/components/ExportButton.tsx
+++ b/app/components/ExportButton.tsx
@@ -1,11 +1,11 @@
-import { useEditor, getSvgAsImage, useToasts, createShapeId } from '@tldraw/tldraw'
-import { useState } from 'react'
-import { PreviewShape } from '../PreviewShape/PreviewShape'
-import { getHtmlFromOpenAI } from '../lib/getHtmlFromOpenAI'
 import { useMakeReal } from '../hooks/useMakeReal'
 
-export function ExportButton() {
-	const makeReal = useMakeReal()
+export function ExportButton({
+															 mode,
+														 }: {
+	mode: 'tailwind' | 'threejs',
+}) {
+	const makeReal = useMakeReal(mode)
 
 	// A tailwind styled button that is pinned to the bottom right of the screen
 	return (
@@ -14,7 +14,7 @@ export function ExportButton() {
 			className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded m-2"
 			style={{ cursor: 'pointer', zIndex: 100000, pointerEvents: 'all' }}
 		>
-			Make Real
+			{`Make Real${mode === 'threejs' ? ' (3D!)' : ''}`}
 		</button>
 	)
 }
diff --git a/app/hooks/useMakeReal.ts b/app/hooks/useMakeReal.ts
index f2168f37..8fb2ce1f 100644
--- a/app/hooks/useMakeReal.ts
+++ b/app/hooks/useMakeReal.ts
@@ -3,7 +3,9 @@ import { useCallback } from 'react'
 import { makeReal } from '../lib/makeReal'
 import { track } from '@vercel/analytics/react'
 
-export function useMakeReal() {
+export function useMakeReal(
+	mode: 'tailwind' | 'threejs',
+) {
 	const editor = useEditor()
 	const toast = useToasts()
 
@@ -13,7 +15,7 @@ export function useMakeReal() {
 		track('make_real', { timestamp: Date.now() })
 
 		try {
-			await makeReal(editor, apiKey)
+			await makeReal(editor, apiKey, mode)
 		} catch (e: any) {
 			console.error(e)
 			toast.addToast({
@@ -22,5 +24,5 @@ export function useMakeReal() {
 				description: `${e.message.slice(0, 100)}`,
 			})
 		}
-	}, [editor, toast])
+	}, [editor, mode, toast])
 }
diff --git a/app/lib/getHtmlFromOpenAI.ts b/app/lib/getHtmlFromOpenAI.ts
index 25f7da54..8116a88d 100644
--- a/app/lib/getHtmlFromOpenAI.ts
+++ b/app/lib/getHtmlFromOpenAI.ts
@@ -1,4 +1,4 @@
-const systemPrompt = `You are an expert web developer who specializes in tailwind css.
+const tailwindSystemPrompt = `You are an expert web developer who specializes in tailwind css.
 A user will provide you with a low-fidelity wireframe of an application. 
 You will return a single html file that uses HTML, tailwind css, and JavaScript to create a high fidelity website.
 Include any extra CSS and JavaScript in the html file.
@@ -13,45 +13,83 @@ Use JavaScript modules and unpkg to import any necessary dependencies.
 
 Respond ONLY with the contents of the html file.`
 
+const threeJsSystemPrompt = `You are an expert web developer who specializes in three.js.
+A user will provide you with a low-fidelity wireframe of an application.
+You will return a single html file that uses HTML, three.js, and JavaScript to create a high fidelity website.
+Add a hidden div into the start of the body that includes the detailed instructions from the user, the contents adjusted to take the requested changes into account. If for example the user requests a change to the color of a button, change the color of the button in the instructions also, instead of saying "change button color".
+Include any extra CSS and JavaScript in the html file.
+The user will provide you with notes in text, arrows, or drawings.
+The user may also include images of other websites as style references. Transfer the styles as best as you can, matching colors.
+Prefer to use standard materials instead of basic and avoid custom shaders.
+Unless otherwise specified, set up orbit controls and a directional light attached to the camera.
+Use an import map e.g. <script type="importmap">{"imports": {"three": "https://unpkg.com/three@0.138.0/build/three.module.js","OrbitControls": "https://unpkg.com/three@0.138.0/examples/jsm/controls/OrbitControls.js"}}</script>
+They may also provide you with the html of a previous design that they want you to iterate from.
+Carry out any changes they request from you, keep everything the same except for the requested changes.
+In the wireframe, the previous design's html will appear as a white rectangle.
+Use creative license to make the application more fleshed out.
+Use JavaScript modules and unpkg to import any necessary dependencies.
+Respond ONLY with the contents of the html file.`
+
+const threeJsText = 'Turn this into a single html file using three.js.'
+const tailwindText = 'Turn this into a single html file using tailwind.'
+const changesText = 'Please make the changes as specified in the image.'
+
 export async function getHtmlFromOpenAI({
-	image,
-	html,
-	apiKey,
-}: {
-	image: string
-	html: string
-	apiKey: string
+																					image,
+																					apiKey,
+																					mode,
+																					history,
+																				}: {
+	image: string;
+	apiKey: string;
+	mode: 'tailwind' | 'threejs',
+	history: CompletionMessageItem[],
 }) {
+	const userMessage: CompletionMessageItem = {
+		role: 'user',
+		content: [
+			{
+				type: 'image_url',
+				image_url: {
+					url: image,
+					detail: 'high',
+				},
+			},
+		],
+	}
+
+	if (history.length === 0) {
+		(userMessage.content as any[]).push({
+			type: 'text',
+			text: mode === 'tailwind' ? tailwindText : threeJsText,
+		})
+	} else {
+		(userMessage.content as any[]).push({
+			type: 'text',
+			text: changesText,
+		})
+	}
+
+	const systemMessage: CompletionMessageItem = {
+		role: 'system',
+		content: mode === 'tailwind' ? tailwindSystemPrompt : threeJsSystemPrompt,
+	}
+
+	const last4NonSystemMessages = history
+		.filter((item) => item.role !== 'system')
+		.slice(-4)
+
+	const messages: CompletionMessageItem[] = [
+		systemMessage,
+		...last4NonSystemMessages,
+		userMessage,
+	]
+
 	const body: GPT4VCompletionRequest = {
 		model: 'gpt-4-vision-preview',
 		max_tokens: 4096,
 		temperature: 0,
-		messages: [
-			{
-				role: 'system',
-				content: systemPrompt,
-			},
-			{
-				role: 'user',
-				content: [
-					{
-						type: 'image_url',
-						image_url: {
-							url: image,
-							detail: 'high',
-						},
-					},
-					{
-						type: 'text',
-						text: 'Turn this into a single html file using tailwind.',
-					},
-					{
-						type: 'text',
-						text: html,
-					},
-				],
-			},
-		],
+		messages,
 	}
 
 	let json = null
@@ -67,41 +105,51 @@ export async function getHtmlFromOpenAI({
 			},
 			body: JSON.stringify(body),
 		})
-		console.log(resp)
 		json = await resp.json()
 	} catch (e) {
-		console.log(e)
+		console.error(e)
+	}
+
+	const newHistory = [...messages]
+
+	if (json) {
+		newHistory.push(json.choices[0].message)
 	}
 
-	return json
+	return {
+		response: json,
+		history: newHistory,
+	}
 }
 
 type MessageContent =
 	| string
 	| (
-			| string
-			| {
-					type: 'image_url'
-					image_url:
-						| string
-						| {
-								url: string
-								detail: 'low' | 'high' | 'auto'
-						  }
-			  }
-			| {
-					type: 'text'
-					text: string
-			  }
-	  )[]
+	| string
+	| {
+	type: 'image_url'
+	image_url:
+		| string
+		| {
+		url: string
+		detail: 'low' | 'high' | 'auto'
+	}
+}
+	| {
+	type: 'text'
+	text: string
+}
+	)[]
+
+export type CompletionMessageItem = {
+	role: 'system' | 'user' | 'assistant' | 'function'
+	content: MessageContent
+	name?: string | undefined
+};
 
 export type GPT4VCompletionRequest = {
 	model: 'gpt-4-vision-preview'
-	messages: {
-		role: 'system' | 'user' | 'assistant' | 'function'
-		content: MessageContent
-		name?: string | undefined
-	}[]
+	messages: CompletionMessageItem[]
 	functions?: any[] | undefined
 	function_call?: any | undefined
 	stream?: boolean | undefined
@@ -114,8 +162,8 @@ export type GPT4VCompletionRequest = {
 	presence_penalty?: number | undefined
 	logit_bias?:
 		| {
-				[x: string]: number
-		  }
+		[x: string]: number
+	}
 		| undefined
 	stop?: (string[] | string) | undefined
 }
diff --git a/app/lib/makeReal.ts b/app/lib/makeReal.ts
index bfc790c7..42850d64 100644
--- a/app/lib/makeReal.ts
+++ b/app/lib/makeReal.ts
@@ -1,8 +1,12 @@
 import { Editor, createShapeId, getSvgAsImage } from '@tldraw/tldraw'
 import { PreviewShape } from '../PreviewShape/PreviewShape'
-import { getHtmlFromOpenAI } from './getHtmlFromOpenAI'
+import { CompletionMessageItem, getHtmlFromOpenAI } from './getHtmlFromOpenAI'
 
-export async function makeReal(editor: Editor, apiKey: string) {
+export async function makeReal(
+	editor: Editor,
+	apiKey: string,
+	mode: 'tailwind' | 'threejs',
+) {
 	const newShapeId = createShapeId()
 	const selectedShapes = editor.getSelectedShapes()
 
@@ -20,7 +24,7 @@ export async function makeReal(editor: Editor, apiKey: string) {
 				y: Math.min(acc.y, top),
 			}
 		},
-		{ x: 0, y: Infinity }
+		{ x: 0, y: Infinity },
 	)
 
 	const previousPreviews = selectedShapes.filter((shape) => {
@@ -31,10 +35,9 @@ export async function makeReal(editor: Editor, apiKey: string) {
 		throw Error(`You can only have one previous design selected.`)
 	}
 
-	const previousHtml =
-		previousPreviews.length === 1
-			? previousPreviews[0].props.html
-			: 'No previous design has been provided this time.'
+	const previousPreview = previousPreviews.length === 1 ? previousPreviews[0] : null
+
+	const history = previousPreview ? previousPreview.props.history : []
 
 	const svg = await editor.getSvg(selectedShapes)
 	if (!svg) throw Error(`Could not get the SVG.`)
@@ -54,16 +57,26 @@ export async function makeReal(editor: Editor, apiKey: string) {
 		type: 'preview',
 		x: previewPosition.x + 60,
 		y: previewPosition.y,
-		props: { html: '', source: dataUrl as string },
+		props: {
+			html: '',
+			history: [],
+		},
 	})
 
 	try {
-		const json = await getHtmlFromOpenAI({
+
+		const getHTMLResult = await getHtmlFromOpenAI({
 			image: dataUrl,
-			html: previousHtml,
 			apiKey,
+			mode,
+			history,
 		})
 
+		const {
+			response: json,
+			history: newHistory,
+		} = getHTMLResult
+
 		if (json.error) {
 			throw Error(`${json.error.message?.slice(0, 100)}...`)
 		}
@@ -76,7 +89,10 @@ export async function makeReal(editor: Editor, apiKey: string) {
 		editor.updateShape<PreviewShape>({
 			id: newShapeId,
 			type: 'preview',
-			props: { html, source: dataUrl as string },
+			props: {
+				html,
+				history: newHistory,
+			},
 		})
 	} catch (e) {
 		editor.deleteShape(newShapeId)
diff --git a/app/page.tsx b/app/page.tsx
index 89fc32db..d7a3a7ed 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable @next/next/no-img-element */
-/* eslint-disable react-hooks/rules-of-hooks */
 'use client'
 
 import dynamic from 'next/dynamic'
@@ -20,7 +19,12 @@ export default function Home() {
 	return (
 		<>
 			<div className={'tldraw__editor'}>
-				<Tldraw persistenceKey="tldraw" shapeUtils={shapeUtils} shareZone={<ExportButton />}>
+				<Tldraw persistenceKey="tldraw" shapeUtils={shapeUtils} shareZone={
+					<div className={"flex"}>
+						<ExportButton mode={'tailwind'} />
+						<ExportButton mode={'threejs'} />
+					</div>
+				}>
 					<APIKeyInput />
 					<LockupLink />
 				</Tldraw>