Mockator: AI Destekli Mock Data

Giriş: Sorun Ne?

Yazılım geliştirirken hepimiz aynı sıkıntıyı yaşıyoruz: gerçekçi test verisi bulmak. Faker.js gibi kütüphaneler var ama statik ve sınırlılar. ChatGPT'ye "bana 50 tane e-ticaret siparişi üret" desen, güzel bir JSON döndürür ama tutarlılık sıfır—bir müşteri adı "John Doe" iken email'i "alice@example.com" olabiliyor.

Hem AI'ın esnekliğini, hem de tip güvenliğini bir araya getiren, polyglot çıktı (JSON → SQL → CSV) alabileceğin ve privacy-first bir mock data aracına ihtiyacım vardı. Mockator tam da bunu çözmek için doğdu.

---

🎯 Neden Mockator?

Mockator = Mock + Generator

Üç ana hedefim vardı:

1. Doğal Dil veya TypeScript Schema: İstediğin gibi tarif et, AI senin için akıllı veri üretsin.
2. Polyglot Output: Bir kere JSON üret, sonra client-side'da SQL veya CSV'ye dönüştür (re-fetch yok).
3. BYOK (Bring Your Own Key): Kendi OpenAI/Anthropic/Google/Groq anahtarını kullan, hiçbir şey bizim sunucuda saklanmaz.

---

🧰 Teknoloji Stack

Frontend

• Next.js 16.0.10 (App Router) – Modern React SSR framework
• React 19 – Yeni concurrent rendering özellikleriyle
• Tailwind CSS 4 – Utility-first styling
• Monaco Editor – VS Code'un editörü, syntax highlighting ile JSON/SQL/CSV görüntüleme
• Shadcn UI + Radix – Accessible UI componentleri (Dialog, Tabs, Select)
• Lucide Icons – Minimal ve temiz iconlar

Backend & AI

• Vercel AI SDK – Streaming AI responses
• Multi-Provider Support:
  • OpenAI (gpt-4o-mini)
  • Anthropic (Claude Haiku)
  • Google (Gemini Flash)
  • Groq (Llama 3)
• Edge Runtime – Serverless, hızlı, global deployment

State Management

• React Context – MockatorProvider ile global state
• Session-only keys – localStorage yerine memory'de tutulan API anahtarları

---

🏗️ Mimari: Nasıl Çalışıyor?

1. Stateless Server

API route (/api/generate) sadece bir proxy gibi davranır:

// Kullanıcı kendi key'ini header'da gönderiyor
const provider = request.headers.get("x-provider"); // openai, anthropic, etc.
const apiKey = request.headers.get("x-api-key");

// AI SDK ile stream başlatıyoruz
const result = await streamText({
  model: client(modelId),
  system: systemPrompt, // "Sen bir Mock Data Generator'sın..."
  prompt: userPrompt,
  temperature: 0.5,
});

return result.toTextStreamResponse();

Key point: Hiçbir key sunucuda saklanmaz. Direkt provider'a iletilir.

2. Client-Side Transformers

AI'dan her zaman JSON alıyoruz. Sonra kullanıcı SQL veya CSV tab'ine tıkladığında, browser'da instant transform yapıyoruz:

// lib/transformers.ts
export function jsonToSql(json: any[], tableName = "mock_data"): string {
  // INSERT INTO mock_data (id, name) VALUES (1, 'Alice');
}

export function jsonToCsv(json: any[]): string {
  // id,name\n1,Alice
}

Avantaj: Ekstra network request yok, anlık dönüşüm.

3. Privacy-First Design

// MockatorProvider
const [providerKeys, setProviderKeys] = useState<ProviderKeys>({});
// No useEffect, no localStorage!
// Keys sadece memory'de, tab kapatılınca kayboluyorlar

API anahtarları hassas bilgi. Browser'da bile persist etmemeli. Yeni yaklaşım:

• Keys sadece useState ile memory'de
• Tab kapatılınca veya refresh'te kayboluyorlar
• UI'da "Local & Private" badge ile güvence veriyoruz

---

📱 Mobile-First Responsive

Desktop'ta yan yana split panel, mobilde dikey stack:

// Workbench.tsx
<div className="flex-1 overflow-hidden flex flex-col md:flex-row">
  {/* Desktop: Horizontal ResizablePanel */}
  <div className="hidden md:flex flex-1">
    <ResizablePanel>Input</ResizablePanel>
    <ResizableHandle />
    <ResizablePanel>Output</ResizablePanel>
  </div>

  {/* Mobile: Vertical Stack */}
  <div className="flex md:hidden flex-col">
    <InputPanel />
    <OutputPanel />
  </div>
</div>

Tailwind'in responsive class'larıyla (md:, sm:) tüm layout otomatik adapt oluyor.

---

✨ Öne Çıkan Özellikler

1. Schema Mode (TypeScript)

TypeScript interface paste ediyorsun:

interface User {
  id: number;
  name: string;
  email: string;
  role: "admin" | "user";
}

AI bunu anlayıp tip güvenliğine uygun veri üretiyor.

2. Natural Language Mode

"Generate 10 e-commerce orders with customer name, total price, status, and date"

Boom. 10 satır realistic data.

3. Streaming UX

Vercel AI SDK sayesinde, data chunk chunk geliyor. Monaco Editor'de canlı yazılıyor—sanki terminalde console.log izliyormuş gibi.

4. Multi-Provider BYOK

Bir provider pahalıya gelirse, başka birine geç:

• OpenAI → $0.15/1M tokens
• Groq → Blazing fast, ucuz
• Anthropic → Daha iyi reasoning

Dropdown'dan seç, key'ini gir, ready.

---

🗺️ Roadmap: Sonraki Adımlar

• 👤 User Profiles & Cloud Sync: Supabase ile auth, PostgreSQL'de schema'ları sakla.
• 💳 SaaS Mode: "Key getirmek istemiyorum, subscription ödeyeyim" diyenler için managed servis.
• 🌐 Public Schema Sharing: mockator.com/s/e-commerce-v1 gibi linklerle schema paylaş.

---

🎓 Öğrendiklerim

1. Vercel AI SDK Gerçekten İyi

streamText ile hem OpenAI, hem Anthropic, hem de Groq'u aynı API'yle kullanabiliyorsun. Provider switching trivial oluyor.

2. Client-Side Transformers > Backend Format Conversion

Başta "backend'de SQL üreteyim" diye düşündüm. Sonra fark ettim ki:

• Network overhead artıyor
• Cache karmaşık
• Client-side instant ve sıfır maliyet

3. Monaco Editor = VS Code Browser'da

Syntax highlighting, line numbers, copy/paste—hepsi out-of-the-box. @monaco-editor/react paketi ile 5dk setup.

---

📦 Deploy: Vercel'e 30 Saniyede

git push
# Vercel otomatik deploy ediyor

Edge runtime + ISR sayesinde global'de hızlı. Cold start yok.

---

🤝 Açık Kaynak & İletişim

Proje GitHub'da: github.com/berkinduz/mockator

Sorularınız veya feedback için: berkinduz.com/en/about

---

Sonuç

Mockator, AI ile pratik tool geliştirmenin güzel bir örneği. Fancy değil, ama daily workflow'da gerçek problem çözüyor:

• Doğal dilde veya TypeScript'te tarif et
• Polyglot çıktı al (JSON, SQL, CSV)
• Privacy-first—key'in senin

Bir sonraki test data ihtiyacında Faker.js yerine Mockator'ı dene. 🚀

---