DevCanvas.ai

Generate production-ready frontend code from text prompts and wireframes using AI.
View Live Demo · Report Bug · Request Feature

---

📋 Table of Contents

• About The Project
  • Key Features
  • Tech Stack
• Project Snapshots
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Contributing
• License
• Contact
• Acknowledgments

---

📖 About The Project

DevCanvas.ai dramatically accelerates web development by empowering developers and designers to instantly generate high-quality, modular frontend code from simple text prompts or wireframe images. By leveraging powerful AI models, it bridges the gap between idea and implementation.

Try it now: https://dev-canvas-ai.vercel.app/

✨ Key Features:

• AI-Powered Generation: Create components from text prompts or by uploading wireframes.
• Multi-Language Support: Generates code in HTML, CSS, JavaScript, TypeScript, and React.
• Flexible AI Models: Integrates with Gemini, DeepSeek, and LLaMA.
• Live Previews: Instantly visualize your code in a live CodeSandbox environment.
• Production-Ready Code: Download clean, modular code ready for any project.
• Credit-Based System: Manage your usage with a straightforward credit system.

💻 Tech Stack

This project is built on a modern and robust technology stack:

---

📸 Project Snapshots

Here is a horizontal gallery showcasing the project. Use your mouse or trackpad to scroll left and right.

---

🚀 Getting Started

Follow these steps to set up a local development environment.

Prerequisites

Ensure you have Node.js (v18+) and a package manager installed.

• npm

  npm install npm@latest -g
  

🔧 Installation

1. Clone the repository

   git clone https://github.com/Aditya-raghuvanshi19/DevCanvas.ai.git
   

2. Navigate into the project directory

   cd DevCanvas.ai
   

3. Install dependencies

   npm install
   

4. Run the development server

   npm run dev
   

5. Open http://localhost:3000 in your browser.

---

💡 Usage

Using DevCanvas.ai is designed to be simple and intuitive:

1. Choose Input: Select between a text prompt or a wireframe upload.
2. Provide Input:
   • Text: Describe the UI you want (e.g., "a responsive navbar with a search bar").
   • Wireframe: Upload an image of your design.
3. Generate: Let the AI work its magic.
4. Preview: Instantly see your component in a live CodeSandbox.
5. Download: Get the production-ready code for your project.

---

🤝 Contributing

Contributions make the open-source community an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Please fork the repo and create a pull request. You can also open an issue with the tag "enhancement".

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Don't forget to give the project a star! ⭐

---

📄 License

Distributed under the MIT License. See LICENSE.txt for more information.

---

📬 Contact

Aditya Raghuvanshi - @adii___01

Project Link: https://github.com/Aditya-raghuvanshi19/DevCanvas.ai

---

Acknowledgments

A special thanks to these resources that helped make DevCanvas.ai possible.

• Next.js Documentation
• Vercel Geist Font
• Best-README-Template
• Img Shields