DEV Community

Cover image for I built an AI-powered web builder using OpenAI chat API, Next.js, and Styled Component
Ebrahim Khalil
Ebrahim Khalil

Posted on

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

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!

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

GitHub logo 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 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
Enter fullscreen mode Exit fullscreen mode

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

npm install
Enter fullscreen mode Exit fullscreen mode

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

NEXT_PUBLIC_OPENAI_API_KEY=your-openai-api-key
Enter fullscreen mode Exit fullscreen mode

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

npm
Enter fullscreen mode Exit fullscreen mode

Project Live

See in action

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

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…

favicon 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
Enter fullscreen mode Exit fullscreen mode

Install all the npm packages

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

npm install
Enter fullscreen mode Exit fullscreen mode

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

NEXT_PUBLIC_OPENAI_API_KEY=your-openai-api-key
Enter fullscreen mode Exit fullscreen mode

For the OpenAI API key

Open AI API Key

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

npm run dev
Enter fullscreen mode Exit fullscreen mode

The Application Runs on localhost:3000

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

Top comments (0)