🚀 Vibe Coder SDK

AI-Powered React Native App Generator - Generate production-ready mobile apps from natural language descriptions.

✨ 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

# 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 (recommended - fastest).

2. Configure Environment

Create a .env file:

GROQ_API_KEY=gsk_your_key_here

Or export directly:

export GROQ_API_KEY=gsk_your_key_here

🚀 Quick Start

CLI Usage

# 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

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)

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

npm install -g wrangler
wrangler login

2. Create Worker

wrangler init my-api-proxy
cd my-api-proxy

3. Add Worker Code

Create src/index.ts:

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

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

wrangler deploy

You'll get a URL like: https://my-api-proxy.your-name.workers.dev

6. Use in Your App

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:

// 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 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