Skip to content

Latest commit

 

History

History
39 lines (28 loc) · 1.89 KB

README.md

File metadata and controls

39 lines (28 loc) · 1.89 KB

WebCraft

Built with React.js AI Generative Model

Welcome to WebCraft, Web Page Code Generator and Integrated Development Environment (IDE)! 🚀

This project leverages the power of AI to help users generate HTML, CSS, and JavaScript code for web pages effortlessly. With a simple prompt, the Generative AI model creates code snippets, making web development accessible to everyone.

Overview

WebCraft demo

Features

  • AI Integration: Google's Generative AI model used to generate HTML, CSS, and JavaScript code based on user prompts.
  • Live Preview: See a real-time preview of the generated code as you edit.
  • Error Handling: Provides feedback and error messages if the AI model encounters any issues generating the code.

How to Use

  1. Get Free Gemini API key: Generate a free api key Link, then update /src/components/Home.js, const api = "AIzaSyxxxx..."
  2. Input Prompt: Describe the web page you want to create. For example, "Create a simple landing page with a navigation bar and a hero section."
  3. Generate Code: Click the "Generate" button to let the AI model generate the HTML, CSS, and JavaScript code based on your prompt.
  4. View Result: The generated code will be displayed in the result section. You can copy the code to your clipboard using the "Copy Code" button.
  5. Edit and Preview: Make adjustments and see the changes in real-time.

Technologies Used

  • React.js
  • Google Generative AI

Contribution

Thank you for checking out WebCraft! If you have any questions or feedback, please open an issue or reach out to us.