npm package: @kuxo/vibe-coder
Description: AI-powered React Native app generator SDK - Generate production-ready mobile apps from natural language
Author: Kuxo
Latest version: 1.0.1

# 🚀 Vibe Coder SDK

> **AI-Powered React Native App Generator** - Generate production-ready mobile apps from natural language descriptions.

[![npm version](https://badge.fury.io/js/%40kuxo%2Fvibe-coder.svg)](https://www.npmjs.com/package/@kuxo/vibe-coder)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.6+-blue.svg)](https://www.typescriptlang.org/)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## ✨ Features

- **🎯 Smart Generation** - Simple requests = simple apps (counter = 1 screen, not 12!)
- **🌐 Multi-Provider** - Works with Groq, Anthropic, OpenAI, OpenRouter, DeepSeek, Google
- **⚡ Fast** - Simple apps generate in ~30 seconds
- **📱 Expo Ready** - Generates Expo Snack-compatible code with `App.js` entry point
- **🔒 Secure** - No hardcoded API keys, all config via environment variables

## 📦 Installation

```bash
# Install in your project
npm install @kuxo/vibe-coder

# Or install globally
npm install -g @kuxo/vibe-coder
```

## 🔧 Setup

### 1. Get an API Key

Get a free API key from [Groq Console](https://console.groq.com) (recommended - fastest).

### 2. Configure Environment

Create a `.env` file:

```env
GROQ_API_KEY=gsk_your_key_here
```

Or export directly:

```bash
export GROQ_API_KEY=gsk_your_key_here
```

## 🚀 Quick Start

### CLI Usage

```bash
# Generate a simple counter app
node dist/index.js "simple counter app"

# Generate a todo app
node dist/index.js "todo app with categories"

# Generate a complex app
node dist/index.js "fitness tracker with workout logging, progress charts, and goals"
```

### SDK Usage

```typescript
import { createGroqCoder, VibeCoder } from '@kuxo/vibe-coder';

// Quick start (uses environment variables)
const coder = createGroqCoder();
const result = await coder.generate('simple counter app');

console.log(result.files);   // All generated files
console.log(result.snackUrl); // Expo Snack URL
console.log(result.stats);    // Generation stats

// Advanced: Use Cloudflare Worker (API keys hidden)
const secureCoder = new VibeCoder({
  provider: 'custom',
  baseUrl: 'https://my-proxy.workers.dev?provider=groq'
});

const secureResult = await secureCoder.generate('Build a fitness app');
```

## 🎯 Smart Complexity Detection

The SDK intelligently matches output to your request:

| Request | Screens | Files | Time |
|---------|---------|-------|------|
| "counter app" | 1 | ~10 | ~30s |
| "todo app" | 2-3 | ~15 | ~60s |
| "fitness tracker" | 4-6 | ~20 | ~90s |
| "social media app" | 6-10 | ~25 | ~120s |

## 🌐 Supported Providers

| Provider | Model | Speed | Quality |
|----------|-------|-------|---------|
| **Groq** (default) | kimi-k2, llama-3.3 | ⚡⚡⚡ | ⭐⭐⭐ |
| **Anthropic** | Claude Sonnet 4 | ⚡⚡ | ⭐⭐⭐⭐⭐ |
| **OpenAI** | GPT-4o | ⚡⚡ | ⭐⭐⭐⭐ |
| **DeepSeek** | DeepSeek Chat | ⚡⚡⚡ | ⭐⭐⭐ |

## 📂 Generated App Structure

```
App.js                    # Expo Snack entry point
App.tsx                   # TypeScript entry
package.json             
app.json                  
theme.ts                  # Design system
screens/
└── CounterScreen.tsx     # Only screens you need!
components/
├── Button.tsx
├── Card.tsx
└── Input.tsx
```

## 🔒 Security & Cloudflare Workers

### Option 1: Environment Variables (Simple)

```bash
export GROQ_API_KEY=gsk_your_key_here
```

**⚠️ Warning:** API keys are exposed in client-side code!

### Option 2: Cloudflare Workers (Recommended - Keys Hidden)

Hide your API keys in a secure Cloudflare Worker proxy. **100% FREE** with 100,000 requests/day!

#### Quick Setup (5 Minutes)

**1. Install Wrangler CLI**
```bash
npm install -g wrangler
wrangler login
```

**2. Create Worker**
```bash
wrangler init my-api-proxy
cd my-api-proxy
```

**3. Add Worker Code**

Create `src/index.ts`:

```typescript
export default {
  async fetch(request: Request, env: any): Promise<Response> {
    const url = new URL(request.url);
    const provider = url.searchParams.get('provider') || 'groq';
    
    // Provider configurations
    const providers: Record<string, { url: string; key: string }> = {
      groq: {
        url: 'https://api.groq.com/openai/v1/chat/completions',
        key: env.GROQ_API_KEY
      },
      anthropic: {
        url: 'https://api.anthropic.com/v1/messages',
        key: env.ANTHROPIC_API_KEY
      },
      openai: {
        url: 'https://api.openai.com/v1/chat/completions',
        key: env.OPENAI_API_KEY
      },
      deepseek: {
        url: 'https://api.deepseek.com/v1/chat/completions',
        key: env.DEEPSEEK_API_KEY
      }
    };
    
    const config = providers[provider];
    if (!config) {
      return new Response('Invalid provider', { status: 400 });
    }
    
    // Forward request to AI provider
    const headers: Record<string, string> = {
      'Content-Type': 'application/json'
    };
    
    if (provider === 'anthropic') {
      headers['x-api-key'] = config.key;
      headers['anthropic-version'] = '2023-06-01';
    } else {
      headers['Authorization'] = `Bearer ${config.key}`;
    }
    
    const response = await fetch(config.url, {
      method: request.method,
      headers,
      body: request.body
    });
    
    return new Response(response.body, {
      status: response.status,
      headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*'
      }
    });
  }
};
```

**4. Add API Keys Securely**
```bash
wrangler secret put GROQ_API_KEY
# Paste your key, press Enter

wrangler secret put ANTHROPIC_API_KEY
wrangler secret put OPENAI_API_KEY
wrangler secret put DEEPSEEK_API_KEY
```

**5. Deploy**
```bash
wrangler deploy
```

You'll get a URL like: `https://my-api-proxy.your-name.workers.dev`

**6. Use in Your App**

```typescript
import { VibeCoder } from '@kuxo/vibe-coder';

const coder = new VibeCoder({
  provider: 'custom',
  baseUrl: 'https://my-api-proxy.your-name.workers.dev?provider=groq'
  // No apiKey needed! It's hidden in Cloudflare!
});

const result = await coder.generate('Build a todo app');
```

**Switch providers by changing the query parameter:**

```typescript
// Use Groq (fast)
baseUrl: 'https://my-proxy.workers.dev?provider=groq'

// Use Claude (best quality)
baseUrl: 'https://my-proxy.workers.dev?provider=anthropic'

// Use OpenAI
baseUrl: 'https://my-proxy.workers.dev?provider=openai'
```

#### Benefits of Cloudflare Workers

✅ **API Keys Hidden** - Keys stored securely in Cloudflare, never exposed  
✅ **100% Free Tier** - 100,000 requests/day included  
✅ **Global CDN** - Fast responses worldwide  
✅ **One URL** - Switch AI providers without code changes  
✅ **No Server** - Cloudflare manages infrastructure  
✅ **Production Ready** - Enterprise-grade security  

#### Pricing

- **Free:** 100,000 requests/day
- **Paid:** $0.50 per million requests after free tier

**Perfect for production apps!** 🚀

## 📖 Full Documentation

See [react_sdk.md](react_sdk.md) for complete SDK documentation including:
- All provider configurations
- Advanced usage with callbacks
- Streaming and thinking models
- Error handling
- Best practices

## 🤝 Contributing

Contributions welcome! Please read our contributing guidelines.

## 📄 License

MIT License - see LICENSE file for details.

---

**Built with ❤️ for the React Native community**