I built an AI-powered web builder using OpenAI chat API, Next.js, and Styled Component
Tags: chatgpt, nextjs, react, api
Published: 2023-03-22 11:57:01

ChatGPT, the artificial intelligence chatbot developed by OpenAI has the potential to automate a wide range of tasks across various industries. ChatGPT can understand natural language, allowing it to converse with users in a human-like manner, making it an effective tool for customer service, support, and development. With its ability to learn and adapt, ChatGPT can continuously improve its performance, making it an increasingly valuable tool for automating tasks and streamlining workflows. Overall, the possibilities of AI and ChatGPT to automate tasks are vast, and they are expected to transform the way businesses operate in the future.

**I was recently playing with OpenAI chat API, and ended up building a basic web builder.**


![I know what you're thinking!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nyd984fs0loj9ufsrkh7.jpg)

## About the project

This project allows users to

- Type instructions for web components and instantly receive corresponding HTML, CSS, and JavaScript code generated by OpenAI chat API.

- Users can preview their code and even make changes directly in the editor.

- There is a history function that allows users to revisit previous instructions and code snippets.

## Project Repository

{% embed https://github.com/ekamid/cgpt-web-builder %}

## Project Live

{% embed https://cgpt-web-builder.vercel.app/ %}

## See in action 

{% embed https://www.linkedin.com/feed/update/urn:li:activity:7043848943457239040/ %}

## How does it work?

- Whenever user click on a generate section with an instruction, it trigger a hook called _**useMessageWithChatGPT**_.

- The instruction will wrap by another instruction **_"Write code. Html should be without html, body, head and script tag. Wrap html code with ---starthtml--- ---endhtml---, css code with ---startcss--- ---endcss--- and javascript code ---startjs--- ---endjs---. And ---startcss--- ---endcss--- and javascript code ---startjs--- ---endjs--- will not be between  ---starthtml--- ---endhtml---"_** and call the api.

- The API will return a content based on the instruction. For example the html code will be wrapped by **_---starthtml--- {html code} ---endhtml---_**

- Now we will call a helper function called **extractCode()** to extract code using regular expression from the content.

- And finally update preview by **updatePreview()** helper function.

## Run the app to localhost

**Clone the project into local**

```bash
git clone https://github.com/ekamid/cgpt-web-builder.git
cd cgpt-web-builder
```

**Install all the npm packages**

Go into the project folder and type the following command to install all npm packages

```bash
npm install
```

**Rename the .env.example to .env and add your OpenAI API Key**

```bash
NEXT_PUBLIC_OPENAI_API_KEY=your-openai-api-key
```

For the OpenAI API key

- Go to https://platform.openai.com

- Login to your account

- Go to https://platform.openai.com/account/api-keys

- Create a new secret key

- Copy and paste the secret key to your .env file


![Open AI API Key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qv73416zm45tsyy8eple.png)

**In order to run the application in dev mode type the following command**

```bash
npm run dev
```

The Application Runs on **localhost:3000**

> Leave a star if you like the project. Any suggestions are wellcome.