I built an AI-powered web builder using OpenAI chat API, Next.js, and Styled Component

Ebrahim Khalil — Wed, 22 Mar 2023 11:57:01 +0000

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

ekamid / cgpt-web-builder

A basic Ai-powered web builder!

cgpt-web-builder

A basic Ai-powered web builder

View Demo · Report Bug

About The Project

This app 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, making it easier than ever to fine-tune the appearance and functionality of their website. There is a history function that allows users to revisit previous instructions and code snippets.

Built with Nextjs and Styled Components

Cloning and Running the Application in local

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

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

…

View on GitHub

Project Live

cgpt-web-builder.vercel.app

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.

How can I decouple the socket event emitter and listener from the io connection in server?

Ebrahim Khalil — Tue, 03 Jan 2023 07:16:30 +0000

Do you know how I can decouple the socket event emitter and listener from the io connection? Suppose for now I have to emit/listen to everything from the

`io.on("connection", async (socket) => {
console.log(User Connected: ${socket.id});

//here
socket.emit('emit something)
socket.on('listen something')
});`

but I want to emit from different places of the application, like from services. How can I achieve that?

How to run a function in background?

Ebrahim Khalil — Thu, 22 Dec 2022 02:59:46 +0000

Suppose I have a function that will run every time a user creates. The function will check if the user is nearby of other users. It's a long process, right? I don't wan to wait for its response. So I want to run this function in the background. How can I do that?

Forem: Ebrahim Khalil