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.

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

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

npm install

NEXT_PUBLIC_OPENAI_API_KEY=your-openai-api-key

Project Live

See in action

Ebrahim Khalil on LinkedIn: #openai #openaichatgpt #nextjs #reactjs #javascript #typescript…

Was playing with OpenAI API, and ended up building a basic AI-powered web builder! 😅 About the project: This app allows users to type instructions for web…

linkedin.com

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

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

npm install

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

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

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

npm run dev

The Application Runs on localhost:3000

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