CohereBuilder - AI-Powered React Component Generator

CohereBuilder is a modern web application that enables developers to generate React components using natural language. Similar to V0.dev, this platform allows you to describe the UI components you need in plain English, and our AI will generate the corresponding React code with a live preview.

Try the live demo →

✨ Features

• 🤖 AI-powered generation - Create React components with natural language prompts
• 💻 Modern three-panel UI - Chat interface, code editor, and live preview in one app
• 🎨 Live component previews - See your components as they're built
• 📝 Code editing - Syntax highlighting and easy customization
• 📦 Code export - Download individual components or entire projects as ZIP files
• 🚀 Serverless architecture - Powered by Vercel Edge Functions for fast response times
• 🌐 Web-based - No installation required, works in your browser
• 🌓 Dark theme - Easy on the eyes for comfortable development
• 📱 Responsive design - Works on desktop, tablet, and mobile devices

🛠️ Tech Stack

• Next.js - React framework with serverless capabilities
• React - UI component library
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• Cohere API - AI-powered code generation
• Vercel - Deployment and serverless functions
• Edge Runtime - Fast, globally distributed API endpoints
• JSZip - ZIP file generation for code export

🚀 Getting Started

Prerequisites

• Node.js 18.0 or later
• npm or yarn

Installation

1. Clone this repository:

   git clone https://github.com/likhon-developer/CohereBuilder.git
   cd CohereBuilder

2. Install dependencies:

   npm install

3. Create a .env.local file in the root directory with your Cohere API key:

   COHERE_API_KEY=your_api_key_here
   NEXT_PUBLIC_COHERE_API_KEY=your_api_key_here
   

4. Start the development server:

   npm run dev

5. Open http://localhost:3000 in your browser to see the application.

Deployment on Vercel

The easiest way to deploy your CohereBuilder is to use the Vercel Platform.

1. Push your code to a Git repository (GitHub, GitLab, Bitbucket)
2. Import the project to Vercel
3. Add your environment variables in the Vercel dashboard
4. Deploy!

Or deploy directly from the CLI:

npm run deploy

📂 Project Structure

src/
  ├── app/              # Next.js app router files
  │   ├── api/          # Serverless API routes
  │   ├── page.tsx      # Main application page
  │   └── layout.tsx    # Root layout
  ├── components/       # React components
  │   ├── ui/           # UI primitives
  │   ├── chat-interface.tsx  # Chat interface component
  │   └── code-panel.tsx      # Code editor and preview
  ├── lib/              # Utility functions and API clients
  │   ├── cohere-api.ts # Cohere API integration
  │   └── utils.ts      # Helper functions
public/                 # Static files

🧩 Usage

1. Enter a description of the component you want to create in the chat interface
2. The AI will generate a React component based on your description
3. Preview the component in real-time in the right panel
4. Edit the code if needed
5. Export the component for use in your project

Example Prompts

• "Create a responsive navbar with a logo, navigation links and a mobile menu"
• "Build a product card with image, title, price, rating stars and add to cart button"
• "Design a contact form with name, email, message fields, and validation"

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Inspired by V0.dev
• Built with Next.js
• Powered by Cohere AI
• UI components by shadcn/ui

---

Made with ❤️ by likhon-developer