​
The Process

1

Draw

Draw a sketch of your idea for your website using the inbuilt whiteboarding tool, tldraw.

2

Convert

Concepto AI will automatically convert your sketch from SVG to PNG.

3

OpenAI

Using OpenAI’s latest GPT4-Vision API, Concepto AI will then convert your PNG into a HTML & Tailwind CSS file.

4

Preview

A preview will apper on the the screen of the code & the website.

5

Code

You can then download your HTML & Tailwind CSS file and use it in your project.

​
The Tech Stack

To enable Concepto AI, we use the following tech stack:

  • tldraw, an excellent whiteboarding tool perfect for Node.JS
  • OpenAI’s GPT-4 Vision (Preview) to process the image and return data
  • Tailwind CSS to make GPT-4’s life easier in regards to CSS
  • Vercel’s Edge Functions to process your request in your browser - nothing, apart from your API request to OpenAI, leaves your browser
What is Concepto AI?Contributing