@toonoku/tooncode/README.md

Google Gemini powered React component generator CLI

<p align="center">
  <a href="#">
    <img width="400" src="public/logo.png" alt="tooncode logo"/>
  </a>
</p>

<p align="center">
  <img src="https://img.shields.io/npm/v/@toonoku/tooncode?style=for-the-badge&color=54aeef">
  <img src="https://img.shields.io/github/repo-size/toonoku/tooncode?style=for-the-badge&color=54aeef">
  <img src="https://img.shields.io/npm/l/@toonoku/tooncode?style=for-the-badge&color=54aeef">
  <img src="https://img.shields.io/npm/dt/@toonoku/tooncode?style=for-the-badge&color=54aeef">
  <img src="https://img.shields.io/github/contributors/toonoku/tooncode?style=for-the-badge&color=54aeef">
</p>

<p align="center">
  <a href="https://toonoku.com" target="_blank">
    <img src="https://img.shields.io/badge/Website-toonoku.com-ef5486?style=for-the-badge&logo=world&logoColor=white" />
  </a>
  <a href="https://www.npmjs.com/package/@toonoku/tooncode" target="_blank">
    <img src="https://img.shields.io/badge/NPM-Package-ef5486?style=for-the-badge&logo=npm" />
  </a>
</p>

#

# 🤖 ToonCode

> **EN:** Your AI-Powered React Component Generator. Create components instantly from your terminal with the power of Google Gemini.
> 
> **TR:** AI Destekli React Component Oluşturucunuz. Google Gemini gücüyle terminalinizden anında component'ler yaratın.

---

## <picture><img src = "https://em-content.zobj.net/source/microsoft-teams/363/flag-united-kingdom_1f1ec-1f1e7.png" width = "25" height = "25"></picture> English

### 🚀 Features

- **AI-Powered:** Uses Google Gemini to generate high-quality React components (JSX & TSX).
- **Interactive CLI:** Asks for component details, file paths, and specifications through an easy-to-use command-line interface.
- **Context-Aware:** Analyzes your existing components to generate new ones with a similar structure.
- **Simple & Fast:** No complex configurations. Just run the command and answer the questions.
- **Customizable:** Specify hooks, file types, and other details for your components.

### 📦 Installation

```bash
npm install -g @toonoku/tooncode
```

### ⚙️ Usage

Simply run the following command in your terminal and follow the prompts:

```bash
tooncode
```

The tool will ask for your Gemini API Key on the first run and save it for future use. Then, it will guide you through the component creation process.

---

## <picture><img src = "https://em-content.zobj.net/source/microsoft-teams/363/flag-turkey_1f1f9-1f1f7.png" width = "25" height = "25"></picture> Türkçe

### 🚀 Özellikler

- **Yapay Zeka Destekli:** Yüksek kaliteli React component'leri (JSX & TSX) oluşturmak için Google Gemini kullanır.
- **İnteraktif CLI:** Kullanımı kolay bir komut satırı arayüzü aracılığıyla component ayrıntılarını, dosya yollarını ve özellikleri sorar.
- **Bağlama Duyarlı:** Benzer bir yapıda yeni component'ler oluşturmak için mevcut component'lerinizi analiz eder.
- **Basit ve Hızlı:** Karmaşık yapılandırmalar yok. Sadece komutu çalıştırın ve soruları yanıtlayın.
- **Özelleştirilebilir:** Component'leriniz için hook'ları, dosya türlerini ve diğer ayrıntıları belirtin.

### 📦 Kurulum

```bash
npm install -g @toonoku/tooncode
```

### ⚙️ Kullanım

Terminalinizde aşağıdaki komutu çalıştırmanız ve yönnergeleri izlemeniz yeterlidir:

```bash
tooncode
```

Araç, ilk çalıştırmada Gemini API Anahtarınızı isteyecek ve ileride kullanmak üzere kaydedecektir. Ardından, component oluşturma sürecinde size rehberlik edecektir.

---

### ❤️ Contributing

Every contribution is welcome! Our focus is on creating a simple, fast, and effective tool. Feel free to contribute by opening issues or submitting pull requests.

### ❤️ Katkıda Bulunma

Her katkıya açığız! Odağımız basit, hızlı ve etkili bir araç yaratmaktır. Lütfen issue açarak veya pull request göndererek katkıda bulunmaktan çekinmeyin.

---

**Made with ❤️‍ by Toonoku Team**

<p align="center">
  <img src="https://readme-typing-svg.herokuapp.com?font=JetBrains+Mono&size=18&pause=1000&color=54aeef&center=true&vCenter=true&width=435&lines=Code+Smarter,+Not+Harder.">
</p>