Logic-Lab ⚡️🧠

To play with Logic-Lab click here!

Logic-Lab is an interactive logic circuit simulator built for the web. Design, simulate, and test digital logic circuits with an intuitive drag-and-drop interface. Supercharged with AI, Logic-Lab allows you to generate complex circuit blueprints simply by describing them.

Vibe coded with Gemini 3.0 ❤️!

✨ Features

• Interactive Canvas: Infinite canvas to drag, drop, and arrange logic components.
• Comprehensive Component Library:
  • Basic Gates: AND, OR, NOT, NAND, NOR, XOR.
  • Inputs: Toggle Switches (Levers), Push Buttons.
  • Outputs: Light Bulbs / LEDs.
• Real-time Simulation: Circuits are simulated in real-time (10Hz), allowing for immediate feedback and interaction.
• Custom Integrated Circuits (ICs): Package your complex circuits into reusable custom ICs to build modular and scalable designs.
• AI Architect: Describe the circuit you need (e.g., "Create a 4-bit ripple carry adder"), and the AI will generate the blueprint for you.
• Productivity Tools:
  • Undo/Redo: Never worry about mistakes with full history support.
  • Copy/Paste: Duplicate parts of your circuit easily.
  • Save/Load: Persist your projects locally.

🤖 AI Architect

Logic-Lab integrates with Google's Generative AI to act as your circuit co-pilot. Open the AI Chat Modal and ask for help:

"Build a full adder using only NAND gates." "Create a 2-to-4 line decoder."

The AI will analyze your request and automatically place and connect the components on your canvas.

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/rafa-rrayes/Logic-Lab.git
   cd Logic-Lab

2. Install dependencies:

   npm install

3. Set up environment variables: Create a .env file in the root directory and add your Google Gemini API key:

   GEMINI_API_KEY=your_api_key_here

4. Start the development server:

   npm run dev

5. Open your browser and navigate to http://localhost:5173.

🛠️ Tech Stack

• Frontend Framework: React 19
• Build Tool: Vite
• Language: TypeScript
• Styling: Tailwind CSS
• Icons: Lucide React
• AI Integration: Google GenAI SDK

🎮 Usage Guide

1. Adding Components: Open the sidebar on the left and drag components onto the canvas.
2. Wiring: Click on an output pin (circle on the right of a component) and drag to an input pin (circle on the left) to create a connection.
3. Interacting: Click on Levers or Buttons to change their state and observe the output Bulbs.
4. Creating ICs:
   • Select a group of components.
   • Click the "Create IC" button.
   • Define your inputs and outputs.
   • Give it a name, and it will appear in your component library!